{"version":3,"sources":["webpack://../components/Notice/src/Notice.vue","webpack://../components/Notice/src/NoticeButton.vue"],"names":[],"mappings":"AAkGA,mBACA,kBAAA,CACA,cAAA,CACA,mBAAA,CACA,gBAAA,CACA,iBACA,CAEA,mBACA,YACA,CAEA,mBACA,YAAA,CACA,wBACA,CAEA,qBACA,iBACA,CAEA,+BACA,cACA,CAEA,mBACA,eAAA,CACA,oBAAA,CACA,kBACA,CAEA,mBACA,eAAA,CACA,oBAAA,CACA,kBACA,CAEA,mBACA,eAAA,CACA,oBAAA,CACA,kBACA,CAEA,mBACA,eAAA,CACA,oBAAA,CACA,kBACA,CAEA,mBACA,YAAA,CACA,gCACA,CAEA,mBACA,YAAA,CACA,kBAAA,CACA,WAAA,CACA,gBACA,CAEA,mBACA,UAAA,CACA,WAAA,CACA,sBAAA,CACA,WACA,CCpJA,mBACA,SAAA,CACA,aAAA,CACA,eAAA,CACA,iBAAA,CACA,mBAAA,CACA,eAAA,CACA,WAAA,CACA,cACA","file":"styles.css","sourcesContent":["<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.Notice,\n\t\t\t$s[`type_${type}`],\n\t\t\t$s[`variant_${variant}`],\n\t\t]\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<div :class=\"$s.IconContentWrapper\">\n\t\t\t<div :class=\"$s.IconAligner\">\n\t\t\t\t<component\n\t\t\t\t\t:is=\"iconComponent\"\n\t\t\t\t\t:class=\"$s.Icon\"\n\t\t\t\t\tinline\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t<!-- @slot notice content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t\t<div\n\t\t\tv-if=\"showActions\"\n\t\t\t:class=\"$s.ActionsWrapper\"\n\t\t>\n\t\t\t<!-- @slot put notice buttons here -->\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport AlertTriangle from '@square/maker-icons/AlertTriangle';\nimport AlertCircle from '@square/maker-icons/AlertCircle';\nimport CheckCircle from '@square/maker-icons/CheckCircle';\nimport Info from '@square/maker-icons/Info';\nimport assert from '@square/maker/utils/assert';\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tcomponents: {\n\t\tAlertTriangle,\n\t\tAlertCircle,\n\t\tCheckCircle,\n\t\tInfo,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * type of notice\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'info',\n\t\t\tvalidator: (type) => ['error', 'success', 'warning', 'info'].includes(type),\n\t\t},\n\t\t/**\n\t\t * notice variant\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'inline',\n\t\t\tvalidator: (variant) => ['inline', 'block'].includes(variant),\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ticonComponent() {\n\t\t\tif (this.type === 'error') {\n\t\t\t\treturn AlertCircle;\n\t\t\t}\n\t\t\tif (this.type === 'success') {\n\t\t\t\treturn CheckCircle;\n\t\t\t}\n\t\t\tif (this.type === 'warning') {\n\t\t\t\treturn AlertTriangle;\n\t\t\t}\n\t\t\treturn Info;\n\t\t},\n\t\tshowActions() {\n\t\t\treturn this.$slots.actions && this.variant === 'block';\n\t\t},\n\t},\n\n\tcreated() {\n\t\tassert.warn(this.variant === 'inline' && !this.$slots.actions, 'inline Notices can not have an actions slot');\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Notice {\n\tcolor: var(--color);\n\tfont-size: 14px;\n\tfont-family: inherit;\n\tline-height: 24px;\n\tborder-radius: 8px;\n}\n\n.IconContentWrapper {\n\tdisplay: flex;\n}\n\n.ActionsWrapper {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.ActionsWrapper > * {\n\tmargin-right: 24px;\n}\n\n.ActionsWrapper > *:last-child {\n\tmargin-right: 0;\n}\n\n.type_error {\n\t--color: rgba(161, 39, 18, 1);\n\t--color-icon: rgba(206, 51, 22, 1);\n\t--color-bg: rgba(252, 235, 232, 1);\n}\n\n.type_warning {\n\t--color: rgba(77, 59, 0, 1);\n\t--color-icon: rgba(242, 189, 13, 1);\n\t--color-bg: rgba(252, 242, 207, 1);\n}\n\n.type_success {\n\t--color: rgba(8, 69, 8, 1);\n\t--color-icon: rgba(33, 172, 30, 1);\n\t--color-bg: rgba(233, 251, 233, 1);\n}\n\n.type_info {\n\t--color: rgba(24, 24, 24, 1);\n\t--color-icon: rgba(169, 169, 169, 1);\n\t--color-bg: rgba(241, 241, 241, 1);\n}\n\n.variant_block {\n\tpadding: 16px;\n\tbackground-color: var(--color-bg);\n}\n\n.IconAligner {\n\tdisplay: flex;\n\talign-items: center;\n\theight: 24px;\n\tmargin-right: 8px;\n}\n\n.Icon {\n\twidth: 16px;\n\theight: 16px;\n\tfill: var(--color-icon);\n\tstroke: white;\n}\n</style>\n","<template>\n\t<button :class=\"$s.Button\">\n\t\t<!-- @slot button content -->\n\t\t<slot />\n\t</button>\n</template>\n\n<script>\n/**\n * @inheritAttrs button\n * @inheritListeners button\n */\nexport default {};\n</script>\n\n<style module=\"$s\">\n.Button {\n\tpadding: 0;\n\tcolor: inherit;\n\tfont-weight: 600;\n\tfont-size: inherit;\n\tline-height: inherit;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n}\n</style>\n"]}