npm - @veeqo/ui - Versions diffs - 14.11.0 → 14.11.1-beta-3 - Mend

@veeqo/ui 14.11.0 → 14.11.1-beta-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (279) hide show

package/dist/components/DescriptionList/DescriptionList.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+insertStyle("._heading-xxl_9lg0c_1 {\n  font-family: var(--text-heading-xxl-font-family);\n  font-style: var(--text-heading-xxl-font-style);\n  font-weight: var(--text-heading-xxl-font-weight);\n  font-size: var(--text-heading-xxl-font-size);\n  line-height: var(--text-heading-xxl-line-height);\n  color: var(--text-heading-xxl-color);\n  text-decoration: var(--text-heading-xxl-text-decoration);\n  letter-spacing: var(--text-heading-xxl-letter-spacing);\n}\n\n._heading-xl_9lg0c_12 {\n  font-family: var(--text-heading-xl-font-family);\n  font-style: var(--text-heading-xl-font-style);\n  font-weight: var(--text-heading-xl-font-weight);\n  font-size: var(--text-heading-xl-font-size);\n  line-height: var(--text-heading-xl-line-height);\n  color: var(--text-heading-xl-color);\n  text-decoration: var(--text-heading-xl-text-decoration);\n  letter-spacing: var(--text-heading-xl-letter-spacing);\n}\n\n._heading-large_9lg0c_23 {\n  font-family: var(--text-heading-large-font-family);\n  font-style: var(--text-heading-large-font-style);\n  font-weight: var(--text-heading-large-font-weight);\n  font-size: var(--text-heading-large-font-size);\n  line-height: var(--text-heading-large-line-height);\n  color: var(--text-heading-large-color);\n  text-decoration: var(--text-heading-large-text-decoration);\n  letter-spacing: var(--text-heading-large-letter-spacing);\n}\n\n._heading-medium_9lg0c_34 {\n  font-family: var(--text-heading-medium-font-family);\n  font-style: var(--text-heading-medium-font-style);\n  font-weight: var(--text-heading-medium-font-weight);\n  font-size: var(--text-heading-medium-font-size);\n  line-height: var(--text-heading-medium-line-height);\n  color: var(--text-heading-medium-color);\n  text-decoration: var(--text-heading-medium-text-decoration);\n  letter-spacing: var(--text-heading-medium-letter-spacing);\n}\n\n._heading-small_9lg0c_45 {\n  font-family: var(--text-heading-small-font-family);\n  font-style: var(--text-heading-small-font-style);\n  font-weight: var(--text-heading-small-font-weight);\n  font-size: var(--text-heading-small-font-size);\n  line-height: var(--text-heading-small-line-height);\n  color: var(--text-heading-small-color);\n  text-decoration: var(--text-heading-small-text-decoration);\n  letter-spacing: var(--text-heading-small-letter-spacing);\n}\n\n._heading-table_9lg0c_56 {\n  font-family: var(--text-heading-table-font-family);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  font-size: var(--text-heading-table-font-size);\n  line-height: var(--text-heading-table-line-height);\n  color: var(--text-heading-table-color);\n  text-decoration: var(--text-heading-table-text-decoration);\n  letter-spacing: var(--text-heading-table-letter-spacing);\n}\n\n._subheading-large_9lg0c_67 {\n  font-family: var(--text-subheading-large-font-family);\n  font-style: var(--text-subheading-large-font-style);\n  font-weight: var(--text-subheading-large-font-weight);\n  font-size: var(--text-subheading-large-font-size);\n  line-height: var(--text-subheading-large-line-height);\n  color: var(--text-subheading-large-color);\n  text-decoration: var(--text-subheading-large-text-decoration);\n  letter-spacing: var(--text-subheading-large-letter-spacing);\n}\n\n._subheading-medium_9lg0c_78 {\n  font-family: var(--text-subheading-medium-font-family);\n  font-style: var(--text-subheading-medium-font-style);\n  font-weight: var(--text-subheading-medium-font-weight);\n  font-size: var(--text-subheading-medium-font-size);\n  line-height: var(--text-subheading-medium-line-height);\n  color: var(--text-subheading-medium-color);\n  text-decoration: var(--text-subheading-medium-text-decoration);\n  letter-spacing: var(--text-subheading-medium-letter-spacing);\n}\n\n._subheading-small_9lg0c_89 {\n  font-family: var(--text-subheading-small-font-family);\n  font-style: var(--text-subheading-small-font-style);\n  font-weight: var(--text-subheading-small-font-weight);\n  font-size: var(--text-subheading-small-font-size);\n  line-height: var(--text-subheading-small-line-height);\n  color: var(--text-subheading-small-color);\n  text-decoration: var(--text-subheading-small-text-decoration);\n  letter-spacing: var(--text-subheading-small-letter-spacing);\n}\n\n._subheading-small-bold_9lg0c_100 {\n  font-family: var(--text-subheading-small-bold-font-family);\n  font-style: var(--text-subheading-small-bold-font-style);\n  font-weight: var(--text-subheading-small-bold-font-weight);\n  font-size: var(--text-subheading-small-bold-font-size);\n  line-height: var(--text-subheading-small-bold-line-height);\n  color: var(--text-subheading-small-bold-color);\n  text-decoration: var(--text-subheading-small-bold-text-decoration);\n  letter-spacing: var(--text-subheading-small-bold-letter-spacing);\n}\n\n._body_9lg0c_111 {\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n}\n\n._body-small_9lg0c_122 {\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  font-size: var(--text-body-small-font-size);\n  line-height: var(--text-body-small-line-height);\n  color: var(--text-body-small-color);\n  text-decoration: var(--text-body-small-text-decoration);\n  letter-spacing: var(--text-body-small-letter-spacing);\n}\n\n._body-bold_9lg0c_133 {\n  font-family: var(--text-body-bold-font-family);\n  font-style: var(--text-body-bold-font-style);\n  font-weight: var(--text-body-bold-font-weight);\n  font-size: var(--text-body-bold-font-size);\n  line-height: var(--text-body-bold-line-height);\n  color: var(--text-body-bold-color);\n  text-decoration: var(--text-body-bold-text-decoration);\n  letter-spacing: var(--text-body-bold-letter-spacing);\n}\n\n._body-bold-dark_9lg0c_144 {\n  font-family: var(--text-body-bold-dark-font-family);\n  font-style: var(--text-body-bold-dark-font-style);\n  font-weight: var(--text-body-bold-dark-font-weight);\n  font-size: var(--text-body-bold-dark-font-size);\n  line-height: var(--text-body-bold-dark-line-height);\n  color: var(--text-body-bold-dark-color);\n  text-decoration: var(--text-body-bold-dark-text-decoration);\n  letter-spacing: var(--text-body-bold-dark-letter-spacing);\n}\n\n._body-small-bold_9lg0c_155 {\n  font-family: var(--text-body-small-bold-font-family);\n  font-style: var(--text-body-small-bold-font-style);\n  font-weight: var(--text-body-small-bold-font-weight);\n  font-size: var(--text-body-small-bold-font-size);\n  line-height: var(--text-body-small-bold-line-height);\n  color: var(--text-body-small-bold-color);\n  text-decoration: var(--text-body-small-bold-text-decoration);\n  letter-spacing: var(--text-body-small-bold-letter-spacing);\n}\n\n._button_9lg0c_166 {\n  font-family: var(--text-button-font-family);\n  font-style: var(--text-button-font-style);\n  font-weight: var(--text-button-font-weight);\n  font-size: var(--text-button-font-size);\n  line-height: var(--text-button-line-height);\n  color: var(--text-button-color);\n  text-decoration: var(--text-button-text-decoration);\n  letter-spacing: var(--text-button-letter-spacing);\n}\n\n._button-small_9lg0c_177 {\n  font-family: var(--text-button-small-font-family);\n  font-style: var(--text-button-small-font-style);\n  font-weight: var(--text-button-small-font-weight);\n  font-size: var(--text-button-small-font-size);\n  line-height: var(--text-button-small-line-height);\n  color: var(--text-button-small-color);\n  text-decoration: var(--text-button-small-text-decoration);\n  letter-spacing: var(--text-button-small-letter-spacing);\n}\n\n._link-large_9lg0c_188 {\n  font-family: var(--text-link-large-font-family);\n  font-style: var(--text-link-large-font-style);\n  font-weight: var(--text-link-large-font-weight);\n  font-size: var(--text-link-large-font-size);\n  line-height: var(--text-link-large-line-height);\n  color: var(--text-link-large-color);\n  text-decoration: var(--text-link-large-text-decoration);\n  letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._link-medium_9lg0c_199 {\n  font-family: var(--text-link-medium-font-family);\n  font-style: var(--text-link-medium-font-style);\n  font-weight: var(--text-link-medium-font-weight);\n  font-size: var(--text-link-medium-font-size);\n  line-height: var(--text-link-medium-line-height);\n  color: var(--text-link-medium-color);\n  text-decoration: var(--text-link-medium-text-decoration);\n  letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._link_9lg0c_188 {\n  font-family: var(--text-link-font-family);\n  font-style: var(--text-link-font-style);\n  font-weight: var(--text-link-font-weight);\n  font-size: var(--text-link-font-size);\n  line-height: var(--text-link-line-height);\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n  letter-spacing: var(--text-link-letter-spacing);\n}\n\n._link-small_9lg0c_221 {\n  font-family: var(--text-link-small-font-family);\n  font-style: var(--text-link-small-font-style);\n  font-weight: var(--text-link-small-font-weight);\n  font-size: var(--text-link-small-font-size);\n  line-height: var(--text-link-small-line-height);\n  color: var(--text-link-small-color);\n  text-decoration: var(--text-link-small-text-decoration);\n  letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._input-label_9lg0c_232 {\n  font-family: var(--text-input-label-font-family);\n  font-style: var(--text-input-label-font-style);\n  font-weight: var(--text-input-label-font-weight);\n  font-size: var(--text-input-label-font-size);\n  line-height: var(--text-input-label-line-height);\n  color: var(--text-input-label-color);\n  text-decoration: var(--text-input-label-text-decoration);\n  letter-spacing: var(--text-input-label-letter-spacing);\n}\n\n._input-label-small_9lg0c_243 {\n  font-family: var(--text-input-label-small-font-family);\n  font-style: var(--text-input-label-small-font-style);\n  font-weight: var(--text-input-label-small-font-weight);\n  font-size: var(--text-input-label-small-font-size);\n  line-height: var(--text-input-label-small-line-height);\n  color: var(--text-input-label-small-color);\n  text-decoration: var(--text-input-label-small-text-decoration);\n  letter-spacing: var(--text-input-label-small-letter-spacing);\n}\n\n._hint-text_9lg0c_254 {\n  font-family: var(--text-hint-text-font-family);\n  font-style: var(--text-hint-text-font-style);\n  font-weight: var(--text-hint-text-font-weight);\n  font-size: var(--text-hint-text-font-size);\n  line-height: var(--text-hint-text-line-height);\n  color: var(--text-hint-text-color);\n  text-decoration: var(--text-hint-text-text-decoration);\n  letter-spacing: var(--text-hint-text-letter-spacing);\n}\n\n._placeholder_9lg0c_265 {\n  font-family: var(--text-placeholder-font-family);\n  font-style: var(--text-placeholder-font-style);\n  font-weight: var(--text-placeholder-font-weight);\n  font-size: var(--text-placeholder-font-size);\n  line-height: var(--text-placeholder-line-height);\n  color: var(--text-placeholder-color);\n  text-decoration: var(--text-placeholder-text-decoration);\n  letter-spacing: var(--text-placeholder-letter-spacing);\n}\n\n._placeholder-small_9lg0c_276 {\n  font-family: var(--text-placeholder-small-font-family);\n  font-style: var(--text-placeholder-small-font-style);\n  font-weight: var(--text-placeholder-small-font-weight);\n  font-size: var(--text-placeholder-small-font-size);\n  line-height: var(--text-placeholder-small-line-height);\n  color: var(--text-placeholder-small-color);\n  text-decoration: var(--text-placeholder-small-text-decoration);\n  letter-spacing: var(--text-placeholder-small-letter-spacing);\n}\n\n._placeholder-code_9lg0c_287 {\n  font-family: var(--text-placeholder-code-font-family);\n  font-style: var(--text-placeholder-code-font-style);\n  font-weight: var(--text-placeholder-code-font-weight);\n  font-size: var(--text-placeholder-code-font-size);\n  line-height: var(--text-placeholder-code-line-height);\n  color: var(--text-placeholder-code-color);\n  text-decoration: var(--text-placeholder-code-text-decoration);\n  letter-spacing: var(--text-placeholder-code-letter-spacing);\n}\n\n._placeholder-code-small_9lg0c_298 {\n  font-family: var(--text-placeholder-code-small-font-family);\n  font-style: var(--text-placeholder-code-small-font-style);\n  font-weight: var(--text-placeholder-code-small-font-weight);\n  font-size: var(--text-placeholder-code-small-font-size);\n  line-height: var(--text-placeholder-code-small-line-height);\n  color: var(--text-placeholder-code-small-color);\n  text-decoration: var(--text-placeholder-code-small-text-decoration);\n  letter-spacing: var(--text-placeholder-code-small-letter-spacing);\n}\n\n._error_9lg0c_309 {\n  font-family: var(--text-error-font-family);\n  font-style: var(--text-error-font-style);\n  font-weight: var(--text-error-font-weight);\n  font-size: var(--text-error-font-size);\n  line-height: var(--text-error-line-height);\n  color: var(--text-error-color);\n  text-decoration: var(--text-error-text-decoration);\n  letter-spacing: var(--text-error-letter-spacing);\n}\n\n._error-small_9lg0c_320 {\n  font-family: var(--text-error-small-font-family);\n  font-style: var(--text-error-small-font-style);\n  font-weight: var(--text-error-small-font-weight);\n  font-size: var(--text-error-small-font-size);\n  line-height: var(--text-error-small-line-height);\n  color: var(--text-error-small-color);\n  text-decoration: var(--text-error-small-text-decoration);\n  letter-spacing: var(--text-error-small-letter-spacing);\n}\n\n._success-small_9lg0c_331 {\n  font-family: var(--text-success-small-font-family);\n  font-style: var(--text-success-small-font-style);\n  font-weight: var(--text-success-small-font-weight);\n  font-size: var(--text-success-small-font-size);\n  line-height: var(--text-success-small-line-height);\n  color: var(--text-success-small-color);\n  text-decoration: var(--text-success-small-text-decoration);\n  letter-spacing: var(--text-success-small-letter-spacing);\n}\n\n._list_9lg0c_342 {\n  margin: unset;\n}\n._list_9lg0c_342 > * + * {\n  margin-top: var(--sizes-base);\n}\n\n._item_9lg0c_349 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._itemRow_9lg0c_353 {\n  display: flex;\n  justify-content: space-between;\n}\n._itemRow_9lg0c_353 > * + * {\n  margin-left: var(--sizes-base);\n}\n\n._descriptionContainer_9lg0c_361 {\n  text-align: right;\n}\n._descriptionContainer_9lg0c_361 > * + * {\n  margin-top: var(--sizes-xs);\n}\n\n._term_9lg0c_368 {\n  font-family: var(--text-body-bold-font-family);\n  font-style: var(--text-body-bold-font-style);\n  font-weight: var(--text-body-bold-font-weight);\n  font-size: var(--text-body-bold-font-size);\n  line-height: var(--text-body-bold-line-height);\n  color: var(--text-body-bold-color);\n  text-decoration: var(--text-body-bold-text-decoration);\n  letter-spacing: var(--text-body-bold-letter-spacing);\n}\n\n._description_9lg0c_361 {\n  margin-left: unset;\n  font-family: var(--text-body-font-family);\n  font-style: var(--text-body-font-style);\n  font-weight: var(--text-body-font-weight);\n  font-size: var(--text-body-font-size);\n  line-height: var(--text-body-line-height);\n  color: var(--text-body-color);\n  text-decoration: var(--text-body-text-decoration);\n  letter-spacing: var(--text-body-letter-spacing);\n}");
+var styles = {"list":"_list_9lg0c_342","item":"_item_9lg0c_349","itemRow":"_itemRow_9lg0c_353","descriptionContainer":"_descriptionContainer_9lg0c_361","term":"_term_9lg0c_368","description":"_description_9lg0c_361"};
+export { styles as default };
+//# sourceMappingURL=DescriptionList.module.scss.js.map

package/dist/components/DescriptionList/DescriptionList.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DescriptionList.module.scss.js","sources":["../../../src/components/DescriptionList/DescriptionList.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.list {\n margin: unset;\n\n & > * + * {\n margin-top: var(--sizes-base);\n }\n}\n\n.item {\n & > * + * {\n margin-top: var(--sizes-xs);\n }\n}\n\n.itemRow {\n display: flex;\n justify-content: space-between;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.descriptionContainer {\n text-align: right;\n\n & > * + * {\n margin-top: var(--sizes-xs);\n }\n}\n\n.term {\n @include text.body-bold;\n}\n\n.description {\n margin-left: unset;\n\n @include text.body;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,yzeAAA;AACA,aAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,sBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,wBAAA;;;;"}

package/dist/components/DetailPage/DetailPage.cjs CHANGED Viewed

@@ -1,7 +1,8 @@
 'use strict';
 var React = require('react');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+var DetailPage_module = require('./DetailPage.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -12,8 +13,11 @@ const DetailPage = ({ renderHeader, children }) => {
     const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);
     return (React__default.default.createElement("main", null,
         renderHeader(toggleSidebar, shouldShowSidebar),
-        React__default.default.createElement(styled.ContentContainer, null,
-            React__default.default.createElement(styled.ColumnGrid, { showSidebar: shouldShowSidebar }, children))));
+        React__default.default.createElement("div", { className: DetailPage_module.contentContainer },
+            React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+                    DetailPage_module.columnGrid,
+                    shouldShowSidebar ? DetailPage_module.sidebarVisible : DetailPage_module.sidebarHidden,
+                ]) }, children))));
 };
 exports.DetailPage = DetailPage;

package/dist/components/DetailPage/DetailPage.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DetailPage.cjs","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { ~~ColumnGrid,~~ ~~ContentContainer~~ } from './~~styled~~';\n\nexport interface PageHeaderProps {\n renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n return (\n <main>\n {renderHeader(toggleSidebar, shouldShowSidebar)}\n <~~ContentContainer~~>\n <~~ColumnGrid showSidebar~~={shouldShowSidebar}>{children}</~~ColumnGrid~~>\n </~~ContentContainer~~>\n </main>\n );\n};\n"],"names":["useState","React","~~ContentContainer~~","~~ColumnGrid~~"],"mappings":"~~;;;;;;;;;AASO~~,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,sBAAA,CAAA,aAAA,~~CAACC~~,~~uBAAgB~~,EAAA,~~IAAA~~;~~YACfD~~,sBAAA,CAAA,aAAA,~~CAACE~~,~~iBAAU~~,EAAA,~~EAAC~~,~~WAAW~~,~~EAAE~~,iBAAiB,~~EAAA~~,~~EAAG~~,QAAQ,~~CAAc~~,~~CAClD~~,~~CACd~~;AAEX;;;;"}
1	+ {"version":3,"file":"DetailPage.cjs","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './DetailPage.module.scss';\n\nexport interface PageHeaderProps {\n renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n return (\n <main>\n {renderHeader(toggleSidebar, shouldShowSidebar)}\n <div className={styles.contentContainer}>\n <div\n className={buildClassnames([\n styles.columnGrid,\n shouldShowSidebar ? styles.sidebarVisible : styles.sidebarHidden,\n ])}\n >\n {children}\n </div>\n </div>\n </main>\n );\n};\n"],"names":["useState","React","styles","buildClassnames"],"mappings":";;;;;;;;;;AAUO,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,iBAAM,CAAC,gBAAgB,EAAA;YACrCD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,oBAAAD,iBAAM,CAAC,UAAU;oBACjB,iBAAiB,GAAGA,iBAAM,CAAC,cAAc,GAAGA,iBAAM,CAAC,aAAa;AACjE,iBAAA,CAAC,IAED,QAAQ,CACL,CACF,CACD;AAEX;;;;"}

package/dist/components/DetailPage/DetailPage.js CHANGED Viewed

@@ -1,13 +1,17 @@
 import React__default, { useState } from 'react';
-import { ContentContainer, ColumnGrid } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import styles from './DetailPage.module.scss.js';
 const DetailPage = ({ renderHeader, children }) => {
     const [shouldShowSidebar, setShouldShowSidebar] = useState(true);
     const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);
     return (React__default.createElement("main", null,
         renderHeader(toggleSidebar, shouldShowSidebar),
-        React__default.createElement(ContentContainer, null,
-            React__default.createElement(ColumnGrid, { showSidebar: shouldShowSidebar }, children))));
+        React__default.createElement("div", { className: styles.contentContainer },
+            React__default.createElement("div", { className: buildClassnames([
+                    styles.columnGrid,
+                    shouldShowSidebar ? styles.sidebarVisible : styles.sidebarHidden,
+                ]) }, children))));
 };
 export { DetailPage };

package/dist/components/DetailPage/DetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DetailPage.js","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { ~~ColumnGrid,~~ ~~ContentContainer~~ } from './~~styled~~';\n\nexport interface PageHeaderProps {\n renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n return (\n <main>\n {renderHeader(toggleSidebar, shouldShowSidebar)}\n <~~ContentContainer~~>\n <~~ColumnGrid showSidebar~~={shouldShowSidebar}>{children}</~~ColumnGrid~~>\n </~~ContentContainer~~>\n </main>\n );\n};\n"],"names":["React"],"mappings":"~~;;;AASO~~,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA~~,IAAA~~;~~YACfA~~,cAAA,CAAA,aAAA,~~CAAC~~,~~UAAU~~,EAAA,~~EAAC~~,~~WAAW~~,EAAE,iBAAiB,~~EAAA~~,~~EAAG~~,QAAQ,~~CAAc~~,~~CAClD~~,~~CACd~~;AAEX;;;;"}
1	+ {"version":3,"file":"DetailPage.js","sources":["../../../src/components/DetailPage/DetailPage.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport styles from './DetailPage.module.scss';\n\nexport interface PageHeaderProps {\n renderHeader: (toggleSidebar: () => void, shouldShowSidebar?: boolean) => ReactNode;\n children: ReactNode;\n}\n\nexport const DetailPage = ({ renderHeader, children }: PageHeaderProps) => {\n const [shouldShowSidebar, setShouldShowSidebar] = useState(true);\n\n const toggleSidebar = () => setShouldShowSidebar(!shouldShowSidebar);\n\n return (\n <main>\n {renderHeader(toggleSidebar, shouldShowSidebar)}\n <div className={styles.contentContainer}>\n <div\n className={buildClassnames([\n styles.columnGrid,\n shouldShowSidebar ? styles.sidebarVisible : styles.sidebarHidden,\n ])}\n >\n {children}\n </div>\n </div>\n </main>\n );\n};\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAmB,KAAI;IACxE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAEhE,MAAM,aAAa,GAAG,MAAM,oBAAoB,CAAC,CAAC,iBAAiB,CAAC;AAEpE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA;AACG,QAAA,YAAY,CAAC,aAAa,EAAE,iBAAiB,CAAC;AAC/C,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA;YACrCA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,oBAAA,MAAM,CAAC,UAAU;oBACjB,iBAAiB,GAAG,MAAM,CAAC,cAAc,GAAG,MAAM,CAAC,aAAa;AACjE,iBAAA,CAAC,IAED,QAAQ,CACL,CACF,CACD;AAEX;;;;"}

package/dist/components/DetailPage/DetailPage.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+___$insertStyle("._columnGrid_147y3_1 {\n  width: 100%;\n  display: grid;\n  align-items: flex-start;\n  grid-gap: var(--sizes-md);\n  transition: all 0.2s ease-in-out;\n}\n\n._sidebarVisible_147y3_9 {\n  grid-template-columns: calc(100% - 312px - var(--sizes-md)) 312px;\n}\n._sidebarVisible_147y3_9 > *:nth-child(2) {\n  opacity: 1;\n  transition: opacity 0.2s;\n}\n\n._sidebarHidden_147y3_17 {\n  grid-template-columns: 100% 312px;\n}\n._sidebarHidden_147y3_17 > *:nth-child(2) {\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n._contentContainer_147y3_25 {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--sizes-md);\n  overflow-x: hidden;\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"columnGrid":"_columnGrid_147y3_1","sidebarVisible":"_sidebarVisible_147y3_9","sidebarHidden":"_sidebarHidden_147y3_17","contentContainer":"_contentContainer_147y3_25"};
+module.exports = styles;
+//# sourceMappingURL=DetailPage.module.scss.cjs.map

package/dist/components/DetailPage/DetailPage.module.scss.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DetailPage.module.scss.cjs","sources":["../../../src/components/DetailPage/DetailPage.module.scss"],"sourcesContent":[".columnGrid {\n width: 100%;\n display: grid;\n align-items: flex-start;\n grid-gap: var(--sizes-md);\n transition: all 0.2s ease-in-out;\n}\n\n.sidebarVisible {\n grid-template-columns: calc(100% - 312px - var(--sizes-md)) 312px;\n\n & > *:nth-child(2) {\n opacity: 1;\n transition: opacity 0.2s;\n }\n}\n\n.sidebarHidden {\n grid-template-columns: 100% 312px;\n\n & > *:nth-child(2) {\n opacity: 0;\n transition: opacity 0.2s;\n }\n}\n\n.contentContainer {\n width: 100%;\n box-sizing: border-box;\n padding: var(--sizes-md);\n overflow-x: hidden;\n background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+rBAAA;AACA,aAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DetailPage/DetailPage.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+insertStyle("._columnGrid_147y3_1 {\n  width: 100%;\n  display: grid;\n  align-items: flex-start;\n  grid-gap: var(--sizes-md);\n  transition: all 0.2s ease-in-out;\n}\n\n._sidebarVisible_147y3_9 {\n  grid-template-columns: calc(100% - 312px - var(--sizes-md)) 312px;\n}\n._sidebarVisible_147y3_9 > *:nth-child(2) {\n  opacity: 1;\n  transition: opacity 0.2s;\n}\n\n._sidebarHidden_147y3_17 {\n  grid-template-columns: 100% 312px;\n}\n._sidebarHidden_147y3_17 > *:nth-child(2) {\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n._contentContainer_147y3_25 {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--sizes-md);\n  overflow-x: hidden;\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"columnGrid":"_columnGrid_147y3_1","sidebarVisible":"_sidebarVisible_147y3_9","sidebarHidden":"_sidebarHidden_147y3_17","contentContainer":"_contentContainer_147y3_25"};
+export { styles as default };
+//# sourceMappingURL=DetailPage.module.scss.js.map

package/dist/components/DetailPage/DetailPage.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DetailPage.module.scss.js","sources":["../../../src/components/DetailPage/DetailPage.module.scss"],"sourcesContent":[".columnGrid {\n width: 100%;\n display: grid;\n align-items: flex-start;\n grid-gap: var(--sizes-md);\n transition: all 0.2s ease-in-out;\n}\n\n.sidebarVisible {\n grid-template-columns: calc(100% - 312px - var(--sizes-md)) 312px;\n\n & > *:nth-child(2) {\n opacity: 1;\n transition: opacity 0.2s;\n }\n}\n\n.sidebarHidden {\n grid-template-columns: 100% 312px;\n\n & > *:nth-child(2) {\n opacity: 0;\n transition: opacity 0.2s;\n }\n}\n\n.contentContainer {\n width: 100%;\n box-sizing: border-box;\n padding: var(--sizes-md);\n overflow-x: hidden;\n background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+rBAAA;AACA,aAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/FilterTag/FilterTag.cjs CHANGED Viewed

@@ -5,12 +5,15 @@ var useDropdown = require('../../hooks/useDropdown.cjs');
 require('../../hooks/useFocusVisible.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
 require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
-var styled = require('./styled.cjs');
 var useHandleFocus = require('../Popover/hooks/useHandleFocus.cjs');
 var Text = require('../Text/Text.cjs');
 var AnimatedDropdown = require('../AnimatedDropdown/AnimatedDropdown.cjs');
+var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
+var DownArrowIcon = require('../../icons/design-system/components/DownArrowIcon.cjs');
+var FilterTag_module = require('./FilterTag.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -52,17 +55,21 @@ const FilterTag = ({ className, e2eClassName, label, text, iconSlot, fill = colo
     }, [onClickAway, closeDropdown, shouldCloseOnClickAway]);
     const shouldShowSimple = !content;
     if (shouldShowSimple) {
-        return (React__default.default.createElement(styled.Container, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: onClick },
-            label && React__default.default.createElement(styled.GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+        return (React__default.default.createElement("button", { type: "button", className: buildClassnames.buildClassnames([
+                FilterTag_module.container,
+                classNames === null || classNames === void 0 ? void 0 : classNames.container,
+                e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            ]), onClick: onClick },
+            label && (React__default.default.createElement(Text.Text, { className: FilterTag_module.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
             React__default.default.createElement(Text.Text, null, text),
-            React__default.default.createElement(styled.CrossIcon, { className: buildClassnames.buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.colors.neutral.ink.base })));
+            React__default.default.createElement(CrossIcon.ReactComponent, { className: buildClassnames.buildClassnames([FilterTag_module.crossIcon, classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.colors.neutral.ink.base })));
     }
-    return (React__default.default.createElement(AnimatedDropdown.AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.default.createElement(styled.Container, { className: classNames.container, onClick: handleClick, ref: setAnchorElement },
-            label && React__default.default.createElement(styled.GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+    return (React__default.default.createElement(AnimatedDropdown.AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.default.createElement("button", { type: "button", className: buildClassnames.buildClassnames([FilterTag_module.container, classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: handleClick, ref: setAnchorElement },
+            label && (React__default.default.createElement(Text.Text, { className: FilterTag_module.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
             React__default.default.createElement(Text.Text, null, text),
-            React__default.default.createElement(styled.MainIcon, { color: colors.colors.neutral.ink.base, name: "downArrow", "$shouldShow": shouldShowDropdown })) },
-        React__default.default.createElement(styled.Content, { ref: setPopperElement, onKeyDown: handleKeyDown },
-            React__default.default.createElement(styled.Header, { color: fill }, header || (React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(DownArrowIcon.ReactComponent, { className: buildClassnames.buildClassnames([FilterTag_module.mainIcon, shouldShowDropdown && FilterTag_module.rotated]), color: colors.colors.neutral.ink.base, name: "downArrow" })) },
+        React__default.default.createElement("div", { className: FilterTag_module.content, ref: setPopperElement, onKeyDown: handleKeyDown },
+            React__default.default.createElement("div", { className: FilterTag_module.header, style: assignCssVars.assignCssVars({ headerColor: fill }) }, header || (React__default.default.createElement(React__default.default.Fragment, null,
                 iconSlot,
                 React__default.default.createElement(Text.Text, { variant: "bodyBold" }, label)))),
             content,

package/dist/components/FilterTag/FilterTag.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterTag.cjs","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport {~~\n Container,\n Text,\n Dropdown,\n GroupLabel,\n MainIcon,\n CrossIcon,\n Content,\n Header,\n~~} from '~~./styled~~';\nimport { ~~buildClassnames~~ } from '../../utils/~~buildClassnames~~';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\n\nexport interface ClassNamesReturnPayload {\n filterTagDropdown?: string;\n container?: string;\n cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n container: prefix ? `${prefix}-container` : undefined,\n cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n className,\n e2eClassName,\n label,\n text,\n iconSlot,\n fill = colors.secondary.blue.base,\n content,\n footer,\n header,\n onClickAway,\n onClick,\n shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n const [anchorElement, setAnchorElement] = useState<~~HTMLDivElement~~ \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLDivElement \| null>(null);\n\n const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n anchorElement,\n });\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose: closeDropdown,\n });\n\n const handleClick: MouseEventHandler<~~HTMLDivElement~~> = useCallback(\n (event) => {\n if (shouldShowDropdown) closeDropdown();\n else toggleShouldShowDropdown();\n\n if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n },\n [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n );\n\n const handleClickAway = useCallback(\n (event: any) => {\n // Escape hatch to apply custom behavior when clicked away\n if (onClickAway) onClickAway(event, closeDropdown);\n\n // Default clickAway behavior (closes the dropdown)\n if (shouldCloseOnClickAway) closeDropdown();\n },\n [onClickAway, closeDropdown, shouldCloseOnClickAway],\n );\n\n const shouldShowSimple = !content;\n\n if (shouldShowSimple) {\n return (\n <~~Container~~\n className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n onClick={onClick}\n >\n {label && <~~GroupLabel~~ variant=\"subheadingSmallBold\">{`${label}:`}</~~GroupLabel>~~}\n <Text>{text}</Text>\n <CrossIcon\n className={buildClassnames([classNames?.cross, e2eClassNames?.cross])}\n name=\"cross\"\n color={colors.neutral.ink.base}\n />\n </~~Container~~>\n );\n }\n\n return (\n <Dropdown\n className={classNames.filterTagDropdown}\n shouldShowDropdown={shouldShowDropdown}\n onClickAway={handleClickAway}\n cta={\n <~~Container~~ className={classNames.container} onClick={handleClick} ref={setAnchorElement}>\n {label && <~~GroupLabel~~ variant=\"subheadingSmallBold\">{`${label}:`}</~~GroupLabel>~~}\n <Text>{text}</Text>\n <~~MainIcon~~\n color={colors.neutral.ink.base}\n name=\"downArrow\"\n ~~$shouldShow={shouldShowDropdown}\n~~ />\n </~~Container~~>\n }\n >\n <~~Content~~ ref={setPopperElement} onKeyDown={handleKeyDown}>\n <~~Header~~ ~~color~~={fill}>\n {header \|\| (\n <>\n {iconSlot}\n <Text variant=\"bodyBold\">{label}</Text>\n </>\n )}\n </~~Header~~>\n {content}\n {footer}\n </~~Content~~>\n </Dropdown>\n );\n};\n"],"names":["colors","useState","useDropdown","useHandleFocus","useCallback","React","~~Container","~~buildClassnames","~~GroupLabel~~","Text","CrossIcon","Dropdown","~~MainIcon~~","~~Content~~"~~,"Header"~~],"mappings":"~~;;;;;;;;;;;;;;;;;;AA0BA~~,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,iBAAiB,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,oBAAA,CAAsB,GAAG,SAAS;IACvE,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,GAAG,SAAS;IACrD,KAAK,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,MAAA,CAAQ,GAAG,SAAS;AAC9C,CAAA,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,GAAGA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EACjC,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,sBAAsB,GAAG,IAAI,GACd,KAAI;AACnB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;IAEtD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,~~CAAwB~~,IAAI,CAAC;~~IAC/E~~,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,aAAa,EAAE,GAAGC,uBAAW,CAAC;QAClF,aAAa;AACd,KAAA,CAAC;AAEF,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;QACvC,aAAa;QACb,aAAa;AACb,QAAA,OAAO,EAAE,aAAa;AACvB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,~~GAAsCC~~,iBAAW,~~CAChE~~,CAAC,KAAK,KAAI;AACR,QAAA,IAAI,kBAAkB;AAAE,YAAA,aAAa,EAAE;;AAClC,YAAA,wBAAwB,EAAE;QAE/B,IAAI,WAAW,IAAI,kBAAkB;YAAE,WAAW,CAAC,KAAY,CAAC;IAClE,CAAC,EACD,CAAC,kBAAkB,EAAE,aAAa,EAAE,wBAAwB,EAAE,WAAW,CAAC,CAC3E;AAED,IAAA,MAAM,eAAe,GAAGA,iBAAW,CACjC,CAAC,KAAU,KAAI;;AAEb,QAAA,IAAI,WAAW;AAAE,YAAA,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC;;AAGlD,QAAA,IAAI,sBAAsB;AAAE,YAAA,aAAa,EAAE;IAC7C,CAAC,EACD,CAAC,WAAW,EAAE,aAAa,EAAE,sBAAsB,CAAC,CACrD;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,OAAO;AAEjC,IAAA,IAAI,gBAAgB,EAAE;~~AACpB~~,~~QAAA,~~QACEC,~~sBAAA~~,~~CAAA~~,~~aAAA~~,~~CAACC~~,~~gBAAS~~,~~EAAA,EACR,~~SAAS,EAAEC,+BAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,SAAS,~~EAAE~~,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS,CAAC,~~CAAC~~,~~EAC7E,~~OAAO,EAAE,OAAO,EAAA;~~YAEf~~,KAAK,~~IAAIF~~,sBAAA,CAAA,aAAA,CAACG,~~iBAAU~~,EAAA,EAAC,OAAO,EAAC,qBAAqB,EAAA,EAAE,~~CAAA~~,~~EAAG,~~KAAK,CAAA,CAAA,CAAG,~~CAAc~~;~~YAC9EH~~,sBAAA,CAAA,aAAA,~~CAACI~~,SAAI,EAAA,IAAA,EAAE,IAAI,CAAQ;~~AACnB~~,~~YAAAJ,~~sBAAA,CAAA,aAAA,~~CAACK~~,~~gBAAS~~,~~EAAA~~,~~EACR,~~SAAS,EAAEH,+BAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,~~KAAA~~,~~MAAA,GAAA,MAAA,GAAb,~~aAAa,CAAE,KAAK,CAAC,CAAC,~~EACrE~~,IAAI,EAAC,OAAO,EACZ,KAAK,EAAEP,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC9B,~~CACQ~~;~~AAEf~~,IAAA;~~AAED~~,~~IAAA,~~QACEK,sBAAA,CAAA,aAAA,~~CAACM~~,iCAAQ,EAAA,EACP,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,eAAe,EAC5B,GAAG,~~EACDN~~,sBAAA,CAAA,aAAA,~~CAACC~~,~~gBAAS~~,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,~~EAAE~~,GAAG,EAAE,gBAAgB,EAAA;~~YACpF~~,KAAK,~~IAAID~~,sBAAA,CAAA,aAAA,CAACG,~~iBAAU~~,EAAA,EAAC,OAAO,EAAC,qBAAqB,EAAA,EAAE,~~CAAA~~,~~EAAG,~~KAAK,CAAA,CAAA,CAAG,~~CAAc~~;~~YAC9EH~~,sBAAA,CAAA,aAAA,~~CAACI~~,SAAI,EAAA,IAAA,EAAE,IAAI,CAAQ;AACnB,~~YAAAJ~~,sBAAA,CAAA,aAAA,~~CAACO~~,~~eAAQ~~,EAAA,~~EACP~~,KAAK,~~EAAEZ~~,aAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC9B,IAAI,EAAC,WAAW,EAAA,~~aAAA~~,~~EACH~~,~~kBAAkB~~,~~GAC/B~~,~~CACQ~~,EAAA~~;QAGdK~~,~~sBAAA~~,~~CAAA~~,~~aAAA~~,~~CAACQ~~,~~cAAO~~,~~IAAC~~,GAAG,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAA;~~YACtDR~~,sBAAA,CAAA,aAAA,~~CAACS~~,~~aAAM~~,~~IAAC~~,KAAK,EAAE,IAAI,EAAA,~~EAChB~~,MAAM,~~KACLT~~,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACG,QAAQ;gBACTA,sBAAA,CAAA,aAAA,~~CAACI~~,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,KAAK,CAAQ,CACtC,CACJ,~~CACM~~;~~YACR~~,OAAO;YACP,MAAM,~~CACC~~,~~CACD~~;AAEf;;;;"}
1	+ {"version":3,"file":"FilterTag.cjs","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\nimport { Text } from '../Text';\nimport { AnimatedDropdown as Dropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport styles from './FilterTag.module.scss';\n\nexport interface ClassNamesReturnPayload {\n filterTagDropdown?: string;\n container?: string;\n cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n container: prefix ? `${prefix}-container` : undefined,\n cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n className,\n e2eClassName,\n label,\n text,\n iconSlot,\n fill = colors.secondary.blue.base,\n content,\n footer,\n header,\n onClickAway,\n onClick,\n shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n const [anchorElement, setAnchorElement] = useState<HTMLButtonElement \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLDivElement \| null>(null);\n\n const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n anchorElement,\n });\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose: closeDropdown,\n });\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (event) => {\n if (shouldShowDropdown) closeDropdown();\n else toggleShouldShowDropdown();\n\n if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n },\n [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n );\n\n const handleClickAway = useCallback(\n (event: any) => {\n // Escape hatch to apply custom behavior when clicked away\n if (onClickAway) onClickAway(event, closeDropdown);\n\n // Default clickAway behavior (closes the dropdown)\n if (shouldCloseOnClickAway) closeDropdown();\n },\n [onClickAway, closeDropdown, shouldCloseOnClickAway],\n );\n\n const shouldShowSimple = !content;\n\n if (shouldShowSimple) {\n return (\n <button\n type=\"button\"\n className={buildClassnames([\n styles.container,\n classNames?.container,\n e2eClassNames?.container,\n ])}\n onClick={onClick}\n >\n {label && (\n <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n )}\n <Text>{text}</Text>\n <CrossIcon\n className={buildClassnames([styles.crossIcon, classNames?.cross, e2eClassNames?.cross])}\n name=\"cross\"\n color={colors.neutral.ink.base}\n />\n </button>\n );\n }\n\n return (\n <Dropdown\n className={classNames.filterTagDropdown}\n shouldShowDropdown={shouldShowDropdown}\n onClickAway={handleClickAway}\n cta={\n <button\n type=\"button\"\n className={buildClassnames([styles.container, classNames.container, e2eClassNames?.container])}\n onClick={handleClick}\n ref={setAnchorElement}\n >\n {label && (\n <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n )}\n <Text>{text}</Text>\n <DownArrowIcon\n className={buildClassnames([styles.mainIcon, shouldShowDropdown && styles.rotated])}\n color={colors.neutral.ink.base}\n name=\"downArrow\"\n />\n </button>\n }\n >\n <div className={styles.content} ref={setPopperElement} onKeyDown={handleKeyDown}>\n <div className={styles.header} style={assignCssVars({ headerColor: fill })}>\n {header \|\| (\n <>\n {iconSlot}\n <Text variant=\"bodyBold\">{label}</Text>\n </>\n )}\n </div>\n {content}\n {footer}\n </div>\n </Dropdown>\n );\n};\n"],"names":["colors","useState","useDropdown","useHandleFocus","useCallback","React","buildClassnames","styles","Text","CrossIcon","Dropdown","DownArrowIcon","assignCssVars"],"mappings":"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"}

package/dist/components/FilterTag/FilterTag.js CHANGED Viewed

@@ -3,12 +3,15 @@ import { useDropdown } from '../../hooks/useDropdown.js';
 import '../../hooks/useFocusVisible.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
 import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
-import { Container, GroupLabel, CrossIcon as StyledCrossIcon, MainIcon, Content, Header } from './styled.js';
 import { useHandleFocus } from '../Popover/hooks/useHandleFocus.js';
 import { Text } from '../Text/Text.js';
 import { AnimatedDropdown } from '../AnimatedDropdown/AnimatedDropdown.js';
+import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
+import { ReactComponent as DownArrowIcon } from '../../icons/design-system/components/DownArrowIcon.js';
+import styles from './FilterTag.module.scss.js';
 const generateClassNames = (prefix) => ({
     filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,
@@ -46,17 +49,21 @@ const FilterTag = ({ className, e2eClassName, label, text, iconSlot, fill = colo
     }, [onClickAway, closeDropdown, shouldCloseOnClickAway]);
     const shouldShowSimple = !content;
     if (shouldShowSimple) {
-        return (React__default.createElement(Container, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: onClick },
-            label && React__default.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+        return (React__default.createElement("button", { type: "button", className: buildClassnames([
+                styles.container,
+                classNames === null || classNames === void 0 ? void 0 : classNames.container,
+                e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container,
+            ]), onClick: onClick },
+            label && (React__default.createElement(Text, { className: styles.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
             React__default.createElement(Text, null, text),
-            React__default.createElement(StyledCrossIcon, { className: buildClassnames([classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.neutral.ink.base })));
+            React__default.createElement(CrossIcon, { className: buildClassnames([styles.crossIcon, classNames === null || classNames === void 0 ? void 0 : classNames.cross, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.cross]), name: "cross", color: colors.neutral.ink.base })));
     }
-    return (React__default.createElement(AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.createElement(Container, { className: classNames.container, onClick: handleClick, ref: setAnchorElement },
-            label && React__default.createElement(GroupLabel, { variant: "subheadingSmallBold" }, `${label}:`),
+    return (React__default.createElement(AnimatedDropdown, { className: classNames.filterTagDropdown, shouldShowDropdown: shouldShowDropdown, onClickAway: handleClickAway, cta: React__default.createElement("button", { type: "button", className: buildClassnames([styles.container, classNames.container, e2eClassNames === null || e2eClassNames === void 0 ? void 0 : e2eClassNames.container]), onClick: handleClick, ref: setAnchorElement },
+            label && (React__default.createElement(Text, { className: styles.groupLabel, variant: "subheadingSmallBold" }, `${label}:`)),
             React__default.createElement(Text, null, text),
-            React__default.createElement(MainIcon, { color: colors.neutral.ink.base, name: "downArrow", "$shouldShow": shouldShowDropdown })) },
-        React__default.createElement(Content, { ref: setPopperElement, onKeyDown: handleKeyDown },
-            React__default.createElement(Header, { color: fill }, header || (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(DownArrowIcon, { className: buildClassnames([styles.mainIcon, shouldShowDropdown && styles.rotated]), color: colors.neutral.ink.base, name: "downArrow" })) },
+        React__default.createElement("div", { className: styles.content, ref: setPopperElement, onKeyDown: handleKeyDown },
+            React__default.createElement("div", { className: styles.header, style: assignCssVars({ headerColor: fill }) }, header || (React__default.createElement(React__default.Fragment, null,
                 iconSlot,
                 React__default.createElement(Text, { variant: "bodyBold" }, label)))),
             content,

package/dist/components/FilterTag/FilterTag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterTag.js","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport {~~\n Container,\n Text,\n Dropdown,\n GroupLabel,\n MainIcon,\n CrossIcon,\n Content,\n Header,\n~~} from '~~./styled~~';\nimport { ~~buildClassnames~~ } from '../../utils/~~buildClassnames~~';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\n\nexport interface ClassNamesReturnPayload {\n filterTagDropdown?: string;\n container?: string;\n cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n container: prefix ? `${prefix}-container` : undefined,\n cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n className,\n e2eClassName,\n label,\n text,\n iconSlot,\n fill = colors.secondary.blue.base,\n content,\n footer,\n header,\n onClickAway,\n onClick,\n shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n const [anchorElement, setAnchorElement] = useState<~~HTMLDivElement~~ \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLDivElement \| null>(null);\n\n const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n anchorElement,\n });\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose: closeDropdown,\n });\n\n const handleClick: MouseEventHandler<~~HTMLDivElement~~> = useCallback(\n (event) => {\n if (shouldShowDropdown) closeDropdown();\n else toggleShouldShowDropdown();\n\n if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n },\n [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n );\n\n const handleClickAway = useCallback(\n (event: any) => {\n // Escape hatch to apply custom behavior when clicked away\n if (onClickAway) onClickAway(event, closeDropdown);\n\n // Default clickAway behavior (closes the dropdown)\n if (shouldCloseOnClickAway) closeDropdown();\n },\n [onClickAway, closeDropdown, shouldCloseOnClickAway],\n );\n\n const shouldShowSimple = !content;\n\n if (shouldShowSimple) {\n return (\n <~~Container~~\n className={buildClassnames([classNames?.container, e2eClassNames?.container])}\n onClick={onClick}\n >\n {label && <~~GroupLabel~~ variant=\"subheadingSmallBold\">{`${label}:`}</~~GroupLabel>~~}\n <Text>{text}</Text>\n <CrossIcon\n className={buildClassnames([classNames?.cross, e2eClassNames?.cross])}\n name=\"cross\"\n color={colors.neutral.ink.base}\n />\n </~~Container~~>\n );\n }\n\n return (\n <Dropdown\n className={classNames.filterTagDropdown}\n shouldShowDropdown={shouldShowDropdown}\n onClickAway={handleClickAway}\n cta={\n <~~Container~~ className={classNames.container} onClick={handleClick} ref={setAnchorElement}>\n {label && <~~GroupLabel~~ variant=\"subheadingSmallBold\">{`${label}:`}</~~GroupLabel>~~}\n <Text>{text}</Text>\n <~~MainIcon~~\n color={colors.neutral.ink.base}\n name=\"downArrow\"\n ~~$shouldShow={shouldShowDropdown}\n~~ />\n </~~Container~~>\n }\n >\n <~~Content~~ ref={setPopperElement} onKeyDown={handleKeyDown}>\n <~~Header~~ ~~color~~={fill}>\n {header \|\| (\n <>\n {iconSlot}\n <Text variant=\"bodyBold\">{label}</Text>\n </>\n )}\n </~~Header~~>\n {content}\n {footer}\n </~~Content~~>\n </Dropdown>\n );\n};\n"],"names":["React","~~CrossIcon","~~Dropdown"],"mappings":"~~;;;;;;;;;;;;AA0BA~~,MAAM,kBAAkB,GAAG,CAAC,MAAe,MAA+B;IACxE,iBAAiB,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,oBAAA,CAAsB,GAAG,SAAS;IACvE,SAAS,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,GAAG,SAAS;IACrD,KAAK,EAAE,MAAM,GAAG,CAAA,EAAG,MAAM,CAAA,MAAA,CAAQ,GAAG,SAAS;AAC9C,CAAA,CAAC;AAEK,MAAM,SAAS,GAAG,CAAC,EACxB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EACjC,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,OAAO,EACP,sBAAsB,GAAG,IAAI,GACd,KAAI;AACnB,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;AAChD,IAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC;IAEtD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,~~CAAwB~~,IAAI,CAAC;~~IAC/E~~,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;IAE/E,MAAM,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,aAAa,EAAE,GAAG,WAAW,CAAC;QAClF,aAAa;AACd,KAAA,CAAC;AAEF,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;QACvC,aAAa;QACb,aAAa;AACb,QAAA,OAAO,EAAE,aAAa;AACvB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,~~GAAsC~~,WAAW,~~CAChE~~,CAAC,KAAK,KAAI;AACR,QAAA,IAAI,kBAAkB;AAAE,YAAA,aAAa,EAAE;;AAClC,YAAA,wBAAwB,EAAE;QAE/B,IAAI,WAAW,IAAI,kBAAkB;YAAE,WAAW,CAAC,KAAY,CAAC;IAClE,CAAC,EACD,CAAC,kBAAkB,EAAE,aAAa,EAAE,wBAAwB,EAAE,WAAW,CAAC,CAC3E;AAED,IAAA,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAU,KAAI;;AAEb,QAAA,IAAI,WAAW;AAAE,YAAA,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC;;AAGlD,QAAA,IAAI,sBAAsB;AAAE,YAAA,aAAa,EAAE;IAC7C,CAAC,EACD,CAAC,WAAW,EAAE,aAAa,EAAE,sBAAsB,CAAC,CACrD;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,OAAO;AAEjC,IAAA,IAAI,gBAAgB,EAAE;~~AACpB~~,~~QAAA,~~QACEA,~~cAAA~~,~~CAAA~~,~~aAAA~~,~~CAAC~~,~~SAAS~~,~~EAAA,EACR,~~SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,SAAS,~~EAAE~~,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,SAAS,CAAC,~~CAAC~~,~~EAC7E,~~OAAO,EAAE,OAAO,EAAA;~~YAEf~~,KAAK,~~IAAIA~~,cAAA,CAAA,aAAA,CAAC,~~UAAU~~,EAAA,EAAC,OAAO,EAAC,qBAAqB,EAAA,EAAE,~~CAAA~~,~~EAAG,~~KAAK,CAAA,CAAA,CAAG,~~CAAc~~;~~YAC9EA~~,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAE,IAAI,CAAQ;~~AACnB~~,~~YAAAA,~~cAAA,CAAA,aAAA,~~CAACC~~,~~eAAS~~,~~EAAA~~,~~EACR,~~SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,~~KAAA~~,~~MAAA,GAAA,MAAA,GAAb,~~aAAa,CAAE,KAAK,CAAC,CAAC,~~EACrE~~,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAC9B,~~CACQ~~;~~AAEf~~,IAAA;~~AAED~~,~~IAAA~~,~~QACED,~~cAAA,CAAA,aAAA,~~CAACE~~,gBAAQ,EAAA,EACP,SAAS,EAAE,UAAU,CAAC,iBAAiB,EACvC,kBAAkB,EAAE,kBAAkB,EACtC,WAAW,EAAE,eAAe,EAC5B,GAAG,~~EACDF~~,cAAA,CAAA,aAAA,~~CAAC~~,~~SAAS~~,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,WAAW,~~EAAE~~,GAAG,EAAE,gBAAgB,EAAA;~~YACpF~~,KAAK,~~IAAIA~~,cAAA,CAAA,aAAA,CAAC,~~UAAU~~,EAAA,EAAC,OAAO,EAAC,qBAAqB,EAAA,EAAE,~~CAAA~~,~~EAAG,~~KAAK,CAAA,CAAA,CAAG,~~CAAc~~;~~YAC9EA~~,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAE,IAAI,CAAQ;AACnB,YAAAA,cAAA,CAAA,aAAA,CAAC,~~QAAQ~~,EAAA,~~EACP~~,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAC9B,IAAI,EAAC,WAAW,EAAA,~~aAAA~~,~~EACH~~,~~kBAAkB~~,~~GAC/B~~,~~CACQ~~,EAAA~~;QAGdA~~,~~cAAA~~,~~CAAA~~,~~aAAA~~,CAAC,OAAO,~~IAAC~~,GAAG,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAA;~~YACtDA~~,cAAA,CAAA,aAAA,CAAC,MAAM,~~IAAC~~,KAAK,EAAE,IAAI,EAAA,~~EAChB~~,MAAM,KACLA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACG,QAAQ;gBACTA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,IAAE,KAAK,CAAQ,CACtC,CACJ,~~CACM~~;~~YACR~~,OAAO;YACP,MAAM,~~CACC~~,~~CACD~~;AAEf;;;;"}
1	+ {"version":3,"file":"FilterTag.js","sources":["../../../src/components/FilterTag/FilterTag.tsx"],"sourcesContent":["import React, { MouseEventHandler, useCallback, useState } from 'react';\nimport { useDropdown } from '../../hooks';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { FilterTagProps } from './types';\n\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { assignCssVars } from '../../utils/assignCssVars';\nimport { useHandleFocus } from '../Popover/hooks/useHandleFocus';\nimport { Text } from '../Text';\nimport { AnimatedDropdown as Dropdown } from '../AnimatedDropdown';\nimport { CrossIcon, DownArrowIcon } from '../../icons';\nimport styles from './FilterTag.module.scss';\n\nexport interface ClassNamesReturnPayload {\n filterTagDropdown?: string;\n container?: string;\n cross?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,\n container: prefix ? `${prefix}-container` : undefined,\n cross: prefix ? `${prefix}-cross` : undefined,\n});\n\nexport const FilterTag = ({\n className,\n e2eClassName,\n label,\n text,\n iconSlot,\n fill = colors.secondary.blue.base,\n content,\n footer,\n header,\n onClickAway,\n onClick,\n shouldCloseOnClickAway = true,\n}: FilterTagProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n const [anchorElement, setAnchorElement] = useState<HTMLButtonElement \| null>(null);\n const [popperElement, setPopperElement] = useState<HTMLDivElement \| null>(null);\n\n const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown({\n anchorElement,\n });\n\n const { handleKeyDown } = useHandleFocus({\n popperElement,\n anchorElement,\n onClose: closeDropdown,\n });\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (event) => {\n if (shouldShowDropdown) closeDropdown();\n else toggleShouldShowDropdown();\n\n if (onClickAway && shouldShowDropdown) onClickAway(event as any);\n },\n [shouldShowDropdown, closeDropdown, toggleShouldShowDropdown, onClickAway],\n );\n\n const handleClickAway = useCallback(\n (event: any) => {\n // Escape hatch to apply custom behavior when clicked away\n if (onClickAway) onClickAway(event, closeDropdown);\n\n // Default clickAway behavior (closes the dropdown)\n if (shouldCloseOnClickAway) closeDropdown();\n },\n [onClickAway, closeDropdown, shouldCloseOnClickAway],\n );\n\n const shouldShowSimple = !content;\n\n if (shouldShowSimple) {\n return (\n <button\n type=\"button\"\n className={buildClassnames([\n styles.container,\n classNames?.container,\n e2eClassNames?.container,\n ])}\n onClick={onClick}\n >\n {label && (\n <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n )}\n <Text>{text}</Text>\n <CrossIcon\n className={buildClassnames([styles.crossIcon, classNames?.cross, e2eClassNames?.cross])}\n name=\"cross\"\n color={colors.neutral.ink.base}\n />\n </button>\n );\n }\n\n return (\n <Dropdown\n className={classNames.filterTagDropdown}\n shouldShowDropdown={shouldShowDropdown}\n onClickAway={handleClickAway}\n cta={\n <button\n type=\"button\"\n className={buildClassnames([styles.container, classNames.container, e2eClassNames?.container])}\n onClick={handleClick}\n ref={setAnchorElement}\n >\n {label && (\n <Text className={styles.groupLabel} variant=\"subheadingSmallBold\">{`${label}:`}</Text>\n )}\n <Text>{text}</Text>\n <DownArrowIcon\n className={buildClassnames([styles.mainIcon, shouldShowDropdown && styles.rotated])}\n color={colors.neutral.ink.base}\n name=\"downArrow\"\n />\n </button>\n }\n >\n <div className={styles.content} ref={setPopperElement} onKeyDown={handleKeyDown}>\n <div className={styles.header} style={assignCssVars({ headerColor: fill })}>\n {header \|\| (\n <>\n {iconSlot}\n <Text variant=\"bodyBold\">{label}</Text>\n </>\n )}\n </div>\n {content}\n {footer}\n </div>\n </Dropdown>\n );\n};\n"],"names":["React","Dropdown"],"mappings":"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"}

package/dist/components/FilterTag/FilterTag.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+___$insertStyle("._container_1g0hs_1 {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: var(--colors-neutral-grey-base);\n  padding: var(--sizes-xs) var(--sizes-sm);\n  cursor: pointer;\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n._container_1g0hs_1 svg {\n  width: var(--sizes-base);\n  height: var(--sizes-base);\n}\n._container_1g0hs_1:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1g0hs_20 {\n  margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1g0hs_24 {\n  margin-left: var(--sizes-xs);\n  transform: rotate(0);\n  width: 10px;\n  height: 10px;\n}\n\n._rotated_1g0hs_31 {\n  transform: rotate(180deg);\n}\n\n._crossIcon_1g0hs_35 {\n  margin-left: var(--sizes-xs);\n  height: 10px;\n  width: 10px;\n}\n\n._content_1g0hs_41 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n._header_1g0hs_48 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: var(--sizes-3) 18px;\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._header_1g0hs_48 svg {\n  color: var(--header-color);\n  width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-right: 10px;\n}");
+var styles = {"container":"_container_1g0hs_1","groupLabel":"_groupLabel_1g0hs_20","mainIcon":"_mainIcon_1g0hs_24","rotated":"_rotated_1g0hs_31","crossIcon":"_crossIcon_1g0hs_35","content":"_content_1g0hs_41","header":"_header_1g0hs_48"};
+module.exports = styles;
+//# sourceMappingURL=FilterTag.module.scss.cjs.map

package/dist/components/FilterTag/FilterTag.module.scss.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterTag.module.scss.cjs","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border: 1px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n.groupLabel {\n margin-right: var(--sizes-xs);\n}\n\n.mainIcon {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n\n width: 10px;\n height: 10px;\n}\n\n.rotated {\n transform: rotate(180deg);\n}\n\n.crossIcon {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+yCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

package/dist/components/FilterTag/FilterTag.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+insertStyle("._container_1g0hs_1 {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: var(--colors-neutral-grey-base);\n  padding: var(--sizes-xs) var(--sizes-sm);\n  cursor: pointer;\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n._container_1g0hs_1 svg {\n  width: var(--sizes-base);\n  height: var(--sizes-base);\n}\n._container_1g0hs_1:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n\n._groupLabel_1g0hs_20 {\n  margin-right: var(--sizes-xs);\n}\n\n._mainIcon_1g0hs_24 {\n  margin-left: var(--sizes-xs);\n  transform: rotate(0);\n  width: 10px;\n  height: 10px;\n}\n\n._rotated_1g0hs_31 {\n  transform: rotate(180deg);\n}\n\n._crossIcon_1g0hs_35 {\n  margin-left: var(--sizes-xs);\n  height: 10px;\n  width: 10px;\n}\n\n._content_1g0hs_41 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n\n._header_1g0hs_48 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: var(--sizes-3) 18px;\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._header_1g0hs_48 svg {\n  color: var(--header-color);\n  width: var(--sizes-5);\n  height: var(--sizes-5);\n  margin-right: 10px;\n}");
+var styles = {"container":"_container_1g0hs_1","groupLabel":"_groupLabel_1g0hs_20","mainIcon":"_mainIcon_1g0hs_24","rotated":"_rotated_1g0hs_31","crossIcon":"_crossIcon_1g0hs_35","content":"_content_1g0hs_41","header":"_header_1g0hs_48"};
+export { styles as default };
+//# sourceMappingURL=FilterTag.module.scss.js.map

package/dist/components/FilterTag/FilterTag.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterTag.module.scss.js","sources":["../../../src/components/FilterTag/FilterTag.module.scss"],"sourcesContent":[".container {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n background-color: var(--colors-neutral-grey-base);\n padding: var(--sizes-xs) var(--sizes-sm);\n cursor: pointer;\n\n border: 1px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-base);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n}\n\n.groupLabel {\n margin-right: var(--sizes-xs);\n}\n\n.mainIcon {\n margin-left: var(--sizes-xs);\n transform: rotate(0);\n\n width: 10px;\n height: 10px;\n}\n\n.rotated {\n transform: rotate(180deg);\n}\n\n.crossIcon {\n margin-left: var(--sizes-xs);\n height: 10px;\n width: 10px;\n}\n\n.content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n}\n\n.header {\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n padding: var(--sizes-3) 18px;\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n svg {\n color: var(--header-color);\n width: var(--sizes-5);\n height: var(--sizes-5);\n margin-right: 10px;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+yCAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,QAAA,CAAA,kBAAA;;;;"}

package/dist/components/Indicator/Indicator.cjs CHANGED Viewed

@@ -1,16 +1,23 @@
 'use strict';
 var React = require('react');
-var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var Indicator_module = require('./Indicator.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
-    const backgroundColor = color || index.theme.colors.neutral.grey.base;
-    return (React__default.default.createElement(styled.Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
+const Indicator = ({ color, style, textColour, size = 'base', className, ...otherProps }) => {
+    return (React__default.default.createElement("div", { role: "status", className: buildClassnames.buildClassnames([Indicator_module.indicator, Indicator_module[`${size}-size`], className]), style: {
+            ...assignCssVars.assignCssVars({
+                indicatorColor: color,
+                indicatorTextColor: textColour,
+            }),
+            ...style,
+        }, ...otherProps }));
 };
 exports.Indicator = Indicator;

package/dist/components/Indicator/Indicator.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Indicator.cjs","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~theme~~ } from '~~Theme~~';\nimport { ~~Wrapper }~~ from './~~styled~~';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n color,\n style,\n textColour,\n size = 'base',\n ...otherProps\n}: IndicatorProps) => {\n ~~const backgroundColor = color \|\| theme.colors.neutral.grey.base;\n~~ return (\n <~~Wrapper~~\n role=\"status\"\n style={{ ~~backgroundColor,~~ color: textColour, ...style ~~}}\~~n ~~size={size~~}\n {...otherProps}\n />\n );\n};\n"],"names":["~~theme~~","~~React~~","~~Wrapper~~"],"mappings":"~~;;;;;;;;;;~~MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,GAAG,UAAU,EACE,KAAI;~~AACnB~~,~~IAAA~~,~~MAAM~~,~~eAAe~~,~~GAAG~~,~~KAAK~~,~~IAAIA~~,~~WAAK~~,~~CAAC~~,~~MAAM~~,~~CAAC~~,~~OAAO~~,CAAC,~~IAAI~~,CAAC,~~IAAI;AAC/D~~,~~IAAA~~,~~QACEC~~,~~sBAAA~~,CAAA,~~aAAA~~,~~CAACC~~,~~cAAO~~,~~EAAA~~,~~EACN~~,~~IAAI~~,~~EAAC~~,~~QAAQ~~,~~EACb~~,KAAK,EAAE,~~EAAE~~,~~eAAe~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~UAAU~~,EAAE,~~GAAG,~~KAAK,EAAE,~~EACvD~~,~~IAAI~~,~~EAAE~~,~~IAAI~~,EAAA,~~GACN~~,UAAU,EAAA,CACd;AAEN;;;;"}
1	+ {"version":3,"file":"Indicator.cjs","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport styles from './Indicator.module.scss';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n color,\n style,\n textColour,\n size = 'base',\n className,\n ...otherProps\n}: IndicatorProps) => {\n return (\n <div\n role=\"status\"\n className={buildClassnames([styles.indicator, styles[`${size}-size`], className])}\n style={{\n ...assignCssVars({\n indicatorColor: color,\n indicatorTextColor: textColour,\n }),\n ...style,\n }}\n {...otherProps}\n />\n );\n};\n"],"names":["React","buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,UAAU,EACE,KAAI;IACnB,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,SAAS,EAAEA,gBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EACjF,KAAK,EAAE;AACL,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,kBAAkB,EAAE,UAAU;aAC/B,CAAC;AACF,YAAA,GAAG,KAAK;SACT,EAAA,GACG,UAAU,EAAA,CACd;AAEN;;;;"}

package/dist/components/Indicator/Indicator.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IndicatorProps } from './types';
-export declare const Indicator: ({ color, style, textColour, size, ...otherProps }: IndicatorProps) => React.JSX.Element;
+export declare const Indicator: ({ color, style, textColour, size, className, ...otherProps }: IndicatorProps) => React.JSX.Element;

package/dist/components/Indicator/Indicator.js CHANGED Viewed

@@ -1,10 +1,17 @@
 import React__default from 'react';
-import { theme } from '../../theme/index.js';
-import { Wrapper } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import styles from './Indicator.module.scss.js';
-const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
-    const backgroundColor = color || theme.colors.neutral.grey.base;
-    return (React__default.createElement(Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
+const Indicator = ({ color, style, textColour, size = 'base', className, ...otherProps }) => {
+    return (React__default.createElement("div", { role: "status", className: buildClassnames([styles.indicator, styles[`${size}-size`], className]), style: {
+            ...assignCssVars({
+                indicatorColor: color,
+                indicatorTextColor: textColour,
+            }),
+            ...style,
+        }, ...otherProps }));
 };
 export { Indicator };

package/dist/components/Indicator/Indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Indicator.js","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~theme~~ } from '~~Theme~~';\nimport { ~~Wrapper }~~ from './~~styled~~';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n color,\n style,\n textColour,\n size = 'base',\n ...otherProps\n}: IndicatorProps) => {\n ~~const backgroundColor = color \|\| theme.colors.neutral.grey.base;\n~~ return (\n <~~Wrapper~~\n role=\"status\"\n style={{ ~~backgroundColor,~~ color: textColour, ...style ~~}}\~~n ~~size={size~~}\n {...otherProps}\n />\n );\n};\n"],"names":["React"],"mappings":"~~;;;;~~MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,GAAG,UAAU,EACE,KAAI;~~AACnB~~,~~IAAA~~,~~MAAM~~,~~eAAe~~,~~GAAG~~,~~KAAK~~,IAAI,~~KAAK~~,CAAC,MAAM,CAAC,~~OAAO~~,~~CAAC~~,~~IAAI~~,CAAC,~~IAAI;AAC/D~~,~~IAAA~~,~~QACEA~~,~~cAAA,~~CAAA,~~aAAA~~,CAAC,~~OAAO~~,~~EAAA~~,~~EACN~~,~~IAAI~~,~~EAAC~~,~~QAAQ,EACb,~~KAAK,EAAE,~~EAAE~~,~~eAAe~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~UAAU~~,EAAE,~~GAAG,~~KAAK,EAAE,~~EACvD~~,~~IAAI~~,~~EAAE~~,~~IAAI~~,EAAA,~~GACN~~,UAAU,EAAA,CACd;AAEN;;;;"}
1	+ {"version":3,"file":"Indicator.js","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport styles from './Indicator.module.scss';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n color,\n style,\n textColour,\n size = 'base',\n className,\n ...otherProps\n}: IndicatorProps) => {\n return (\n <div\n role=\"status\"\n className={buildClassnames([styles.indicator, styles[`${size}-size`], className])}\n style={{\n ...assignCssVars({\n indicatorColor: color,\n indicatorTextColor: textColour,\n }),\n ...style,\n }}\n {...otherProps}\n />\n );\n};\n"],"names":["React"],"mappings":";;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,UAAU,EACE,KAAI;IACnB,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EACjF,KAAK,EAAE;AACL,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,kBAAkB,EAAE,UAAU;aAC/B,CAAC;AACF,YAAA,GAAG,KAAK;SACT,EAAA,GACG,UAAU,EAAA,CACd;AAEN;;;;"}

package/dist/components/Indicator/Indicator.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+___$insertStyle("._indicator_1oemz_1 {\n  position: absolute;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n._base-size_1oemz_15 {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n._sm-size_1oemz_23 {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n._xs-size_1oemz_31 {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}");
+var styles = {"indicator":"_indicator_1oemz_1","base-size":"_base-size_1oemz_15","sm-size":"_sm-size_1oemz_23","xs-size":"_xs-size_1oemz_31"};
+module.exports = styles;
+//# sourceMappingURL=Indicator.module.scss.cjs.map

package/dist/components/Indicator/Indicator.module.scss.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Indicator.module.scss.cjs","sources":["../../../src/components/Indicator/Indicator.module.scss"],"sourcesContent":[".indicator {\n position: absolute;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: 0 var(--sizes-xs);\n background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n color: var(--indicator-text-color);\n border: 2px solid white;\n font-weight: bold;\n font-size: var(--text-body-small-font-size);\n}\n\n.base-size {\n height: var(--sizes-7);\n min-width: var(--sizes-7);\n border-radius: 18px;\n top: calc(-1 * var(--sizes-3));\n right: calc(-1 * var(--sizes-3));\n}\n\n.sm-size {\n height: var(--sizes-5);\n min-width: var(--sizes-5);\n border-radius: 10px;\n top: calc(-1 * var(--sizes-sm));\n right: calc(-1 * var(--sizes-sm));\n}\n\n.xs-size {\n height: var(--sizes-base);\n min-width: var(--sizes-base);\n border-radius: var(--radius-md);\n top: -6px;\n right: -6px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g5BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

package/dist/components/Indicator/Indicator.module.scss.js ADDED Viewed

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+insertStyle("._indicator_1oemz_1 {\n  position: absolute;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n._base-size_1oemz_15 {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n._sm-size_1oemz_23 {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n._xs-size_1oemz_31 {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}");
+var styles = {"indicator":"_indicator_1oemz_1","base-size":"_base-size_1oemz_15","sm-size":"_sm-size_1oemz_23","xs-size":"_xs-size_1oemz_31"};
+export { styles as default };
+//# sourceMappingURL=Indicator.module.scss.js.map

package/dist/components/Indicator/Indicator.module.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Indicator.module.scss.js","sources":["../../../src/components/Indicator/Indicator.module.scss"],"sourcesContent":[".indicator {\n position: absolute;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n padding: 0 var(--sizes-xs);\n background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n color: var(--indicator-text-color);\n border: 2px solid white;\n font-weight: bold;\n font-size: var(--text-body-small-font-size);\n}\n\n.base-size {\n height: var(--sizes-7);\n min-width: var(--sizes-7);\n border-radius: 18px;\n top: calc(-1 * var(--sizes-3));\n right: calc(-1 * var(--sizes-3));\n}\n\n.sm-size {\n height: var(--sizes-5);\n min-width: var(--sizes-5);\n border-radius: 10px;\n top: calc(-1 * var(--sizes-sm));\n right: calc(-1 * var(--sizes-sm));\n}\n\n.xs-size {\n height: var(--sizes-base);\n min-width: var(--sizes-base);\n border-radius: var(--radius-md);\n top: -6px;\n right: -6px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g5BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var React = require('react');
-var styled = require('./styled.cjs');
+var LoginWithAmazonButton_module = require('./LoginWithAmazonButton.module.scss.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -22,7 +22,7 @@ const LoginWithAmazonButton = (props) => {
     const handleMouseUp = () => {
         setImage(buttonImg);
     };
-    return (React__default.default.createElement(styled.LoginButton, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
+    return (React__default.default.createElement("button", { type: "button", className: LoginWithAmazonButton_module.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
         React__default.default.createElement("img", { src: image, alt: buttonDescription })));
 };

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { ~~LoginButton }~~ from './~~styled~~';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/*\n Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n /\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n props,\n) => {\n const [image, setImage] = useState(buttonImg);\n\n const handleMouseDown = () => {\n setImage(buttonPressedImg);\n };\n\n const handleMouseUp = () => {\n setImage(buttonImg);\n };\n\n return (\n <~~LoginButton~~\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n aria-label={buttonDescription}\n {...props}\n >\n {/ alt attr for better accessibility if image is failed to load */}\n <img src={image} alt={buttonDescription} />\n </~~LoginButton~~>\n );\n};\n"],"names":["useState","React","~~LoginButton~~"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;~~AAED~~,~~IAAA,~~QACEC,~~sBAAA~~,~~CAAA~~,~~aAAA~~,~~CAACC~~,~~kBAAW~~,~~EAAA~~,~~EACV~~,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,~~KACzB~~,KAAK,EAAA;QAGTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,~~CAC/B~~;~~AAElB~~;;;;;"}
1	+ {"version":3,"file":"LoginWithAmazonButton.cjs","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/*\n Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n /\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n props,\n) => {\n const [image, setImage] = useState(buttonImg);\n\n const handleMouseDown = () => {\n setImage(buttonPressedImg);\n };\n\n const handleMouseUp = () => {\n setImage(buttonImg);\n };\n\n return (\n <button\n type=\"button\"\n className={styles.loginButton}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n aria-label={buttonDescription}\n {...props}\n >\n {/ alt attr for better accessibility if image is failed to load */}\n <img src={image} alt={buttonDescription} />\n </button>\n );\n};\n"],"names":["useState","React","styles"],"mappings":";;;;;;;;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEC,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,4BAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React__default, { useState } from 'react';
-import { LoginButton } from './styled.js';
+import styles from './LoginWithAmazonButton.module.scss.js';
 const buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';
 const buttonPressedImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';
@@ -16,7 +16,7 @@ const LoginWithAmazonButton = (props) => {
     const handleMouseUp = () => {
         setImage(buttonImg);
     };
-    return (React__default.createElement(LoginButton, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
+    return (React__default.createElement("button", { type: "button", className: styles.loginButton, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, "aria-label": buttonDescription, ...props },
         React__default.createElement("img", { src: image, alt: buttonDescription })));
 };

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { ~~LoginButton }~~ from './~~styled~~';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/*\n Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n /\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n props,\n) => {\n const [image, setImage] = useState(buttonImg);\n\n const handleMouseDown = () => {\n setImage(buttonPressedImg);\n };\n\n const handleMouseUp = () => {\n setImage(buttonImg);\n };\n\n return (\n <~~LoginButton~~\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n aria-label={buttonDescription}\n {...props}\n >\n {/ alt attr for better accessibility if image is failed to load */}\n <img src={image} alt={buttonDescription} />\n </~~LoginButton~~>\n );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;~~AAED~~,~~IAAA,~~QACEA,~~cAAA~~,~~CAAA~~,~~aAAA~~,CAAC,WAAW,~~EAAA~~,~~EACV,~~WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,~~KACzB~~,KAAK,EAAA;QAGTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,~~CAC/B~~;~~AAElB~~;;;;"}
1	+ {"version":3,"file":"LoginWithAmazonButton.js","sources":["../../../src/components/LoginWithAmazonButton/LoginWithAmazonButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styles from './LoginWithAmazonButton.module.scss';\n\nconst buttonImg = 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64.png';\nconst buttonPressedImg =\n 'https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_312x64_pressed.png';\n\nexport const buttonDescription = 'Log in with Amazon';\n\n/*\n Image used in this button is to comply with official\n * Amazon button guidelines (https://developer.amazon.com/docs/login-with-amazon/button.html#android-images).\n /\nexport const LoginWithAmazonButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = (\n props,\n) => {\n const [image, setImage] = useState(buttonImg);\n\n const handleMouseDown = () => {\n setImage(buttonPressedImg);\n };\n\n const handleMouseUp = () => {\n setImage(buttonImg);\n };\n\n return (\n <button\n type=\"button\"\n className={styles.loginButton}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n aria-label={buttonDescription}\n {...props}\n >\n {/ alt attr for better accessibility if image is failed to load */}\n <img src={image} alt={buttonDescription} />\n </button>\n );\n};\n"],"names":["React"],"mappings":";;;AAGA,MAAM,SAAS,GAAG,gFAAgF;AAClG,MAAM,gBAAgB,GACpB,wFAAwF;AAEnF,MAAM,iBAAiB,GAAG;AAEjC;;;AAGG;AACI,MAAM,qBAAqB,GAA4D,CAC5F,KAAK,KACH;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC;IAE7C,MAAM,eAAe,GAAG,MAAK;QAC3B,QAAQ,CAAC,gBAAgB,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,SAAS,CAAC;AACrB,IAAA,CAAC;IAED,QACEA,yCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EAAA,YAAA,EACZ,iBAAiB,EAAA,GACzB,KAAK,EAAA;QAGTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAA,CAAI,CACpC;AAEb;;;;"}

package/dist/components/LoginWithAmazonButton/LoginWithAmazonButton.module.scss.cjs ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+___$insertStyle("._loginButton_y5bj1_1 {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n}\n._loginButton_y5bj1_1 img {\n  width: 156px;\n  height: 32px;\n}");
+var styles = {"loginButton":"_loginButton_y5bj1_1"};
+module.exports = styles;
+//# sourceMappingURL=LoginWithAmazonButton.module.scss.cjs.map