{"version":3,"file":"styles.css","mappings":"AAgKA,gBAEA,yCADA,sBAEA,CAEA,gBAEA,mDAGA,0DADA,eADA,sDAGA,iBALA,kBAMA,CAGA,gCACA,eAEA,oBADA,iBAEA,wBACA,CAIA,gCACA,eACA,gBACA,CAIA,gCACA,eACA,gBACA,CAGA,gBACA,gDAGA,uDADA,eADA,mDAIA,sBADA,iBAEA,mBACA,CAEA,gBAEA,2BACA,eACA,iBAHA,iBAIA,kBACA,CAEA,gBACA,aAEA,eADA,6BAEA","sources":["webpack://@square/maker/./src/components/Container/src/Container.vue"],"sourcesContent":["<template>\n\t<section\n\t\t:class=\"[\n\t\t\t$s.Container,\n\t\t\t$s[`size_${size}`],\n\t\t]\"\n\t\tv-bind=\"$attrs\"\n\t\t:style=\"style\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<header\n\t\t\tv-if=\"hasHeaderContent\"\n\t\t\t:class=\"$s.Header\"\n\t\t>\n\t\t\t<div\n\t\t\t\tv-if=\"hasLabel\"\n\t\t\t\t:class=\"$s.Label\"\n\t\t\t>\n\t\t\t\t<!-- @slot container label -->\n\t\t\t\t<slot name=\"label\">\n\t\t\t\t\t{{ label }}\n\t\t\t\t</slot>\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"hasSublabel\"\n\t\t\t\t\t:class=\"$s.Sublabel\"\n\t\t\t\t>\n\t\t\t\t\t<!-- @slot container sublabel -->\n\t\t\t\t\t<slot name=\"sublabel\">\n\t\t\t\t\t\t{{ sublabel }}\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tv-if=\"hasRequirementLabel\"\n\t\t\t\t:class=\"$s.RequirementLabel\"\n\t\t\t>\n\t\t\t\t<!-- @slot container requirement label -->\n\t\t\t\t<slot name=\"requirement-label\">\n\t\t\t\t\t{{ requirementLabel }}\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</header>\n\n\t\t<!-- @slot container content -->\n\t\t<slot />\n\t</section>\n</template>\n\n<script>\nimport { colord } from 'colord';\nimport assert from '@square/maker/utils/assert';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport cssValidator from '@square/maker/utils/css-validator';\n\n/**\n * @inheritAttrs section\n * @inheritListeners section\n */\nexport default {\n\tinject: {\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Container label\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Container sublabel\n\t\t */\n\t\tsublabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Container requirement label\n\t\t */\n\t\trequirementLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Container size\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'medium',\n\t\t\tvalidator: (size) => ['small', 'medium', 'large'].includes(size),\n\t\t},\n\t\t/**\n\t\t * Background color of container\n\t\t */\n\t\tbgColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid() || color === 'transparent',\n\t\t},\n\t\t/**\n\t\t * Text color of container\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Padding of the container\n\t\t */\n\t\tpadding: {\n\t\t\ttype: String,\n\t\t\tdefault: '16px 24px',\n\t\t\tvalidator: cssValidator('padding'),\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('container', [\n\t\t\t'bgColor',\n\t\t\t'color',\n\t\t]),\n\t\tstyle() {\n\t\t\treturn {\n\t\t\t\t'--bg-color': this.resolvedBgColor,\n\t\t\t\t'--color': this.resolvedColor,\n\t\t\t\t'--padding': this.padding,\n\t\t\t};\n\t\t},\n\t\thasLabel() {\n\t\t\treturn this.$slots.label || this.label;\n\t\t},\n\t\thasSublabel() {\n\t\t\treturn this.$slots.sublabel || this.sublabel;\n\t\t},\n\t\thasRequirementLabel() {\n\t\t\treturn this.$slots.requirementLabel || this.$slots['requirement-label'] || this.requirementLabel;\n\t\t},\n\t\thasHeaderContent() {\n\t\t\treturn this.hasLabel || this.hasSublabel || this.hasRequirementLabel;\n\t\t},\n\t},\n\n\tmounted() {\n\t\tassert.warn(!(this.$slots.label && this.label), 'Label slot cannot be used together with label prop, former overrides the latter.', 'Container');\n\t\tassert.warn(!(this.$slots.sublabel && this.sublabel), 'Sublabel slot cannot be used together with sublabel prop, former overrides the latter.', 'Container');\n\t\tassert.warn(!((this.$slots.requirementLabel || this.$slots['requirement-label']) && this.requirementLabel), 'Requirement Label slot cannot be used together with requirement label prop, former overrides the latter.', 'Container');\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Container {\n\tpadding: var(--padding);\n\tbackground-color: var(--bg-color, inherit);\n}\n\n.Label {\n\tmargin-bottom: 16px;\n\tcolor: var(--color, $maker-color-heading);\n\tfont-weight: $maker-font-heading-font-weight;\n\tfont-size: 14px;\n\tfont-family: $maker-font-heading-font-family;\n\tline-height: 20px;\n}\n\n.size_small {\n\t& .Label {\n\t\tfont-size: 12px;\n\t\tline-height: 20px;\n\t\tletter-spacing: 0.5px;\n\t\ttext-transform: uppercase;\n\t}\n}\n\n.size_medium {\n\t& .Label {\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t}\n}\n\n.size_large {\n\t& .Label {\n\t\tfont-size: 24px;\n\t\tline-height: 32px;\n\t}\n}\n\n.Sublabel {\n\tcolor: var(--color, $maker-color-body);\n\tfont-weight: $maker-font-body-font-weight;\n\tfont-size: 14px;\n\tfont-family: $maker-font-body-font-family;\n\tline-height: 24px;\n\tletter-spacing: normal;\n\ttext-transform: none;\n}\n\n.RequirementLabel {\n\tpadding-left: 8px;\n\tcolor: var(--color, inherit);\n\tfont-size: 14px;\n\tline-height: 24px;\n\twhite-space: nowrap;\n}\n\n.Header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tfont-size: 14px;\n}\n</style>\n"],"names":[],"sourceRoot":""}