{
	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json",
	"componentName": "wrapper",
	"title": "Wrapper",
	"componentClass": "wrapper",
	"example": {
		"attributes": {
			"wrapperId": "This a custom ID",
			"wrapperBgColorType": "project",
			"wrapperBgColorProject": "white",
			"wrapperUse": true,
			"wrapperSimple": false,
			"wrapperUseShowControl": true,
			"wrapperNoControls": false,
			"wrapperParentClass": "",
			"wrapperWidthLarge": 12,
			"wrapperOffsetLarge": 1,
			"wrapperHideLarge": false,
			"wrapperIsFullWidthLarge": true,
			"wrapperSpacingTopLarge": 1,
			"wrapperSpacingBottomLarge": 1,
			"wrapperSpacingTopInLarge": 1,
			"wrapperDividerTopLarge": true,
			"wrapperDividerColor": "black"
		}
	},
	"attributes": {
		"wrapperUseInner": {
			"type": "boolean",
			"default": true
		},
		"wrapperUse": {
			"type": "boolean",
			"default": true
		},
		"wrapperUseShowControl": {
			"type": "boolean",
			"default": true
		},
		"wrapperSimpleShowControl": {
			"type": "boolean",
			"default": true
		},
		"wrapperNoControls": {
			"type": "boolean",
			"default": false
		},
		"wrapperSimple": {
			"type": "boolean",
			"default": false
		},
		"wrapperParentClass": {
			"type": "string"
		},
		"uniqueWrapperId": {
			"type": "string"
		},
		"wrapperOnlyOutput": {
			"type": "boolean",
			"default": false
		},

		"wrapperId": {
			"type": "string"
		},
		"wrapperAnchorId": {
			"type": "string"
		},
		"wrapperMinWidth": {
			"type": "integer",
			"default": 1
		},
		"wrapperGetGridInfo": {
			"type": "boolean",
			"default": false
		},

		"wrapperTag": {
			"type": "string",
			"default": "div"
		},

		"wrapperBgColorType": {
			"type": "string",
			"default": "project"
		},
		"wrapperBgColorProject": {
			"type": "string"
		},
		"wrapperBgColorGradient": {
			"type": "string"
		},
		"wrapperBgColorGradientBlendMode": {
			"type": "string"
		},
		"wrapperBgColorGradientRepeat": {
			"type": "string"
		},
		"wrapperBgColorGradientPosition": {
			"type": "string"
		},
		"wrapperBgColorGradientSize": {
			"type": "string"
		},

		"wrapperWidthLarge": {
			"type": "integer",
			"default": 12
		},
		"wrapperWidthDesktop": {
			"type": "integer"
		},
		"wrapperWidthTablet": {
			"type": "integer"
		},
		"wrapperWidthMobile": {
			"type": "integer",
			"default": 12
		},

		"wrapperOffsetLarge": {
			"type": "integer",
			"default": 1
		},
		"wrapperOffsetDesktop": {
			"type": "integer"
		},
		"wrapperOffsetTablet": {
			"type": "integer"
		},
		"wrapperOffsetMobile": {
			"type": "integer",
			"default": 1
		},

		"wrapperSpacingTopLarge": {
			"type": "integer",
			"default": 0
		},
		"wrapperSpacingTopDesktop": {
			"type": "integer"
		},
		"wrapperSpacingTopTablet": {
			"type": "integer"
		},
		"wrapperSpacingTopMobile": {
			"type": "integer"
		},

		"wrapperSpacingBottomLarge": {
			"type": "integer",
			"default": 40
		},
		"wrapperSpacingBottomDesktop": {
			"type": "integer"
		},
		"wrapperSpacingBottomTablet": {
			"type": "integer"
		},
		"wrapperSpacingBottomMobile": {
			"type": "integer"
		},

		"wrapperSpacingLeftLarge": {
			"type": "integer",
			"default": 0
		},
		"wrapperSpacingLeftDesktop": {
			"type": "integer"
		},
		"wrapperSpacingLeftTablet": {
			"type": "integer"
		},
		"wrapperSpacingLeftMobile": {
			"type": "integer"
		},

		"wrapperSpacingRightLarge": {
			"type": "integer",
			"default": 0
		},
		"wrapperSpacingRightDesktop": {
			"type": "integer"
		},
		"wrapperSpacingRightTablet": {
			"type": "integer"
		},
		"wrapperSpacingRightMobile": {
			"type": "integer"
		},

		"wrapperSpacingLeftInLarge": {
			"type": "integer",
			"default": 0
		},
		"wrapperSpacingLeftInDesktop": {
			"type": "integer"
		},
		"wrapperSpacingLeftInTablet": {
			"type": "integer"
		},
		"wrapperSpacingLeftInMobile": {
			"type": "integer"
		},

		"wrapperSpacingRightInLarge": {
			"type": "integer",
			"default": 0
		},
		"wrapperSpacingRightInDesktop": {
			"type": "integer"
		},
		"wrapperSpacingRightInTablet": {
			"type": "integer"
		},
		"wrapperSpacingRightInMobile": {
			"type": "integer"
		},

		"wrapperSpacingTopInLarge": {
			"type": "integer",
			"default": 0
		},
		"wrapperSpacingTopInDesktop": {
			"type": "integer"
		},
		"wrapperSpacingTopInTablet": {
			"type": "integer"
		},
		"wrapperSpacingTopInMobile": {
			"type": "integer"
		},

		"wrapperSpacingBottomInLarge": {
			"type": "integer",
			"default": 0
		},
		"wrapperSpacingBottomInDesktop": {
			"type": "integer"
		},
		"wrapperSpacingBottomInTablet": {
			"type": "integer"
		},
		"wrapperSpacingBottomInMobile": {
			"type": "integer"
		},

		"wrapperRoundedCornersLarge": {
			"type": "integer",
			"default": 0
		},
		"wrapperRoundedCornersDesktop": {
			"type": "integer"
		},
		"wrapperRoundedCornersTablet": {
			"type": "integer"
		},
		"wrapperRoundedCornersMobile": {
			"type": "integer"
		},

		"wrapperDividerColor": {
			"type": "string"
		},
		"wrapperDividerTopLarge": {
			"type": "boolean",
			"default": false
		},
		"wrapperDividerTopDesktop": {
			"type": "boolean"
		},
		"wrapperDividerTopTablet": {
			"type": "boolean"
		},
		"wrapperDividerTopMobile": {
			"type": "boolean"
		},

		"wrapperDividerBottomLarge": {
			"type": "boolean",
			"default": false
		},
		"wrapperDividerBottomDesktop": {
			"type": "boolean"
		},
		"wrapperDividerBottomTablet": {
			"type": "boolean"
		},
		"wrapperDividerBottomMobile": {
			"type": "boolean"
		},

		"wrapperDividerLeftLarge": {
			"type": "boolean",
			"default": false
		},
		"wrapperDividerLeftDesktop": {
			"type": "boolean"
		},
		"wrapperDividerLeftTablet": {
			"type": "boolean"
		},
		"wrapperDividerLeftMobile": {
			"type": "boolean"
		},

		"wrapperDividerRightLarge": {
			"type": "boolean",
			"default": false
		},
		"wrapperDividerRightDesktop": {
			"type": "boolean"
		},
		"wrapperDividerRightTablet": {
			"type": "boolean"
		},
		"wrapperDividerRightMobile": {
			"type": "boolean"
		},

		"wrapperHideLarge": {
			"type": "boolean",
			"default": false
		},
		"wrapperHideDesktop": {
			"type": "boolean"
		},
		"wrapperHideTablet": {
			"type": "boolean"
		},
		"wrapperHideMobile": {
			"type": "boolean"
		},

		"wrapperIsFullWidthLarge": {
			"type": "boolean",
			"default": false
		},
		"wrapperIsFullWidthDesktop": {
			"type": "boolean"
		},
		"wrapperIsFullWidthTablet": {
			"type": "boolean"
		},
		"wrapperIsFullWidthMobile": {
			"type": "boolean",
			"default": false
		},

		"wrapperHideOverflowHLarge": {
			"type": "boolean",
			"default": false
		},
		"wrapperHideOverflowHDesktop": {
			"type": "boolean"
		},
		"wrapperHideOverflowHTablet": {
			"type": "boolean"
		},
		"wrapperHideOverflowHMobile": {
			"type": "boolean"
		},

		"wrapperHideOverflowVLarge": {
			"type": "boolean",
			"default": false
		},
		"wrapperHideOverflowVDesktop": {
			"type": "boolean"
		},
		"wrapperHideOverflowVTablet": {
			"type": "boolean"
		},
		"wrapperHideOverflowVMobile": {
			"type": "boolean"
		}
	},
	"options": {
		"wrapperBgColorProject": [
			"primary700",
			"primary500",
			"primary300",
			"black",
			"gray900",
			"gray800",
			"gray700",
			"gray600",
			"gray500",
			"gray400",
			"gray300",
			"gray200",
			"gray100",
			"white"
		],
		"wrapperDividerColor": [
			"primary700",
			"primary500",
			"primary300",
			"black",
			"gray900",
			"gray800",
			"gray700",
			"gray300",
			"gray200",
			"gray100",
			"white"
		],
		"widths": {
			"min": 1,
			"max": 12,
			"fullMax": 14,
			"step": 1
		},
		"wrapperTag": [
			{
				"value": "div",
				"label": "<div>"
			},
			{
				"value": "section",
				"label": "<section>"
			},
			{
				"value": "aside",
				"label": "<aside>"
			},
			{
				"value": "article",
				"label": "<article>"
			}
		],
		"breakpoints": [
			"large",
			"desktop",
			"tablet",
			"mobile"
		],
		"wrapperSectionSpacing": {
			"min": -300,
			"max": 300,
			"step": 1
		},
		"wrapperSectionInnerSpacing": {
			"min": 0,
			"max": 300,
			"step": 1
		},
		"wrapperRoundedCorners": {
			"min": 0,
			"max": 100,
			"step": 1
		}
	},
	"responsiveAttributes": {
		"wrapperWidth": {
			"large": "wrapperWidthLarge",
			"desktop": "wrapperWidthDesktop",
			"tablet": "wrapperWidthTablet",
			"mobile": "wrapperWidthMobile"
		},
		"wrapperOffset": {
			"large": "wrapperOffsetLarge",
			"desktop": "wrapperOffsetDesktop",
			"tablet": "wrapperOffsetTablet",
			"mobile": "wrapperOffsetMobile"
		},
		"wrapperSpacingTop": {
			"large": "wrapperSpacingTopLarge",
			"desktop": "wrapperSpacingTopDesktop",
			"tablet": "wrapperSpacingTopTablet",
			"mobile": "wrapperSpacingTopMobile"
		},
		"wrapperSpacingBottom": {
			"large": "wrapperSpacingBottomLarge",
			"desktop": "wrapperSpacingBottomDesktop",
			"tablet": "wrapperSpacingBottomTablet",
			"mobile": "wrapperSpacingBottomMobile"
		},
		"wrapperSpacingLeft": {
			"large": "wrapperSpacingLeftLarge",
			"desktop": "wrapperSpacingLeftDesktop",
			"tablet": "wrapperSpacingLeftTablet",
			"mobile": "wrapperSpacingLeftMobile"
		},
		"wrapperSpacingRight": {
			"large": "wrapperSpacingRightLarge",
			"desktop": "wrapperSpacingRightDesktop",
			"tablet": "wrapperSpacingRightTablet",
			"mobile": "wrapperSpacingRightMobile"
		},
		"wrapperSpacingLeftIn": {
			"large": "wrapperSpacingLeftInLarge",
			"desktop": "wrapperSpacingLeftInDesktop",
			"tablet": "wrapperSpacingLeftInTablet",
			"mobile": "wrapperSpacingLeftInMobile"
		},
		"wrapperSpacingRightIn": {
			"large": "wrapperSpacingRightInLarge",
			"desktop": "wrapperSpacingRightInDesktop",
			"tablet": "wrapperSpacingRightInTablet",
			"mobile": "wrapperSpacingRightInMobile"
		},
		"wrapperSpacingTopIn": {
			"large": "wrapperSpacingTopInLarge",
			"desktop": "wrapperSpacingTopInDesktop",
			"tablet": "wrapperSpacingTopInTablet",
			"mobile": "wrapperSpacingTopInMobile"
		},
		"wrapperSpacingBottomIn": {
			"large": "wrapperSpacingBottomInLarge",
			"desktop": "wrapperSpacingBottomInDesktop",
			"tablet": "wrapperSpacingBottomInTablet",
			"mobile": "wrapperSpacingBottomInMobile"
		},
		"wrapperDividerTop": {
			"large": "wrapperDividerTopLarge",
			"desktop": "wrapperDividerTopDesktop",
			"tablet": "wrapperDividerTopTablet",
			"mobile": "wrapperDividerTopMobile"
		},
		"wrapperDividerBottom": {
			"large": "wrapperDividerBottomLarge",
			"desktop": "wrapperDividerBottomDesktop",
			"tablet": "wrapperDividerBottomTablet",
			"mobile": "wrapperDividerBottomMobile"
		},
		"wrapperDividerLeft": {
			"large": "wrapperDividerLeftLarge",
			"desktop": "wrapperDividerLeftDesktop",
			"tablet": "wrapperDividerLeftTablet",
			"mobile": "wrapperDividerLeftMobile"
		},
		"wrapperDividerRight": {
			"large": "wrapperDividerRightLarge",
			"desktop": "wrapperDividerRightDesktop",
			"tablet": "wrapperDividerRightTablet",
			"mobile": "wrapperDividerRightMobile"
		},
		"wrapperHide": {
			"large": "wrapperHideLarge",
			"desktop": "wrapperHideDesktop",
			"tablet": "wrapperHideTablet",
			"mobile": "wrapperHideMobile"
		},
		"wrapperIsFullWidth": {
			"large": "wrapperIsFullWidthLarge",
			"desktop": "wrapperIsFullWidthDesktop",
			"tablet": "wrapperIsFullWidthTablet",
			"mobile": "wrapperIsFullWidthMobile"
		},
		"wrapperRoundedCorners": {
			"large": "wrapperRoundedCornersLarge",
			"desktop": "wrapperRoundedCornersDesktop",
			"tablet": "wrapperRoundedCornersTablet",
			"mobile": "wrapperRoundedCornersMobile"
		},
		"wrapperHideOverflowH": {
			"large": "wrapperHideOverflowHLarge",
			"desktop": "wrapperHideOverflowHDesktop",
			"tablet": "wrapperHideOverflowHTablet",
			"mobile": "wrapperHideOverflowHMobile"
		},
		"wrapperHideOverflowV": {
			"large": "wrapperHideOverflowVLarge",
			"desktop": "wrapperHideOverflowVDesktop",
			"tablet": "wrapperHideOverflowVTablet",
			"mobile": "wrapperHideOverflowVMobile"
		}
	},
	"variables": {
		"wrapperBgColorProject": [
			{
				"variable": {
					"wrapper-bg-color-project": "var(--global-colors-%value%)"
				}
			}
		],
		"wrapperBgColorGradient": [
			{
				"variable": {
					"wrapper-bg-color-gradient": "%value%"
				}
			}
		],
		"wrapperDividerColor": [
			{
				"variable": {
					"wrapper-divider-color": "var(--global-colors-%value%)"
				}
			}
		],

		"wrapperWidth": [
			{
				"inverse": true,
				"variable": {
					"wrapper-width": "%value%"
				}
			}
		],

		"wrapperOffset": [
			{
				"inverse": true,
				"variable": {
					"wrapper-offset": "%value%"
				}
			}
		],

		"wrapperSpacingTop": [
			{
				"inverse": true,
				"variable": {
					"wrapper-spacing-top": "%value%"
				}
			}
		],

		"wrapperSpacingBottom": [
			{
				"inverse": true,
				"variable": {
					"wrapper-spacing-bottom": "%value%"
				}
			}
		],

		"wrapperSpacingLeft": [
			{
				"inverse": true,
				"variable": {
					"wrapper-spacing-left": "%value%"
				}
			}
		],

		"wrapperSpacingRight": [
			{
				"inverse": true,
				"variable": {
					"wrapper-spacing-right": "%value%"
				}
			}
		],

		"wrapperSpacingLeftIn": [
			{
				"inverse": true,
				"variable": {
					"wrapper-spacing-left-in": "%value%"
				}
			}
		],

		"wrapperSpacingRightIn": [
			{
				"inverse": true,
				"variable": {
					"wrapper-spacing-right-in": "%value%"
				}
			}
		],

		"wrapperSpacingTopIn": [
			{
				"inverse": true,
				"variable": {
					"wrapper-spacing-top-in": "%value%"
				}
			}
		],

		"wrapperSpacingBottomIn": [
			{
				"inverse": true,
				"variable": {
					"wrapper-spacing-bottom-in": "%value%"
				}
			}
		],

		"wrapperDividerTop": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-divider-top": "1px solid var(--wrapper-divider-color)"
					}
				}
			],
			"false": [
				{
					"inverse": true,
					"variable": {
						"wrapper-divider-top": "none"
					}
				}
			]
		},
		"wrapperDividerBottom": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-divider-bottom": "1px solid var(--wrapper-divider-color)"
					}
				}
			],
			"false": [
				{
					"inverse": true,
					"variable": {
						"wrapper-divider-bottom": "none"
					}
				}
			]
		},
		"wrapperDividerLeft": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-divider-left": "1px solid var(--wrapper-divider-color)"
					}
				}
			],
			"false": [
				{
					"inverse": true,
					"variable": {
						"wrapper-divider-left": "none"
					}
				}
			]
		},
		"wrapperDividerRight": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-divider-right": "1px solid var(--wrapper-divider-color)"
					}
				}
			],
			"false": [
				{
					"inverse": true,
					"variable": {
						"wrapper-divider-right": "none"
					}
				}
			]
		},

		"wrapperHide": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-display": "none"
					}
				}
			],
			"false": [
				{
					"inverse": true,
					"variable": {
						"wrapper-display": "var(--wrapper-display-type, grid)"
					}
				}
			]
		},
		"wrapperIsFullWidth": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-is-full-width": "1",
						"wrapper-start-offset": "0",
						"wrapper-end-offset": "0"
					}
				}
			],
			"false": [
				{
					"inverse": true,
					"variable": {
						"wrapper-is-full-width": "0",
						"wrapper-start-offset": "1",
						"wrapper-end-offset": "0"
					}
				}
			]
		},
		"wrapperSimple": {
			"true": [
				{
					"variable": {
						"wrapper-display-type": "block"
					}
				}
			],
			"false": [
				{
					"variable": {
						"wrapper-display-type": "grid"
					}
				}
			]
		},

		"wrapperRoundedCorners": [
			{
				"inverse": true,
				"variable": {
					"wrapper-rounded-corners": "%value%"
				}
			}
		],

		"wrapperHideOverflowH": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-overflow-x": "hidden"
					}
				}
			]
		},
		"wrapperHideOverflowV": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-overflow-y": "hidden"
					}
				}
			]
		}
	},
	"variablesEditor": {
		"wrapperHide": {
			"true": [
				{
					"inverse": true,
					"variable": {
						"wrapper-display-opacity": "0.5",
						"wrapper-display": "var(--wrapper-display-type, grid)"
					}
				}
			],
			"false": [
				{
					"inverse": true,
					"variable": {
						"wrapper-display-opacity": "1"
					}
				}
			]
		}
	},
	"configPresets": [
		{
			"name": "Full-width",
			"icon" : "width",
			"attributes": {
				"wrapperUse": true,
				"wrapperSimple": false,
				"wrapperWidthLarge": 14,
				"wrapperOffsetLarge": 1,
				"wrapperIsFullWidthLarge": true
			}
		},
		{
			"name": "Padded & rounded",
			"icon" : "wrapperSimple",
			"attributes": {
				"wrapperUse": true,
				"wrapperSimple": false,
				"wrapperBgColorProject": "gray100",
				"wrapperSpacingTopInLarge": 20,
				"wrapperSpacingBottomInLarge": 20,
				"wrapperSpacingLeftInLarge": 20,
				"wrapperSpacingRightInLarge": 20,
				"wrapperRoundedCornersLarge": 10
			}
		}
	]
}