@tmorrow/cre8-wc 1.2.7 → 2.0.0

package/lib/components/accordion-item/accordion-item.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';
 import { html, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';

package/lib/components/accordion-item/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport classnames from 'classnames';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport '../button/button';\nimport styles from './accordion-item.styles.js';\n\n/**\n *\n * The accordion item component delivers large amounts of content in a small space\n * through progressive disclosure. That is, the user gets key details about the\n * underlying content and can choose to expand that content within the constraints\n * of the accordion item. Accordion Items work especially well on mobile interfaces or\n * whenever vertical space is at a premium.\n *\n * ## HOW TO USE\n * Avoid “nested” accordion items—that is, collapsible content within collapsible content.\n * This type of pattern goes against UX best practices.\n *\n * The Cre8 accordion item header allows for two sizes:\n * 'sm' [cre8-typography-title-default] or 'lg' [cre8-typography-title-large]\n *\n * A chevron is used to indicate the “expand/collapse” action, though the entire\n * header area is clickable for the same action.\n *\n * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that\n * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.\n *\n * @slot The body of the accordion item will be any valid html\n * inserted between the cre8-accordion-item opening and closing tags.\n *\n *\n * @csspart ::part('header') - The container around the interactive header.\n * @csspart ::part('button') - The button containing the header text and the animated icon.\n * @csspart ::part('icon') - The animated icon that revolves on click.\n * @csspart ::part('body') - The container around the expanding body section.\n * @csspart ::part('body-inner') - The container around the slot into which any user provided HTML is inserted.\n *\n */\n\nexport class Cre8AccordionItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   *\n   * When true, the Accordion Item is opens, when false it closes;\n   * @prop {boolean} isActive\n   *\n   */\n\n  @property({ type: Boolean, reflect: true })\n      isActive? = false;\n\n\n  /**\n   *\n   * Optional custom id for the accordion item, if one is not set, a random id is generated for you.\n   * @prop {string} accordionItemId\n   *\n   *\n   */\n  @property({ type: String, reflect: true })\n      accordionItemId?: string;\n\n  /**\n   *\n   * Controls the positioning of the dropdown icon in relation to the text, true puts the icon before the text\n   * and false/undefined default the icon to the opposite side of the accordion item\n   * @prop {boolean} iconBefore\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      iconBefore?: boolean;\n\n  /**\n   *\n   * Controls the appearance  of dropdown icon as being an icon-only button. true renders the tertiary variant and\n   * false/undefined renders the default secondary appearance.\n   * @prop {boolean} tertiaryIcon\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      tertiaryIcon?: boolean;\n\n  /**\n   *\n   * Users can choose between two header sizes:  'sm' [title-default] or 'lg' [title-large].\n   * @prop {'sm' | 'lg'} size\n   *\n   *\n   */\n  @property({ reflect: true })\n      size: 'sm' | 'lg' = 'sm';\n\n  /**\n   *\n   * Purely meant to help the user structure the HTML page hierarchy. Does not change the\n   * header size. Defaults to 'h3'\n   * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} headingTagVariant\n   *\n   *\n   */\n\n  @property({ reflect: true })\n      headingTagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  /**\n   *\n   * Controls the text content of the Accordion Item heading.\n   * @prop {string} heading\n   *\n   *\n   */\n  @property({ type: String })\n      heading!: string;\n\n  /**\n   *\n   * Controls whether the header takes on the theme's 'brand-strong' color\n   * @prop {boolean} brandHeader\n   *\n   *\n   */\n  @property({ type: Boolean })\n      brandHeader?: boolean;\n\n  /**\n   *\n   * The aria attribute to which is assigned the id of the details section which is revealed via interaction\n   * with the header.\n   * @private _ariaControls\n   *\n   *\n   */\n  @property({ attribute: 'aria-controls' })\n  private _ariaControls!: string;\n\n  /**\n   *\n   * Private internal state which indicates the current _height of the accordion item panel.\n   * @private _height\n   *\n   *\n   */\n  @state()\n  private _height!: string;\n\n  /**\n   *\n   * Private internal state which Indicates if the accordion item panel is completely open.\n   * @private _fullyOpen\n   *\n   *\n   */\n\n  @state()\n  private _fullyOpen?: boolean;\n\n  constructor() {\n      super();\n      const randomId = Math.floor(Math.random() * 900000) + 100000;\n      this._ariaControls = `cre8-accordion-item-details-${randomId}`;\n      this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${randomId}`;\n  }\n\n  override connectedCallback() {\n      super.connectedCallback();\n      this._setContentHeight();\n      if (this.isActive) {\n          this._fullyOpen = true;\n          this._setContentHeight();\n      }\n  }\n\n  private async _setContentHeight() {\n      await this.updateComplete;\n\n      if ((this.isActive && !this._fullyOpen) || (!this.isActive && this._fullyOpen)) {\n          this._height = `${this.shadowRoot?.querySelector('.cre8-c-accordion-item__body-inner')?.scrollHeight}px`;\n      } else if (this.isActive && this._fullyOpen) {\n          this._height = 'auto';\n      } else if (!this.isActive && !this._fullyOpen) {\n          this._height = '0';\n      }\n  }\n\n  private _toggleAccordionItem() {\n      this.isActive = !this.isActive;\n\n      if (this.isActive) {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = true;\n              this._setContentHeight();\n          }, 350);\n      } else {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = false;\n              this._setContentHeight();\n          }, 50);\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion-item', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-accordion-item--icon-before': this.iconBefore,\n          'cre8-c-accordion-item--small': this.size === 'sm',\n          'cre8-c-accordion-item--large': this.size === 'lg',\n      });\n\n      const buttonClassNames = classnames('cre8-c-accordion-item__button', {\n          'cre8-is-active': this.isActive,\n          'cre8-u-justify-content-start': this.iconBefore,\n          'cre8-brand-color': this.brandHeader === true,\n      });\n\n      return html` <div id=${this.accordionItemId} class=\"${componentClassNames}\">\n      <cre8-heading\n        type=${this.size === 'lg' ? 'title-large' : 'title-default'}\n        part=\"heading\"\n        ?brandColor=${(this.brandHeader)}\n        tagVariant=\"${this.headingTagVariant ?? 'h3'}\"\n        class=\"cre8-c-accordion-item__header\"\n      >\n        <button\n          class=\"${buttonClassNames}\"\n          aria-expanded=\"${ifDefined(this.isActive)}\"\n          aria-controls=\"${this._ariaControls}\"\n          part=\"button\"\n          role=\"button\"\n          id=\"${this.id}\"\n          @click=${this._toggleAccordionItem}\n        >\n          ${this.iconBefore\n        ? html`\n            <div class=\"cre8-c-accordion-item--icon-before-heading-text\">\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before'}\n                >\n                  <cre8-icon rotate=\"180\" svg=${svgCaretUp} aria-hidden=\"true\"></cre8-icon>\n                </div>\n                ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n            </div>\n              `\n        : html`\n          <div class=\"cre8-c-accordion-item--icon-after-heading-text\">\n            ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after'}\n                >\n                  <cre8-icon rotate=\"180\" svg='${svgCaretUp}' aria-hidden=\"true\"></cre8-icon>\n                </div>\n            </div>`}\n        </button>\n      </cre8-heading>\n      <div\n        class=\"cre8-c-accordion-item__body\"\n        aria-hidden=\"${!this.isActive}\"\n        id=\"${this._ariaControls}\"\n        part=\"body\"\n        style=${`height: ${this._height}`}\n      >\n        <div class=\"cre8-c-accordion-item__body-inner\" part=\"body-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-accordion-item') === undefined) {\n    customElements.define('cre8-accordion-item', Cre8AccordionItem);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion-item': Cre8AccordionItem;\n  }\n}\n\nexport default Cre8AccordionItem;\n"]}
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../components/accordion-item/accordion-item.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html,  } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport classnames from 'classnames';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport '../button/button';\nimport styles from './accordion-item.styles.js';\n\n/**\n *\n * The accordion item component delivers large amounts of content in a small space\n * through progressive disclosure. That is, the user gets key details about the\n * underlying content and can choose to expand that content within the constraints\n * of the accordion item. Accordion Items work especially well on mobile interfaces or\n * whenever vertical space is at a premium.\n *\n * ## HOW TO USE\n * Avoid “nested” accordion items—that is, collapsible content within collapsible content.\n * This type of pattern goes against UX best practices.\n *\n * The Cre8 accordion item header allows for two sizes:\n * 'sm' [cre8-typography-title-default] or 'lg' [cre8-typography-title-large]\n *\n * A chevron is used to indicate the “expand/collapse” action, though the entire\n * header area is clickable for the same action.\n *\n * **NOTE**: The header of the accordion item uses h tags so be sure to choose the headingTagVariant that\n * fits into the hierarchy of your html page layout. THIS WILL NOT CHANGE THE APPEARANCE OF THE HEADER.\n *\n * @slot The body of the accordion item will be any valid html\n * inserted between the cre8-accordion-item opening and closing tags.\n *\n *\n * @csspart ::part('header') - The container around the interactive header.\n * @csspart ::part('button') - The button containing the header text and the animated icon.\n * @csspart ::part('icon') - The animated icon that revolves on click.\n * @csspart ::part('body') - The container around the expanding body section.\n * @csspart ::part('body-inner') - The container around the slot into which any user provided HTML is inserted.\n *\n */\n\nexport class Cre8AccordionItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   *\n   * When true, the Accordion Item is opens, when false it closes;\n   * @prop {boolean} isActive\n   *\n   */\n\n  @property({ type: Boolean, reflect: true })\n      isActive? = false;\n\n\n  /**\n   *\n   * Optional custom id for the accordion item, if one is not set, a random id is generated for you.\n   * @prop {string} accordionItemId\n   *\n   *\n   */\n  @property({ type: String, reflect: true })\n      accordionItemId?: string;\n\n  /**\n   *\n   * Controls the positioning of the dropdown icon in relation to the text, true puts the icon before the text\n   * and false/undefined default the icon to the opposite side of the accordion item\n   * @prop {boolean} iconBefore\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      iconBefore?: boolean;\n\n  /**\n   *\n   * Controls the appearance  of dropdown icon as being an icon-only button. true renders the tertiary variant and\n   * false/undefined renders the default secondary appearance.\n   * @prop {boolean} tertiaryIcon\n   *\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      tertiaryIcon?: boolean;\n\n  /**\n   *\n   * Users can choose between two header sizes:  'sm' [title-default] or 'lg' [title-large].\n   * @prop {'sm' | 'lg'} size\n   *\n   *\n   */\n  @property({ reflect: true })\n      size: 'sm' | 'lg' = 'sm';\n\n  /**\n   *\n   * Purely meant to help the user structure the HTML page hierarchy. Does not change the\n   * header size. Defaults to 'h3'\n   * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} headingTagVariant\n   *\n   *\n   */\n\n  @property({ reflect: true })\n      headingTagVariant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  /**\n   *\n   * Controls the text content of the Accordion Item heading.\n   * @prop {string} heading\n   *\n   *\n   */\n  @property({ type: String })\n      heading!: string;\n\n  /**\n   *\n   * Controls whether the header takes on the theme's 'brand-strong' color\n   * @prop {boolean} brandHeader\n   *\n   *\n   */\n  @property({ type: Boolean })\n      brandHeader?: boolean;\n\n  /**\n   *\n   * The aria attribute to which is assigned the id of the details section which is revealed via interaction\n   * with the header.\n   * @private _ariaControls\n   *\n   *\n   */\n  @property({ attribute: 'aria-controls' })\n  private _ariaControls!: string;\n\n  /**\n   *\n   * Private internal state which indicates the current _height of the accordion item panel.\n   * @private _height\n   *\n   *\n   */\n  @state()\n  private _height!: string;\n\n  /**\n   *\n   * Private internal state which Indicates if the accordion item panel is completely open.\n   * @private _fullyOpen\n   *\n   *\n   */\n\n  @state()\n  private _fullyOpen?: boolean;\n\n  constructor() {\n      super();\n      const randomId = Math.floor(Math.random() * 900000) + 100000;\n      this._ariaControls = `cre8-accordion-item-details-${randomId}`;\n      this.accordionItemId = this.accordionItemId ?? `cre8-accordion-item-${randomId}`;\n  }\n\n  override connectedCallback() {\n      super.connectedCallback();\n      this._setContentHeight();\n      if (this.isActive) {\n          this._fullyOpen = true;\n          this._setContentHeight();\n      }\n  }\n\n  private async _setContentHeight() {\n      await this.updateComplete;\n\n      if ((this.isActive && !this._fullyOpen) || (!this.isActive && this._fullyOpen)) {\n          this._height = `${this.shadowRoot?.querySelector('.cre8-c-accordion-item__body-inner')?.scrollHeight}px`;\n      } else if (this.isActive && this._fullyOpen) {\n          this._height = 'auto';\n      } else if (!this.isActive && !this._fullyOpen) {\n          this._height = '0';\n      }\n  }\n\n  private _toggleAccordionItem() {\n      this.isActive = !this.isActive;\n\n      if (this.isActive) {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = true;\n              this._setContentHeight();\n          }, 350);\n      } else {\n          this._setContentHeight();\n          setTimeout(() => {\n              this._fullyOpen = false;\n              this._setContentHeight();\n          }, 50);\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion-item', {\n          'cre8-is-active': this.isActive,\n          'cre8-c-accordion-item--icon-before': this.iconBefore,\n          'cre8-c-accordion-item--small': this.size === 'sm',\n          'cre8-c-accordion-item--large': this.size === 'lg',\n      });\n\n      const buttonClassNames = classnames('cre8-c-accordion-item__button', {\n          'cre8-is-active': this.isActive,\n          'cre8-u-justify-content-start': this.iconBefore,\n          'cre8-brand-color': this.brandHeader === true,\n      });\n\n      return html` <div id=${this.accordionItemId} class=\"${componentClassNames}\">\n      <cre8-heading\n        type=${this.size === 'lg' ? 'title-large' : 'title-default'}\n        part=\"heading\"\n        ?brandColor=${(this.brandHeader)}\n        tagVariant=\"${this.headingTagVariant ?? 'h3'}\"\n        class=\"cre8-c-accordion-item__header\"\n      >\n        <button\n          class=\"${buttonClassNames}\"\n          aria-expanded=\"${ifDefined(this.isActive)}\"\n          aria-controls=\"${this._ariaControls}\"\n          part=\"button\"\n          role=\"button\"\n          id=\"${this.id}\"\n          @click=${this._toggleAccordionItem}\n        >\n          ${this.iconBefore\n        ? html`\n            <div class=\"cre8-c-accordion-item--icon-before-heading-text\">\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-before'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-before'}\n                >\n                  <cre8-icon rotate=\"180\" svg=${svgCaretUp} aria-hidden=\"true\"></cre8-icon>\n                </div>\n                ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n            </div>\n              `\n        : html`\n          <div class=\"cre8-c-accordion-item--icon-after-heading-text\">\n            ${this.heading ?? html` <slot name=\"heading\"></slot>`}\n                <div\n                  class=${this.tertiaryIcon\n        ? 'cre8-c-accordion-item__tertiary-icon cre8-c-accordion-item__icon-after'\n        : 'cre8-c-accordion-item__icon cre8-c-accordion-item__icon-after'}\n                >\n                  <cre8-icon rotate=\"180\" svg='${svgCaretUp}' aria-hidden=\"true\"></cre8-icon>\n                </div>\n            </div>`}\n        </button>\n      </cre8-heading>\n      <div\n        class=\"cre8-c-accordion-item__body\"\n        aria-hidden=\"${!this.isActive}\"\n        id=\"${this._ariaControls}\"\n        part=\"body\"\n        style=${`height: ${this._height}`}\n      >\n        <div class=\"cre8-c-accordion-item__body-inner\" part=\"body-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-accordion-item') === undefined) {\n    customElements.define('cre8-accordion-item', Cre8AccordionItem);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion-item': Cre8AccordionItem;\n  }\n}\n\nexport default Cre8AccordionItem;\n"]}

package/lib/components/alert/alert.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';
-import svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';
-import svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';
-import svgErrorFilled from '@tmorrow/cre8-wc/icons/System/Filled/Error.svg?raw';
-import svgLightbulbFilled from '@tmorrow/cre8-wc/icons/System/Filled/Lightbulb.svg?raw';
-import svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';
+import svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';
+import svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';
+import svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';
+import svgErrorFilled from '@tmorrow/cre8-wc/icons/Error_Filled.svg?raw';
+import svgLightbulbFilled from '@tmorrow/cre8-wc/icons/Lightbulb_Filled.svg?raw';
+import svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';
 import { html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../button/button';

package/lib/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":"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","sourcesContent":["import svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';\nimport svgErrorFilled from '@tmorrow/cre8-wc/icons/System/Filled/Error.svg?raw';\nimport svgLightbulbFilled from '@tmorrow/cre8-wc/icons/System/Filled/Lightbulb.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../button/button';\nimport '../link/link';\nimport '../heading/heading';\nimport '../text-passage/text-passage';\nimport '../icon/icon';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './alert.styles.js';\n\n/**\n * The general purpose of an alert or notification is to draw the user’s attention\n * and provide the user with timely, relevant information.\n *\n * ## Alert Styles:\n * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.\n * Each alert will have different icon to be displayed in the alert.\n * - Users can select two types of alert variants: 'standalone', or 'banner'.\n * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.\n * - User can add button or link in the alert.\n * If users choose to emphasize the alert (**strong**), user needs to used **\"inverted\"** prop in button or link.\n * - User can choose whether the alert can be dismissed or not\n *\n */\n\nexport class Cre8Alert extends Cre8Element {\n    static styles = [styles];\n\n    /** The alert type. */\n    @property({ reflect: true })\n    status?:\n        | 'error'\n        | 'info'\n        | 'notification'\n        | 'neutral'\n        | 'warning'\n        | 'success' = 'info';\n\n    /** The alert variant. */\n    @property({ reflect: true })\n    variant: 'standalone' | 'banner' = 'standalone';\n\n    @property({ reflect: true })\n    emphasis: 'subtle' | 'strong' = 'subtle';\n\n\n    @property({ type: String })\n    iconAlert: string = undefined;\n\n    /**\n     * Icon title used for the icon alt text\n     */\n    @property()\n    iconTitle?: string;\n\n    @property({ type: String })\n    headerText: string = undefined;\n\n    @property({ type: String })\n    ctaBody: string = undefined;\n\n    /**\n     * Dismissed property\n     * 1) State that changes to true and is removed when the banner is dismissed\n     */\n    @property({ type: Boolean, reflect: true })\n    dismissed?: boolean;\n\n    /**\n     * Dismissable property\n     * 1) Adds the ability to close when toggled to true\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * On banner dismiss\n     * 1) Function that toggles dismissed to true and removes the banner from the UI\n     */\n    onDismiss() {\n        this.dismissed = true; /* 1 */\n    }\n\n    private checkEmphasisAlert = () => {\n        if (this.emphasis === 'subtle') {\n            return false;\n        } return true;\n    };\n\n    private mapStatusToIconAlert = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon\n              svg=\"${svgErrorFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon\n              svg=\"${svgCheckCircle}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon\n              svg=\"${svgWarningFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'notification':\n                return html`<cre8-icon\n              svg=\"${svgLightbulbFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'neutral':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            default:\n                return nothing;\n        }\n    };\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-alert', {\n            'cre8-c-alert--error': this.status === 'error',\n            'cre8-c-alert--info': this.status === 'info',\n            'cre8-c-alert--notification': this.status === 'notification',\n            'cre8-c-alert--neutral': this.status === 'neutral',\n            'cre8-c-alert--success': this.status === 'success',\n            'cre8-c-alert--warning': this.status === 'warning',\n            'cre8-c-alert--standalone': this.variant === 'standalone',\n            'cre8-c-alert--banner': this.variant === 'banner',\n            'cre8-c-alert--emphasis-subtle': this.emphasis === 'subtle',\n            'cre8-c-alert--notdismissible': this.notDismissible,\n        });\n\n        return this.dismissed\n            ? null\n            : html`\n          <dialog open>\n            <div class=\"${componentClassNames}\">\n              <div class=\"cre8-c-alert__container\">\n                ${this.status\n                    ? html` ${this.mapStatusToIconAlert(this.status)}`\n                    : ''}\n                <div class=\"cre8-c-alert__message-container\">\n                  <div class=\"cre8-c-alert__heading-container\">\n                    ${this.headerText\n                    ? html`${this.headerText}`\n                    : ''}\n                    ${this.notDismissible\n                    ? ''\n                    : html`<cre8-button\n                     class=\"cre8-c-alert__close-btn\"\n                     svg=${svgClose}\n                     iconRotateDegree=\"90\"\n                     iconPosition=\"after\"\n                     variant=\"tertiary\"\n                     aria-label=\"close\"\n                     ?hideText=${true}\n                     @click=${this.onDismiss}\n                     ?inverted=${this.checkEmphasisAlert()}\n              ></cre8-button>`}\n                  </div>\n                  <div class=\"cre8-c-alert__body-container\">\n                    <slot></slot>\n                  </div>\n                  <div class=\"cre8-c-alert__footer-container\">\n                        <slot name=\"cta\">${this.ctaBody}</slot>\n                      </div>\n                </div>\n              </div>\n            </div>\n          </dialog>\n        `;\n    }\n}\n\nif (customElements.get('cre8-alert') === undefined) {\n    customElements.define('cre8-alert', Cre8Alert);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-alert': Cre8Alert;\n    }\n}\n\nexport default Cre8Alert;\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":"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","sourcesContent":["import svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgErrorFilled from '@tmorrow/cre8-wc/icons/Error_Filled.svg?raw';\nimport svgLightbulbFilled from '@tmorrow/cre8-wc/icons/Lightbulb_Filled.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../button/button';\nimport '../link/link';\nimport '../heading/heading';\nimport '../text-passage/text-passage';\nimport '../icon/icon';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './alert.styles.js';\n\n/**\n * The general purpose of an alert or notification is to draw the user’s attention\n * and provide the user with timely, relevant information.\n *\n * ## Alert Styles:\n * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.\n * Each alert will have different icon to be displayed in the alert.\n * - Users can select two types of alert variants: 'standalone', or 'banner'.\n * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.\n * - User can add button or link in the alert.\n * If users choose to emphasize the alert (**strong**), user needs to used **\"inverted\"** prop in button or link.\n * - User can choose whether the alert can be dismissed or not\n *\n */\n\nexport class Cre8Alert extends Cre8Element {\n    static styles = [styles];\n\n    /** The alert type. */\n    @property({ reflect: true })\n    status?:\n        | 'error'\n        | 'info'\n        | 'notification'\n        | 'neutral'\n        | 'warning'\n        | 'success' = 'info';\n\n    /** The alert variant. */\n    @property({ reflect: true })\n    variant: 'standalone' | 'banner' = 'standalone';\n\n    @property({ reflect: true })\n    emphasis: 'subtle' | 'strong' = 'subtle';\n\n\n    @property({ type: String })\n    iconAlert: string = undefined;\n\n    /**\n     * Icon title used for the icon alt text\n     */\n    @property()\n    iconTitle?: string;\n\n    @property({ type: String })\n    headerText: string = undefined;\n\n    @property({ type: String })\n    ctaBody: string = undefined;\n\n    /**\n     * Dismissed property\n     * 1) State that changes to true and is removed when the banner is dismissed\n     */\n    @property({ type: Boolean, reflect: true })\n    dismissed?: boolean;\n\n    /**\n     * Dismissable property\n     * 1) Adds the ability to close when toggled to true\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * On banner dismiss\n     * 1) Function that toggles dismissed to true and removes the banner from the UI\n     */\n    onDismiss() {\n        this.dismissed = true; /* 1 */\n    }\n\n    private checkEmphasisAlert = () => {\n        if (this.emphasis === 'subtle') {\n            return false;\n        } return true;\n    };\n\n    private mapStatusToIconAlert = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon\n              svg=\"${svgErrorFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon\n              svg=\"${svgCheckCircle}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon\n              svg=\"${svgWarningFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'notification':\n                return html`<cre8-icon\n              svg=\"${svgLightbulbFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            case 'neutral':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            default:\n                return nothing;\n        }\n    };\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-alert', {\n            'cre8-c-alert--error': this.status === 'error',\n            'cre8-c-alert--info': this.status === 'info',\n            'cre8-c-alert--notification': this.status === 'notification',\n            'cre8-c-alert--neutral': this.status === 'neutral',\n            'cre8-c-alert--success': this.status === 'success',\n            'cre8-c-alert--warning': this.status === 'warning',\n            'cre8-c-alert--standalone': this.variant === 'standalone',\n            'cre8-c-alert--banner': this.variant === 'banner',\n            'cre8-c-alert--emphasis-subtle': this.emphasis === 'subtle',\n            'cre8-c-alert--notdismissible': this.notDismissible,\n        });\n\n        return this.dismissed\n            ? null\n            : html`\n          <dialog open>\n            <div class=\"${componentClassNames}\">\n              <div class=\"cre8-c-alert__container\">\n                ${this.status\n                    ? html` ${this.mapStatusToIconAlert(this.status)}`\n                    : ''}\n                <div class=\"cre8-c-alert__message-container\">\n                  <div class=\"cre8-c-alert__heading-container\">\n                    ${this.headerText\n                    ? html`${this.headerText}`\n                    : ''}\n                    ${this.notDismissible\n                    ? ''\n                    : html`<cre8-button\n                     class=\"cre8-c-alert__close-btn\"\n                     svg=${svgClose}\n                     iconRotateDegree=\"90\"\n                     iconPosition=\"after\"\n                     variant=\"tertiary\"\n                     aria-label=\"close\"\n                     ?hideText=${true}\n                     @click=${this.onDismiss}\n                     ?inverted=${this.checkEmphasisAlert()}\n              ></cre8-button>`}\n                  </div>\n                  <div class=\"cre8-c-alert__body-container\">\n                    <slot></slot>\n                  </div>\n                  <div class=\"cre8-c-alert__footer-container\">\n                        <slot name=\"cta\">${this.ctaBody}</slot>\n                      </div>\n                </div>\n              </div>\n            </div>\n          </dialog>\n        `;\n    }\n}\n\nif (customElements.get('cre8-alert') === undefined) {\n    customElements.define('cre8-alert', Cre8Alert);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-alert': Cre8Alert;\n    }\n}\n\nexport default Cre8Alert;\n"]}

package/lib/components/badge/badge.d.ts

@@ -47,7 +47,7 @@ export declare class Cre8Badge extends Cre8Element {
      * SVG as a raw string
      * - For badges with icons, the icon is defined by this prop
      * - Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do
-     * - Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/System/Regular/Feedback.svg?raw';`
+     * - Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/Feedback.svg?raw';`
      * - [cre8-icons Github repo](https://git.express-scripts.com/ExpressScripts/cre8-icons) This is the Github
      * repo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons
      */

package/lib/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAEtB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAN,IAAY,MAEX;AAFD,WAAY,MAAM;IACjB,qCAAO,CAAA;IAAE,yCAAS,CAAA;IAAE,yCAAS,CAAA;IAAE,mCAAM,CAAA;IAAE,6CAAW,CAAA;IAAE,6CAAS,CAAA;AAC9D,CAAC,EAFW,MAAM,KAAN,MAAM,QAEjB;AACD,MAAM,CAAN,IAAY,OAEX;AAFD,WAAY,OAAO;IACjB,uCAAO,CAAA;IAAE,uCAAO,CAAA;IAAE,+CAAS,CAAA;AAC7B,CAAC,EAFW,OAAO,KAAP,OAAO,QAElB;AAED;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QAGE;;WAEG;QAEC,SAAI,GAAW,SAAS,CAAC;IAqD/B,CAAC;IAlBC,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,cAAc,EAAE;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;YACtD,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/C,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAClD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,kBAAkB;UACxC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;mBACN,IAAI,CAAC,GAAG;qBACN,CAAC,CAAC,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI;gBACH,CAAC;IACf,CAAC;;AA1DQ,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACE;AAYzB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACR;AAUf;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACP;AAWhB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACV;AAsBnB,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\n\nimport styles from './badge.styles.js';\n\nexport enum status {\n 'error', 'warning', 'success', 'info', 'attention', undefined\n}\nexport enum variant {\n  'light', 'white', undefined\n}\n\n/**\n * Status badges are used most often in tables or fat rows in a list.\n * These Components serve a contextual purpose and don't provide any functionality.\n * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.\n *\n */\nexport class Cre8Badge extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The badge text\n   */\n  @property({ type: String })\n      text: string = undefined;\n\n  /**\n   * Status (a color variant prop)\n   * - **neutral** (default) renders a badge with a neutral state treatment\n   * - **success** renders a badge with success state treatment\n   * - **warning** renders a badge with warning state treatment\n   * - **error** renders a badge with error state treatment\n   * - **info** renders a badge with information state treatment\n   * - **attention** renders a badge with attention state treatment\n   */\n  @property({ type: String })\n      status: string;\n\n  /**\n   * Background Style Variant\n   *\n   * - **dark|undefined** (default) renders a badge with a dark background\n   * - **light** renders a badge with a light background\n   * - **white** renders a badge with a white background\n   */\n  @property({ type: String })\n      variant: string;\n\n  /**\n   * SVG as a raw string\n   * - For badges with icons, the icon is defined by this prop\n   * - Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do\n   * - Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/System/Regular/Feedback.svg?raw';`\n   * - [cre8-icons Github repo](https://git.express-scripts.com/ExpressScripts/cre8-icons) This is the Github\n   * repo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons\n   */\n  @property({ type: String })\n      svg?: string;\n\n  render() {\n      const componentClassName = classnames('cre8-c-badge', {\n          'cre8-c-badge--success': this.status === 'success',\n          'cre8-c-badge--warning': this.status === 'warning',\n          'cre8-c-badge--error': this.status === 'error',\n          'cre8-c-badge--info': this.status === 'info',\n          'cre8-c-badge--attention': this.status === 'attention',\n          'cre8-c-badge--light': this.variant === 'light',\n          'cre8-c-badge--white': this.variant === 'white',\n      });\n\n      return html`<div class=\"${componentClassName}\">\n        ${this.svg ? html` <cre8-icon \n            svg='${this.svg}' aria-hidden='true'></cre8-icon>\n        </cre8-icon>` : ''} \n        ${this.text} \n        </div> `;\n  }\n}\n\nif (customElements.get('cre8-badge') === undefined) {\n    customElements.define('cre8-badge', Cre8Badge);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-badge': Cre8Badge;\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAEtB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAN,IAAY,MAEX;AAFD,WAAY,MAAM;IACjB,qCAAO,CAAA;IAAE,yCAAS,CAAA;IAAE,yCAAS,CAAA;IAAE,mCAAM,CAAA;IAAE,6CAAW,CAAA;IAAE,6CAAS,CAAA;AAC9D,CAAC,EAFW,MAAM,KAAN,MAAM,QAEjB;AACD,MAAM,CAAN,IAAY,OAEX;AAFD,WAAY,OAAO;IACjB,uCAAO,CAAA;IAAE,uCAAO,CAAA;IAAE,+CAAS,CAAA;AAC7B,CAAC,EAFW,OAAO,KAAP,OAAO,QAElB;AAED;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QAGE;;WAEG;QAEC,SAAI,GAAW,SAAS,CAAC;IAqD/B,CAAC;IAlBC,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,cAAc,EAAE;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;YACtD,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/C,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAClD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,kBAAkB;UACxC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;mBACN,IAAI,CAAC,GAAG;qBACN,CAAC,CAAC,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI;gBACH,CAAC;IACf,CAAC;;AA1DQ,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACE;AAYzB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACR;AAUf;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACP;AAWhB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACV;AAsBnB,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\n\nimport styles from './badge.styles.js';\n\nexport enum status {\n 'error', 'warning', 'success', 'info', 'attention', undefined\n}\nexport enum variant {\n  'light', 'white', undefined\n}\n\n/**\n * Status badges are used most often in tables or fat rows in a list.\n * These Components serve a contextual purpose and don't provide any functionality.\n * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.\n *\n */\nexport class Cre8Badge extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The badge text\n   */\n  @property({ type: String })\n      text: string = undefined;\n\n  /**\n   * Status (a color variant prop)\n   * - **neutral** (default) renders a badge with a neutral state treatment\n   * - **success** renders a badge with success state treatment\n   * - **warning** renders a badge with warning state treatment\n   * - **error** renders a badge with error state treatment\n   * - **info** renders a badge with information state treatment\n   * - **attention** renders a badge with attention state treatment\n   */\n  @property({ type: String })\n      status: string;\n\n  /**\n   * Background Style Variant\n   *\n   * - **dark|undefined** (default) renders a badge with a dark background\n   * - **light** renders a badge with a light background\n   * - **white** renders a badge with a white background\n   */\n  @property({ type: String })\n      variant: string;\n\n  /**\n   * SVG as a raw string\n   * - For badges with icons, the icon is defined by this prop\n   * - Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do\n   * - Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/Feedback.svg?raw';`\n   * - [cre8-icons Github repo](https://git.express-scripts.com/ExpressScripts/cre8-icons) This is the Github\n   * repo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons\n   */\n  @property({ type: String })\n      svg?: string;\n\n  render() {\n      const componentClassName = classnames('cre8-c-badge', {\n          'cre8-c-badge--success': this.status === 'success',\n          'cre8-c-badge--warning': this.status === 'warning',\n          'cre8-c-badge--error': this.status === 'error',\n          'cre8-c-badge--info': this.status === 'info',\n          'cre8-c-badge--attention': this.status === 'attention',\n          'cre8-c-badge--light': this.variant === 'light',\n          'cre8-c-badge--white': this.variant === 'white',\n      });\n\n      return html`<div class=\"${componentClassName}\">\n        ${this.svg ? html` <cre8-icon \n            svg='${this.svg}' aria-hidden='true'></cre8-icon>\n        </cre8-icon>` : ''} \n        ${this.text} \n        </div> `;\n  }\n}\n\nif (customElements.get('cre8-badge') === undefined) {\n    customElements.define('cre8-badge', Cre8Badge);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-badge': Cre8Badge;\n  }\n}\n"]}

package/lib/components/breadcrumbs-item/breadcrumbs-item.js

@@ -1,4 +1,4 @@
-import svgCaretRight from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';
+import svgCaretRight from '@tmorrow/cre8-wc/icons/Caret_Right.svg?raw';
 import { html, } from 'lit';
 import { Cre8Element } from '../cre8-element';
 import '../icon/icon';

package/lib/components/breadcrumbs-item/breadcrumbs-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs-item.js","sourceRoot":"","sources":["../../../components/breadcrumbs-item/breadcrumbs-item.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,2DAA2D,CAAC;AACtF,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,WAAW;IAGhD,yDAAyD;IACzD,sEAAsE;IACtE,iBAAiB;QACb,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAChD,0BAA0B,EAC1B,EAAE,CACL,CAAC;QAEF,OAAO,IAAI,CAAA;oBACC,mBAAmB;;;iBAGtB,aAAa;;;;;;;;KAQzB,CAAC;IACF,CAAC;;AA5BM,0BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AA+B7B,IAAI,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;AACxE,CAAC;AAQD,eAAe,mBAAmB,CAAC","sourcesContent":["import svgCaretRight from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';\nimport { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './breadcrumbs-item.styles.js';\n\n/**\n * @slot - The component content, the expected slotted content is a Cre8 Link or a String for the \"terminal node\"\n */\nexport class Cre8BreadcrumbsItem extends Cre8Element {\n    static styles = [styles];\n\n    // Set the role before rendering for better accessibility\n    // Because we're settting this role, we don't wrap the slot in an <li>\n    connectedCallback() {\n        this.setAttribute('role', 'listitem');\n        super.connectedCallback();\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames(\n            'cre8-c-breadcrumbs--item',\n            {}\n        );\n\n        return html`\n      <div class=\"${componentClassNames}\">\n        <slot></slot>\n        <cre8-icon\n          svg=\"${svgCaretRight}\"\n          rotate=\"90\"\n          container-class=\"cre8-c-icon-wrapper\"\n          aria-hidden=\"true\"\n          class=\"cre8-c-icon-wrapper\"\n        >\n        </cre8-icon>\n      </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-breadcrumbs-item') === undefined) {\n    customElements.define('cre8-breadcrumbs-item', Cre8BreadcrumbsItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-breadcrumbs-item': Cre8BreadcrumbsItem;\n  }\n}\n\nexport default Cre8BreadcrumbsItem;\n"]}
+{"version":3,"file":"breadcrumbs-item.js","sourceRoot":"","sources":["../../../components/breadcrumbs-item/breadcrumbs-item.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,mBAAoB,SAAQ,WAAW;IAGhD,yDAAyD;IACzD,sEAAsE;IACtE,iBAAiB;QACb,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAChD,0BAA0B,EAC1B,EAAE,CACL,CAAC;QAEF,OAAO,IAAI,CAAA;oBACC,mBAAmB;;;iBAGtB,aAAa;;;;;;;;KAQzB,CAAC;IACF,CAAC;;AA5BM,0BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AA+B7B,IAAI,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;AACxE,CAAC;AAQD,eAAe,mBAAmB,CAAC","sourcesContent":["import svgCaretRight from '@tmorrow/cre8-wc/icons/Caret_Right.svg?raw';\nimport { html,  } from 'lit';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './breadcrumbs-item.styles.js';\n\n/**\n * @slot - The component content, the expected slotted content is a Cre8 Link or a String for the \"terminal node\"\n */\nexport class Cre8BreadcrumbsItem extends Cre8Element {\n    static styles = [styles];\n\n    // Set the role before rendering for better accessibility\n    // Because we're settting this role, we don't wrap the slot in an <li>\n    connectedCallback() {\n        this.setAttribute('role', 'listitem');\n        super.connectedCallback();\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames(\n            'cre8-c-breadcrumbs--item',\n            {}\n        );\n\n        return html`\n      <div class=\"${componentClassNames}\">\n        <slot></slot>\n        <cre8-icon\n          svg=\"${svgCaretRight}\"\n          rotate=\"90\"\n          container-class=\"cre8-c-icon-wrapper\"\n          aria-hidden=\"true\"\n          class=\"cre8-c-icon-wrapper\"\n        >\n        </cre8-icon>\n      </div>\n    `;\n    }\n}\n\nif (customElements.get('cre8-breadcrumbs-item') === undefined) {\n    customElements.define('cre8-breadcrumbs-item', Cre8BreadcrumbsItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-breadcrumbs-item': Cre8BreadcrumbsItem;\n  }\n}\n\nexport default Cre8BreadcrumbsItem;\n"]}

package/lib/components/checkbox-field-item/checkbox-field-item.js

@@ -10,7 +10,7 @@ import { property, query } from 'lit/decorators.js';
 import { nanoid } from 'nanoid';
 import '../icon/icon';
 import '../field-note/field-note';
-import svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';
+import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';
 import styles from './checkbox-field-item.styles.js';
 import { Cre8FormElement } from '../cre8-form-element';
 /**

package/lib/components/checkbox-field-item/checkbox-field-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field-item.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAClC,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,MAAM,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,qBAAsB,SAAQ,eAAe;IAA1D;;QACa,SAAI,GAAG,UAAU,CAAC;QAiB3B;;;WAGG;QAEH,cAAS,GAAW,OAAO,CAAC;QAe5B;;WAEG;QAEH,gBAAW,GAAW,SAAS,CAAC;IAmQpC,CAAC;IA5LG;;;;;;;MAOE;IAEF,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,OAAO;QAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO;IAC7C,CAAC;IAED;;OAEG;IACK,OAAO;QACX,MAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACnE,IAAI,sBAAsB,EAAE,CAAC;YACzB,OAAO,UAAU,CAAC;QACtB,CAAC;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAED;;;;OAIG;IACK,WAAW;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;IACxH,CAAC;IAED;;;OAGG;IACK,aAAa;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO;QACrC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAChH,CAAC;IAED;;;;OAIG;IACK,eAAe,CAAC,CAAQ;QAC5B,OAAO;QACP,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAC7C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEzC,OAAO;QACP,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC1C,MAAM,EAAE;gBACJ,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED;;;;;;OAMG;IACH,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO;QACzC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO;QAC/C,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,YAAY;QACR,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO;QAC9B,OAAO,KAAK,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAED;;OAEG;IACH,cAAc;QACV,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;QACxC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,EAAE,CAAC;QAC5D,CAAC;QACD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACrC,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,IAAI,MAAM,EAAE,CAAC;QAChF,CAAC;IACL,CAAC;IAED;;;;;;;OAOG;IACH,aAAa;QACT,IAAI,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzD,OAAO,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC,OAAO;QAC/E,CAAC;QAAC,IAAI,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAC,yBAAyB,CAAC,CAAC,OAAO;QAClD,CAAC;QACD,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO;IACxC,CAAC;IAED;;;;OAIG;IACH,2BAA2B;QACvB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,OAAO;YACP,OAAO,IAAI,CAAA;qBACF,IAAI,CAAC,SAAS;aACtB,IAAI,CAAC,yBAAyB;;;;4CAIC,IAAI,CAAC,WAAW,WAAW,IAAI,CAAC,WAAW;yBAC9D,CAAC;QAClB,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,OAAO;YACP,OAAO,IAAI,CAAA;mBACJ,IAAI,CAAC,OAAO;aAClB,IAAI,CAAC,yBAAyB;;;;4CAIC,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,SAAS;yBAC1D,CAAC;QAClB,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,4BAA4B,EAAE;YAC/E,mCAAmC,EAAE,IAAI,CAAC,OAAO;YACjD,qCAAqC,EAAE,IAAI,CAAC,SAAS;YACrD,sCAAsC,EAAE,IAAI,CAAC,QAAQ;SACxD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;kBACD,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,WAAW,mBAAmB;;;mBAGtD,IAAI,CAAC,aAAa;eACtB,IAAI,CAAC,OAAO;iBACV,IAAI,CAAC,IAAI,IAAI,SAAS;mBACpB,IAAI,CAAC,KAAK;qBACR,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;yBACpB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;sBAC3D,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;8BAC5C,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;sBACvC,IAAI,CAAC,OAAO;oBACd,IAAI,CAAC,eAAe;;;4BAGZ,QAAQ;yBACX,CAAC,IAAI,CAAC,OAAO;;+DAEyB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK;;QAEjF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,eAAe;wCACzB,IAAI,CAAC,SAAS;cACxC;YACE,CAAC,CAAC,OACN;UACF,IAAI,CAAC,2BAA2B,EAAE;KACvC,CAAC;IACF,CAAC;;AAzSM,4BAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACZ;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACzB;AAOlB;IADC,QAAQ,EAAE;wDACiB;AAM5B;IADC,QAAQ,EAAE;wDACQ;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACvB;AAMpB;IADC,QAAQ,EAAE;0DACqB;AAMhC;IADC,QAAQ,EAAE;0DACU;AAOrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACxB;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACzB;AAOlB;IADC,QAAQ,EAAE;sDACM;AAMjB;IADC,QAAQ,EAAE;wDACQ;AAOnB;IADC,QAAQ,EAAE;8DACc;AAMzB;IADC,QAAQ,EAAE;wEACwB;AASnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACxB;AAMnB;IADC,QAAQ,EAAE;gEACgB;AAM3B;IADC,KAAK,CAAC,OAAO,CAAC;oDACU;AAkM7B,IAAI,cAAc,CAAC,GAAG,CAAC,0BAA0B,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/D,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,CAAC;AAC7E,CAAC;AAQD,eAAe,qBAAqB,CAAC","sourcesContent":["import { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../icon/icon';\nimport '../field-note/field-note';\nimport svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';\nimport styles from './checkbox-field-item.styles.js';\nimport { Cre8FormElement } from '../cre8-form-element';\n\n/**\n * Checkbox Field Item is the combination of a checkbox input, label and field note.\n * Checkboxes can turn an option on or off.\n *\n * Checkboxes should be used when the user is allowed to select one, none or multiple options\n * OR to \"opt-in\" (ex. I would like to receive the newsletter by email)\n * or as a required acknowledgement(ex. I've read the Terms and Conditions).\n * If the user can only chose one option from many, use `radio-field-item`.\n *\n * ## How to Use\n *\n * - A checkbox is independent of all other checkboxes in the list,\n *   so checking one box should not uncheck the others in the group.\n * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.\n * - Avoid disabled and read-only states as much as possible.\n *\n * ## Universal Form Field Rules\n * - Unless indicated with the \"(Optional)\" label, all fields are assumed required.\n *   Minimize the number of optional fields to keep forms as short as possible.\n * - Always include a label written in sentence case.\n * - Avoid using the read-only and disabled states as much as possible.\n */\nexport class Cre8CheckboxFieldItem extends Cre8FormElement {\n    readonly type = 'checkbox';\n\n    static styles = [styles];\n\n    /**\n     * The checkbox label\n     */\n    @property({ type: String })\n    label?: string;\n\n    /**\n     * Changes the component's treatment to represent an error state\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    isError?: boolean;\n\n    /**\n     * Visually hidden text that always signifies that this is an error for screen reader usage\n     * @attr {string}\n     */\n    @property()\n    errorText: string = 'Error';\n\n    /**\n     * The error field note that appears below the default field note\n     */\n    @property()\n    errorNote?: string;\n\n    /**\n     * Changes the component's treatment to represent a success state\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    isSuccess?: boolean;\n\n    /**\n     * Visually hidden text that always signifies that this is successful for screen reader usage\n     */\n    @property()\n    successText: string = 'Success';\n\n    /**\n     * The success field note that appears below the default field note\n     */\n    @property()\n    successNote?: string;\n\n    /**\n     * Disabled State\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * Checked State\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    checked?: boolean;\n\n    /**\n     * Checkbox FieldId\n     * @attr {string}\n     */\n    @property()\n    fieldId?: string;\n\n    /**\n     * Checkbox FieldNote\n     */\n    @property()\n    fieldNote?: string;\n\n    /**\n     * Checkbox fieldnote ariaDescribeBy\n     * @attr {string}\n     */\n    @property()\n    ariaDescribedBy?: string;\n\n    /**\n     * Additional aria-describedby connection to id for additional success and error notes to be accessible\n     */\n    @property()\n    validationAriaDescribedBy?: string;\n\n\n\n    /**\n     * Required property\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    required?: boolean;\n\n    /**\n     * Checkbox fieldnote icon name\n     */\n    @property()\n    fieldNoteIconName?: string;\n\n    /**\n     * Get the input element within the shadow root and set it to this.field\n     */\n    @query('input')\n    field!: HTMLInputElement;\n\n    protected override defaultValue: boolean;\n\n    /**\n     * Connected callback lifecycle\n     * 1) Set the fieldID to a random string if not provided so form is always accessible\n     * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property\n     * or a random string to always make the form field accessible.\n     * 3) Set the form internal data to set that to the default checked state.\n     * 4) Set the default value of the checkbox field item to the checked property\n    */\n\n    connectedCallback() {\n        super.connectedCallback();\n        this.setFormData(); /* 3 */\n        this.defaultValue = this.checked; /* 4 */\n    }\n\n    /**\n     * access role when check-box-field-item embedded in checkbox-field\n     */\n    private getRole() {\n        const checkboxFieldContainer = this.closest('cre8-checkbox-field');\n        if (checkboxFieldContainer) {\n            return 'listitem';\n        }\n        return '';\n    }\n\n    /**\n     * Set form data\n     * 1) If a checked property is provided, set the form value the checkbox value attribute.\n     * Otherwise, don't provide a value for the checkbox data array\n     */\n    private setFormData() {\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null); /* 1 */\n    }\n\n    /**\n     * Handle on checkbox change\n     * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.\n     */\n    private _clickHandler() {\n        this.checked = !this.checked; /* 2 */\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n    }\n\n    /**\n     * Handle On Change\n     * 1. Set the value when the select is changed.\n     * 2. Fire the custom event with the current value.\n     */\n    private _handleOnChange(e: Event) {\n        /* 1 */\n        const target = e.target as HTMLSelectElement;\n        this.value = target.value;\n        this._internals.setFormValue(this.value);\n\n        /* 2 */\n        const customEvent = new CustomEvent('change', {\n            detail: {\n                name: this.name,\n                value: this.value,\n            },\n            bubbles: true,\n            composed: true,\n        });\n        this.dispatchEvent(customEvent);\n    }\n\n    /**\n     * Form reset callback\n     * 1) Set checked property to the default value and then set the input's checked attribute to that default value\n     * 2) Set the input's checked attribute to that default value\n     * 3) Set the element internals form data when the form is reset\n     * 4) Change the new value to the old value on reset\n     */\n    formResetCallback(): void {\n        this.checked = this.defaultValue; /* 1 */\n        this.field.checked = this.defaultValue; /* 2 */\n        this.setFormData();\n        this.requestUpdate();\n    }\n\n    /**\n     * First update lifecycle hook\n     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n     */\n    firstUpdated() {\n        this.initializeAria(); /* 1 */\n        return super.firstUpdated();\n    }\n\n    /**\n     * Initialize aria attributes\n     */\n    initializeAria() {\n        this.fieldId = this.fieldId || nanoid();\n        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n            this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n        }\n        if (this.successNote || this.errorNote) {\n            this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n        }\n    }\n\n    /**\n     * Aria describedby string based on field notes and error/success notes\n     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n     * render both in the input's `aria-describedby` attribute\n     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n     */\n    fieldNoteAria(): string {\n        if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n            return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n        } if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n            return this.validationAriaDescribedBy; /* 2 */\n        }\n        return this.ariaDescribedBy; /* 3 */\n    }\n\n    /**\n     * Render the success or error field notes\n     * 1. If there is a successNote, then return the field note with the success message and state.\n     * 2. If there is a errorNote, then return the field note with the error message and state.\n     */\n    renderSuccessErrorFieldNote() {\n        if (this.successNote) {\n            /* 1 */\n            return html`<cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-checkbox-field-item__field-note-success\"\n        iconName=\"success\"\n      >\n        <span class=\"cre8-u-is-vishidden\">${this.successText}</span> ${this.successNote}\n      </cre8-field-note>`;\n        }\n        if (this.errorNote) {\n            /* 2 */\n            return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-checkbox-field-item__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        <span class=\"cre8-u-is-vishidden\">${this.errorText}</span> ${this.errorNote}\n      </cre8-field-note>`;\n        }\n        return null;\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-checkbox-field-item', {\n            'cre8-c-checkbox-field-item--error': this.isError,\n            'cre8-c-checkbox-field-item--success': this.isSuccess,\n            'cre8-c-checkbox-field-item--disabled': this.disabled,\n        });\n\n        return html`\n      <div role=${ifDefined(this.getRole())} class=\"${componentClassNames}\">\n        <input class=\"cre8-c-checkbox-field-item__input\"\n          type=\"checkbox\"\n          @input=${this._clickHandler}\n          id=${this.fieldId}\n          name=${this.name ?? undefined}\n          .value=${this.value}\n          required=${ifDefined(this.required)}\n          aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}\n          disabled=\"${ifDefined(this.disabled ? this.disabled : undefined)}\"\n          aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n          .checked=\"${this.checked}\"\n          @change=${this._handleOnChange}\n        />\n        <span class=\"cre8-c-checkbox-field-item__custom-checkbox\">\n          <cre8-icon svg='${svgCheck}' class=\"cre8-c-checkbox-field-item__icon\" aria-label=\"checkbox\"\n          aria-hidden=\"${!this.checked}\"></cre8-icon>\n        </span>\n        <label class=\"cre8-c-checkbox-field-item__label\" for=${this.fieldId}>${this.label}</label>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n                ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-checkbox-field-item__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n                : nothing\n            }\n        ${this.renderSuccessErrorFieldNote()}\n    `;\n    }\n}\n\nif (customElements.get('cre8-checkbox-field-item') === undefined) {\n    customElements.define('cre8-checkbox-field-item', Cre8CheckboxFieldItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-checkbox-field-item': Cre8CheckboxFieldItem;\n    }\n}\n\nexport default Cre8CheckboxFieldItem;\n"]}
+{"version":3,"file":"checkbox-field-item.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../icon/icon';\nimport '../field-note/field-note';\nimport svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport styles from './checkbox-field-item.styles.js';\nimport { Cre8FormElement } from '../cre8-form-element';\n\n/**\n * Checkbox Field Item is the combination of a checkbox input, label and field note.\n * Checkboxes can turn an option on or off.\n *\n * Checkboxes should be used when the user is allowed to select one, none or multiple options\n * OR to \"opt-in\" (ex. I would like to receive the newsletter by email)\n * or as a required acknowledgement(ex. I've read the Terms and Conditions).\n * If the user can only chose one option from many, use `radio-field-item`.\n *\n * ## How to Use\n *\n * - A checkbox is independent of all other checkboxes in the list,\n *   so checking one box should not uncheck the others in the group.\n * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.\n * - Avoid disabled and read-only states as much as possible.\n *\n * ## Universal Form Field Rules\n * - Unless indicated with the \"(Optional)\" label, all fields are assumed required.\n *   Minimize the number of optional fields to keep forms as short as possible.\n * - Always include a label written in sentence case.\n * - Avoid using the read-only and disabled states as much as possible.\n */\nexport class Cre8CheckboxFieldItem extends Cre8FormElement {\n    readonly type = 'checkbox';\n\n    static styles = [styles];\n\n    /**\n     * The checkbox label\n     */\n    @property({ type: String })\n    label?: string;\n\n    /**\n     * Changes the component's treatment to represent an error state\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    isError?: boolean;\n\n    /**\n     * Visually hidden text that always signifies that this is an error for screen reader usage\n     * @attr {string}\n     */\n    @property()\n    errorText: string = 'Error';\n\n    /**\n     * The error field note that appears below the default field note\n     */\n    @property()\n    errorNote?: string;\n\n    /**\n     * Changes the component's treatment to represent a success state\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    isSuccess?: boolean;\n\n    /**\n     * Visually hidden text that always signifies that this is successful for screen reader usage\n     */\n    @property()\n    successText: string = 'Success';\n\n    /**\n     * The success field note that appears below the default field note\n     */\n    @property()\n    successNote?: string;\n\n    /**\n     * Disabled State\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * Checked State\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    checked?: boolean;\n\n    /**\n     * Checkbox FieldId\n     * @attr {string}\n     */\n    @property()\n    fieldId?: string;\n\n    /**\n     * Checkbox FieldNote\n     */\n    @property()\n    fieldNote?: string;\n\n    /**\n     * Checkbox fieldnote ariaDescribeBy\n     * @attr {string}\n     */\n    @property()\n    ariaDescribedBy?: string;\n\n    /**\n     * Additional aria-describedby connection to id for additional success and error notes to be accessible\n     */\n    @property()\n    validationAriaDescribedBy?: string;\n\n\n\n    /**\n     * Required property\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    required?: boolean;\n\n    /**\n     * Checkbox fieldnote icon name\n     */\n    @property()\n    fieldNoteIconName?: string;\n\n    /**\n     * Get the input element within the shadow root and set it to this.field\n     */\n    @query('input')\n    field!: HTMLInputElement;\n\n    protected override defaultValue: boolean;\n\n    /**\n     * Connected callback lifecycle\n     * 1) Set the fieldID to a random string if not provided so form is always accessible\n     * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property\n     * or a random string to always make the form field accessible.\n     * 3) Set the form internal data to set that to the default checked state.\n     * 4) Set the default value of the checkbox field item to the checked property\n    */\n\n    connectedCallback() {\n        super.connectedCallback();\n        this.setFormData(); /* 3 */\n        this.defaultValue = this.checked; /* 4 */\n    }\n\n    /**\n     * access role when check-box-field-item embedded in checkbox-field\n     */\n    private getRole() {\n        const checkboxFieldContainer = this.closest('cre8-checkbox-field');\n        if (checkboxFieldContainer) {\n            return 'listitem';\n        }\n        return '';\n    }\n\n    /**\n     * Set form data\n     * 1) If a checked property is provided, set the form value the checkbox value attribute.\n     * Otherwise, don't provide a value for the checkbox data array\n     */\n    private setFormData() {\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null); /* 1 */\n    }\n\n    /**\n     * Handle on checkbox change\n     * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.\n     */\n    private _clickHandler() {\n        this.checked = !this.checked; /* 2 */\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n    }\n\n    /**\n     * Handle On Change\n     * 1. Set the value when the select is changed.\n     * 2. Fire the custom event with the current value.\n     */\n    private _handleOnChange(e: Event) {\n        /* 1 */\n        const target = e.target as HTMLSelectElement;\n        this.value = target.value;\n        this._internals.setFormValue(this.value);\n\n        /* 2 */\n        const customEvent = new CustomEvent('change', {\n            detail: {\n                name: this.name,\n                value: this.value,\n            },\n            bubbles: true,\n            composed: true,\n        });\n        this.dispatchEvent(customEvent);\n    }\n\n    /**\n     * Form reset callback\n     * 1) Set checked property to the default value and then set the input's checked attribute to that default value\n     * 2) Set the input's checked attribute to that default value\n     * 3) Set the element internals form data when the form is reset\n     * 4) Change the new value to the old value on reset\n     */\n    formResetCallback(): void {\n        this.checked = this.defaultValue; /* 1 */\n        this.field.checked = this.defaultValue; /* 2 */\n        this.setFormData();\n        this.requestUpdate();\n    }\n\n    /**\n     * First update lifecycle hook\n     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n     */\n    firstUpdated() {\n        this.initializeAria(); /* 1 */\n        return super.firstUpdated();\n    }\n\n    /**\n     * Initialize aria attributes\n     */\n    initializeAria() {\n        this.fieldId = this.fieldId || nanoid();\n        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n            this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n        }\n        if (this.successNote || this.errorNote) {\n            this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n        }\n    }\n\n    /**\n     * Aria describedby string based on field notes and error/success notes\n     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n     * render both in the input's `aria-describedby` attribute\n     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n     */\n    fieldNoteAria(): string {\n        if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n            return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n        } if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n            return this.validationAriaDescribedBy; /* 2 */\n        }\n        return this.ariaDescribedBy; /* 3 */\n    }\n\n    /**\n     * Render the success or error field notes\n     * 1. If there is a successNote, then return the field note with the success message and state.\n     * 2. If there is a errorNote, then return the field note with the error message and state.\n     */\n    renderSuccessErrorFieldNote() {\n        if (this.successNote) {\n            /* 1 */\n            return html`<cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-checkbox-field-item__field-note-success\"\n        iconName=\"success\"\n      >\n        <span class=\"cre8-u-is-vishidden\">${this.successText}</span> ${this.successNote}\n      </cre8-field-note>`;\n        }\n        if (this.errorNote) {\n            /* 2 */\n            return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-checkbox-field-item__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        <span class=\"cre8-u-is-vishidden\">${this.errorText}</span> ${this.errorNote}\n      </cre8-field-note>`;\n        }\n        return null;\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-checkbox-field-item', {\n            'cre8-c-checkbox-field-item--error': this.isError,\n            'cre8-c-checkbox-field-item--success': this.isSuccess,\n            'cre8-c-checkbox-field-item--disabled': this.disabled,\n        });\n\n        return html`\n      <div role=${ifDefined(this.getRole())} class=\"${componentClassNames}\">\n        <input class=\"cre8-c-checkbox-field-item__input\"\n          type=\"checkbox\"\n          @input=${this._clickHandler}\n          id=${this.fieldId}\n          name=${this.name ?? undefined}\n          .value=${this.value}\n          required=${ifDefined(this.required)}\n          aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}\n          disabled=\"${ifDefined(this.disabled ? this.disabled : undefined)}\"\n          aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n          .checked=\"${this.checked}\"\n          @change=${this._handleOnChange}\n        />\n        <span class=\"cre8-c-checkbox-field-item__custom-checkbox\">\n          <cre8-icon svg='${svgCheck}' class=\"cre8-c-checkbox-field-item__icon\" aria-label=\"checkbox\"\n          aria-hidden=\"${!this.checked}\"></cre8-icon>\n        </span>\n        <label class=\"cre8-c-checkbox-field-item__label\" for=${this.fieldId}>${this.label}</label>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n                ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-checkbox-field-item__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n                : nothing\n            }\n        ${this.renderSuccessErrorFieldNote()}\n    `;\n    }\n}\n\nif (customElements.get('cre8-checkbox-field-item') === undefined) {\n    customElements.define('cre8-checkbox-field-item', Cre8CheckboxFieldItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-checkbox-field-item': Cre8CheckboxFieldItem;\n    }\n}\n\nexport default Cre8CheckboxFieldItem;\n"]}

package/lib/components/dropdown/dropdown.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing, } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import svgCaretDown from '@tmorrow/cre8-wc/icons/System/Filled/Caret_Down.svg?raw';
+import svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down_Filled.svg?raw';
 import { Cre8Element } from '../cre8-element';
 import styles from './dropdown.styles.js';
 /**

package/lib/components/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../components/dropdown/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/System/Filled/Caret_Down.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './dropdown.styles.js';\n\n/**\n * The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list\n */\n\nexport class Cre8Dropdown extends Cre8Element {\n    static styles = [styles];\n\n    @state() open = false;\n\n  /**\n   * Dropdown header\n   */\n  @property({ type: String })\n      buttonText = '';\n\n  /**\n   * Enables scrolling once content reached to specified height, the height should mention in px units, ex: 100px\n   */\n  @property()\n      maxHeight?: string;\n\n  @query('.cre8-c-dropdown')\n      dropdownContent!: HTMLElement;\n\n  /**\n   * button text represents as a link\n   */\n  @property()\n      dropdownWithLink = false;\n\n  constructor() {\n      super();\n      this._closeDropdown.bind(this);\n  }\n\n  connectedCallback() {\n      super.connectedCallback();\n      document.addEventListener('click', this._closeDropdown);\n  }\n\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      document.removeEventListener('click', this._closeDropdown);\n  }\n\n  private _toggleDropdown(e: Event) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.open = !this.open;\n      if (this.open) {\n          this._updateDropdownPosition();\n      }\n  }\n\n\n  private _updateDropdownPosition() {\n      if (this.dropdownContent && this.open) {\n          if (this.maxHeight) {\n              this.dropdownContent.style.maxHeight = this.maxHeight;\n              this.dropdownContent.style.overflowY = 'auto';\n          }\n          if (this.dropdownWithLink) {\n              this.dropdownContent.style.top = '85%';\n          }\n      }\n  }\n\n  private _closeDropdown() {\n      this.open = false;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-dropdown', {\n          'cre8-c-dropdown--close': !this.open,\n          'cre8-c-dropdown--open': this.open,\n      });\n\n      return html`\n      <div class=\"cre8-c-dropdown-container\">\n      ${this.dropdownWithLink\n        ? html`<a href=\"#\" aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--link\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n        ${this.buttonText\n        ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-link\"></cre8-icon>`\n        : nothing}\n      </a>`\n        : html`<button aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--button\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n      ${this.buttonText\n        ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-button\"></cre8-icon>`\n        : nothing}\n        </button>`\n}\n        <ul role=\"list\" class=\"${componentClassNames}\">\n          <slot></slot>\n        </ul>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-dropdown') === undefined) {\n    customElements.define('cre8-dropdown', Cre8Dropdown);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-dropdown': Cre8Dropdown;\n  }\n}\n\nexport default Cre8Dropdown;\n"]}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../components/dropdown/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down_Filled.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './dropdown.styles.js';\n\n/**\n * The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list\n */\n\nexport class Cre8Dropdown extends Cre8Element {\n    static styles = [styles];\n\n    @state() open = false;\n\n  /**\n   * Dropdown header\n   */\n  @property({ type: String })\n      buttonText = '';\n\n  /**\n   * Enables scrolling once content reached to specified height, the height should mention in px units, ex: 100px\n   */\n  @property()\n      maxHeight?: string;\n\n  @query('.cre8-c-dropdown')\n      dropdownContent!: HTMLElement;\n\n  /**\n   * button text represents as a link\n   */\n  @property()\n      dropdownWithLink = false;\n\n  constructor() {\n      super();\n      this._closeDropdown.bind(this);\n  }\n\n  connectedCallback() {\n      super.connectedCallback();\n      document.addEventListener('click', this._closeDropdown);\n  }\n\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      document.removeEventListener('click', this._closeDropdown);\n  }\n\n  private _toggleDropdown(e: Event) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.open = !this.open;\n      if (this.open) {\n          this._updateDropdownPosition();\n      }\n  }\n\n\n  private _updateDropdownPosition() {\n      if (this.dropdownContent && this.open) {\n          if (this.maxHeight) {\n              this.dropdownContent.style.maxHeight = this.maxHeight;\n              this.dropdownContent.style.overflowY = 'auto';\n          }\n          if (this.dropdownWithLink) {\n              this.dropdownContent.style.top = '85%';\n          }\n      }\n  }\n\n  private _closeDropdown() {\n      this.open = false;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-dropdown', {\n          'cre8-c-dropdown--close': !this.open,\n          'cre8-c-dropdown--open': this.open,\n      });\n\n      return html`\n      <div class=\"cre8-c-dropdown-container\">\n      ${this.dropdownWithLink\n        ? html`<a href=\"#\" aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--link\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n        ${this.buttonText\n        ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-link\"></cre8-icon>`\n        : nothing}\n      </a>`\n        : html`<button aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--button\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n      ${this.buttonText\n        ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-button\"></cre8-icon>`\n        : nothing}\n        </button>`\n}\n        <ul role=\"list\" class=\"${componentClassNames}\">\n          <slot></slot>\n        </ul>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-dropdown') === undefined) {\n    customElements.define('cre8-dropdown', Cre8Dropdown);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-dropdown': Cre8Dropdown;\n  }\n}\n\nexport default Cre8Dropdown;\n"]}

package/lib/components/field-note/field-note.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';
-import svgErrorFilled from '@tmorrow/cre8-wc/icons/System/Filled/Error.svg?raw';
+import svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';
+import svgErrorFilled from '@tmorrow/cre8-wc/icons/Error_Filled.svg?raw';
 import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';

package/lib/components/field-note/field-note.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-note.js","sourceRoot":"","sources":["../../../components/field-note/field-note.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,cAAc,MAAM,oDAAoD,CAAC;AAChF,OAAO,cAAc,MAAM,oDAAoD,CAAC;AAChF,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C;;;;GAIG;AAEH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAwB5C;;OAEG;IACH,iBAAiB;QACb,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjC,OAAO,QAAQ,CAAC;QACpB,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YACrE,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,iBAAiB,EAAE,IAAI,CAAC,SAAS;SACpC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;uBAEM,IAAI,CAAC,iBAAiB,EAAE,IAAI,KAAK;mBACrC,kBAAkB;UAC3B,IAAI,CAAC,OAAO,KAAK,IAAI;YACvB,CAAC,CAAC,IAAI,CAAA,gDAAgD,cAAc,oCAAoC;YACxG,CAAC,CAAC,EACV;cACc,IAAI,CAAC,SAAS,KAAK,IAAI;YAC7B,CAAC,CAAC,IAAI,CAAA,gDAAgD,cAAc,mCAAmC;YACvG,CAAC,CAAC,EACV;;;KAGK,CAAC;IACJ,CAAC;;AAtDQ,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACrB;AAOlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACnB;AAOpB;IADH,QAAQ,EAAE;+CACW;AAoCxB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';\nimport svgErrorFilled from '@tmorrow/cre8-wc/icons/System/Filled/Error.svg?raw';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './field-note.styles.js';\n\n/**\n * Field Note gives direction on how to fill out a form field and to alert users of form errors and successes.\n * It’s used below an input field and never on its own.\n * @slot - The note content\n */\n\nexport class Cre8FieldNote extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Changes the component's treatment to represent an error\n   *  @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Changes the component's treatment to represent a success\n   *  @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   *  DEPRECATED: Icon name used for the icon before to the field note\n   * @deprecated\n   */\n  @property()\n      iconName?: string;\n\n  /**\n   * Check if there are success or error states and set \"aria-live=polite\"\n   */\n  fieldNoteAriaLive(): 'polite' | 'off' | 'assertive' {\n      if (this.isError || this.isSuccess) {\n          return 'polite';\n      }\n      return null;\n  }\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-field-note', {\n          'cre8-is-error': this.isError,\n          'cre8-is-success': this.isSuccess,\n      });\n\n      return html`\n        <div\n          aria-live=\"${this.fieldNoteAriaLive() ?? 'off'}\"\n          class=\"${componentClassName}\">\n        ${this.isError === true\n        ? html`<cre8-icon class=\"cre8-field-note-icon\" svg='${svgErrorFilled}' aria-hidden=\"true\" ></cre8-icon>`\n        : ''\n}\n            ${this.isSuccess === true\n        ? html`<cre8-icon class=\"cre8-field-note-icon\" svg='${svgCheckCircle}' aria-hidden=\"true\"></cre8-icon>`\n        : ''\n}\n          <div><slot></slot></div>\n        </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-field-note') === undefined) {\n    customElements.define('cre8-field-note', Cre8FieldNote);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-field-note': Cre8FieldNote;\n  }\n}\n\nexport default Cre8FieldNote;\n"]}
+{"version":3,"file":"field-note.js","sourceRoot":"","sources":["../../../components/field-note/field-note.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C;;;;GAIG;AAEH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAwB5C;;OAEG;IACH,iBAAiB;QACb,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjC,OAAO,QAAQ,CAAC;QACpB,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE;YACrE,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,iBAAiB,EAAE,IAAI,CAAC,SAAS;SACpC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;uBAEM,IAAI,CAAC,iBAAiB,EAAE,IAAI,KAAK;mBACrC,kBAAkB;UAC3B,IAAI,CAAC,OAAO,KAAK,IAAI;YACvB,CAAC,CAAC,IAAI,CAAA,gDAAgD,cAAc,oCAAoC;YACxG,CAAC,CAAC,EACV;cACc,IAAI,CAAC,SAAS,KAAK,IAAI;YAC7B,CAAC,CAAC,IAAI,CAAA,gDAAgD,cAAc,mCAAmC;YACvG,CAAC,CAAC,EACV;;;KAGK,CAAC;IACJ,CAAC;;AAtDQ,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACrB;AAOlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACnB;AAOpB;IADH,QAAQ,EAAE;+CACW;AAoCxB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgErrorFilled from '@tmorrow/cre8-wc/icons/Error_Filled.svg?raw';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './field-note.styles.js';\n\n/**\n * Field Note gives direction on how to fill out a form field and to alert users of form errors and successes.\n * It’s used below an input field and never on its own.\n * @slot - The note content\n */\n\nexport class Cre8FieldNote extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Changes the component's treatment to represent an error\n   *  @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Changes the component's treatment to represent a success\n   *  @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   *  DEPRECATED: Icon name used for the icon before to the field note\n   * @deprecated\n   */\n  @property()\n      iconName?: string;\n\n  /**\n   * Check if there are success or error states and set \"aria-live=polite\"\n   */\n  fieldNoteAriaLive(): 'polite' | 'off' | 'assertive' {\n      if (this.isError || this.isSuccess) {\n          return 'polite';\n      }\n      return null;\n  }\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-field-note', {\n          'cre8-is-error': this.isError,\n          'cre8-is-success': this.isSuccess,\n      });\n\n      return html`\n        <div\n          aria-live=\"${this.fieldNoteAriaLive() ?? 'off'}\"\n          class=\"${componentClassName}\">\n        ${this.isError === true\n        ? html`<cre8-icon class=\"cre8-field-note-icon\" svg='${svgErrorFilled}' aria-hidden=\"true\" ></cre8-icon>`\n        : ''\n}\n            ${this.isSuccess === true\n        ? html`<cre8-icon class=\"cre8-field-note-icon\" svg='${svgCheckCircle}' aria-hidden=\"true\"></cre8-icon>`\n        : ''\n}\n          <div><slot></slot></div>\n        </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-field-note') === undefined) {\n    customElements.define('cre8-field-note', Cre8FieldNote);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-field-note': Cre8FieldNote;\n  }\n}\n\nexport default Cre8FieldNote;\n"]}

package/lib/components/icon/icon.d.ts

@@ -25,7 +25,7 @@ import { Cre8Element } from '../cre8-element';
  * If you need to install a newer version than what's included, please see
  * the [installation instructions for svgs](https:/git.express-scripts.com/ExpressScripts/svgs#installation).
  * - Import the component (this is the icon container): `import '@cre8_dev/svgs';`
- * - Import an svg as a string: `import svgInfo from 'cre8_dev/svgs/lib/icons/System/Regular/Info.svg?raw';`
+ * - Import an svg as a string: `import svgInfo from '@tmorrow/cre8-wc/icons/Info.svg?raw';`
  *
  * Your import paths may be different depending on your project's build configuration.
  * Please see [Importing Icons](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/icon-sets-importing-icons--page)

package/lib/components/icon/icon.js

@@ -10,45 +10,45 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { property } from 'lit/decorators.js';
-import svgAdd from '@tmorrow/cre8-wc/icons/System/Regular/Add.svg?raw';
-import svgArrowLeft from '@tmorrow/cre8-wc/icons/System/Regular/Arrow_-_Left.svg?raw';
-import svgChat from '@tmorrow/cre8-wc/icons/System/Filled/Chat_Default.svg?raw';
-import svgCalendar from '@tmorrow/cre8-wc/icons/System/Regular/Calendar.svg?raw';
-import svgCaretDown from '@tmorrow/cre8-wc/icons/System/Filled/Caret_Down.svg?raw';
-import svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';
-import svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';
-import svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';
-import svgDownload from '@tmorrow/cre8-wc/icons/System/Filled/Download.svg?raw';
-import svgEdit from '@tmorrow/cre8-wc/icons/System/Regular/Edit.svg?raw';
-import svgEllipsis from '@tmorrow/cre8-wc/icons/System/Filled/Ellipsis.svg?raw';
-import svgMessageFilled from '@tmorrow/cre8-wc/icons/System/Filled/Message_Unread.svg?raw';
-import svgMessage from '@tmorrow/cre8-wc/icons/System/Regular/Message_Unread.svg?raw';
-import svgError from '@tmorrow/cre8-wc/icons/System/Regular/Error.svg?raw';
-import svgExternal from '@tmorrow/cre8-wc/icons/System/Regular/External_Link.svg?raw';
-import svgMedication from '@tmorrow/cre8-wc/icons/System/Regular/Medication.svg?raw';
-import svgGlobe from '@tmorrow/cre8-wc/icons/System/Regular/Globe.svg?raw';
-import svgHandHeart from '@tmorrow/cre8-wc/icons/System/Regular/Wellness.svg?raw';
-import svgHelp from '@tmorrow/cre8-wc/icons/System/Regular/Help.svg?raw';
-import svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';
-import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
-import svgLightbulb from '@tmorrow/cre8-wc/icons/System/Regular/Lightbulb.svg?raw';
-import svgLocation from '@tmorrow/cre8-wc/icons/System/Filled/Location.svg?raw';
-import svgMenu from '@tmorrow/cre8-wc/icons/System/Regular/Menu.svg?raw';
-import svgMinus from '@tmorrow/cre8-wc/icons/System/Regular/Minus.svg?raw';
-import svgAccountFilled from '@tmorrow/cre8-wc/icons/System/Filled/Account.svg?raw';
-import svgNotification from '@tmorrow/cre8-wc/icons/System/Regular/Notification.svg?raw';
-import svgRefill from '@tmorrow/cre8-wc/icons/Marketing/Duotone/Refill.svg?raw';
-import svgAccount from '@tmorrow/cre8-wc/icons/System/Regular/Account.svg?raw';
-import svgPlayFilled from '@tmorrow/cre8-wc/icons/System/Filled/Play_Arrow.svg?raw';
-import svgPlayCircle from '@tmorrow/cre8-wc/icons/System/Regular/Play_Circle.svg?raw';
-import svgSpinner from '@tmorrow/cre8-wc/icons/System/Regular/Spinner/75.svg?raw';
-import svgUndo from '@tmorrow/cre8-wc/icons/System/Regular/Undo.svg?raw';
-import svgSearch from '@tmorrow/cre8-wc/icons/System/Regular/Search.svg?raw';
-import svgCart from '@tmorrow/cre8-wc/icons/System/Regular/Cart.svg?raw';
-import svgRectangle from '@tmorrow/cre8-wc/icons/System/Filled/Shape/Rectangle.svg?raw';
-import svgVaccine from '@tmorrow/cre8-wc/icons/Marketing/Duotone/Vaccinations.svg?raw';
-import svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';
-import svgCaretDoubleRight from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Right.svg?raw';
+import svgAdd from '@tmorrow/cre8-wc/icons/Add.svg?raw';
+import svgArrowLeft from '@tmorrow/cre8-wc/icons/Arrow_-_Left.svg?raw';
+import svgChat from '@tmorrow/cre8-wc/icons/Chat_Default.svg?raw';
+import svgCalendar from '@tmorrow/cre8-wc/icons/Calendar.svg?raw';
+import svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down_Filled.svg?raw';
+import svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';
+import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';
+import svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';
+import svgDownload from '@tmorrow/cre8-wc/icons/Download.svg?raw';
+import svgEdit from '@tmorrow/cre8-wc/icons/Edit.svg?raw';
+import svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis_Filled.svg?raw';
+import svgMessageFilled from '@tmorrow/cre8-wc/icons/Message_Unread_Filled.svg?raw';
+import svgMessage from '@tmorrow/cre8-wc/icons/Message_Unread.svg?raw';
+import svgError from '@tmorrow/cre8-wc/icons/Error.svg?raw';
+import svgExternal from '@tmorrow/cre8-wc/icons/External_Link.svg?raw';
+import svgMedication from '@tmorrow/cre8-wc/icons/Medication.svg?raw';
+import svgGlobe from '@tmorrow/cre8-wc/icons/Globe.svg?raw';
+import svgHandHeart from '@tmorrow/cre8-wc/icons/Wellness.svg?raw';
+import svgHelp from '@tmorrow/cre8-wc/icons/Help.svg?raw';
+import svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';
+import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';
+import svgLightbulb from '@tmorrow/cre8-wc/icons/Lightbulb.svg?raw';
+import svgLocation from '@tmorrow/cre8-wc/icons/Location.svg?raw';
+import svgMenu from '@tmorrow/cre8-wc/icons/Menu.svg?raw';
+import svgMinus from '@tmorrow/cre8-wc/icons/Minus.svg?raw';
+import svgAccountFilled from '@tmorrow/cre8-wc/icons/Account_Filled.svg?raw';
+import svgNotification from '@tmorrow/cre8-wc/icons/Notification.svg?raw';
+import svgRefill from '@tmorrow/cre8-wc/icons/Refill.svg?raw';
+import svgAccount from '@tmorrow/cre8-wc/icons/Account.svg?raw';
+import svgPlayFilled from '@tmorrow/cre8-wc/icons/Play_Arrow.svg?raw';
+import svgPlayCircle from '@tmorrow/cre8-wc/icons/Play_Circle.svg?raw';
+import svgSpinner from '@tmorrow/cre8-wc/icons/Spinner_75.svg?raw';
+import svgUndo from '@tmorrow/cre8-wc/icons/Undo.svg?raw';
+import svgSearch from '@tmorrow/cre8-wc/icons/Search.svg?raw';
+import svgCart from '@tmorrow/cre8-wc/icons/Cart.svg?raw';
+import svgRectangle from '@tmorrow/cre8-wc/icons/Rectangle.svg?raw';
+import svgVaccine from '@tmorrow/cre8-wc/icons/Vaccinations.svg?raw';
+import svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';
+import svgCaretDoubleRight from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';
 import svgErrorAlt from '@tmorrow/cre8-wc/icons/error-alt.svg?raw';
 import svgEsi from '@tmorrow/cre8-wc/icons/express-scripts.svg?raw';
 import svgInsta from '@tmorrow/cre8-wc/icons/instagram.svg?raw';
@@ -92,7 +92,7 @@ import iconSprite from '@tmorrow/cre8-wc/icons/cre8-icons.svg?raw';
  * If you need to install a newer version than what's included, please see
  * the [installation instructions for svgs](https:/git.express-scripts.com/ExpressScripts/svgs#installation).
  * - Import the component (this is the icon container): `import '@cre8_dev/svgs';`
- * - Import an svg as a string: `import svgInfo from 'cre8_dev/svgs/lib/icons/System/Regular/Info.svg?raw';`
+ * - Import an svg as a string: `import svgInfo from '@tmorrow/cre8-wc/icons/Info.svg?raw';`
  *
  * Your import paths may be different depending on your project's build configuration.
  * Please see [Importing Icons](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/icon-sets-importing-icons--page)