@pine-ds/core 2.1.0 → 2.1.2

package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js

@@ -4,6 +4,7 @@ import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
   args: {
+    autocomplete: null,
     componentId: null,
     disabled: false,
     errorMessage: null,
@@ -28,6 +29,7 @@ export default {
 }
 
 const BaseTemplate = (args) => html`<pds-textarea
+  autocomplete="${args.autocomplete}"
   component-id="${args.componentId}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
@@ -47,14 +49,14 @@ const BaseTemplate = (args) => html`<pds-textarea
 export const Default = BaseTemplate.bind({});
 Default.args = {
   componentId: 'pds-textarea-default-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Default',
 };
 
 export const Rows = BaseTemplate.bind({});
 Rows.args = {
   componentId: 'pds-textarea-rows-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Rows',
   rows: 4,
 };
@@ -62,7 +64,7 @@ Rows.args = {
 export const Required = BaseTemplate.bind({});
 Required.args = {
   componentId: 'pds-textarea-required-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Required',
   required: true,
 };
@@ -70,33 +72,33 @@ Required.args = {
 export const Placeholder = BaseTemplate.bind({});
 Placeholder.args = {
   componentId: 'pds-textarea-placeholder-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Placeholder',
-  placeholder: 'Placeholder...'
+  placeholder: 'Enter a message...'
 };
 
 export const Disabled = BaseTemplate.bind({});
 Disabled.args = {
   componentId: 'pds-textarea-disabled-example',
   disabled: true,
-  label: 'Name',
+  label: 'Message',
   name: 'Disabled',
 };
 
 export const Readonly = BaseTemplate.bind({});
 Readonly.args = {
   componentId: 'pds-textarea-readonly-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Readonly',
   readonly: true,
   value: 'Readonly Value'
 };
 
-export const Message = BaseTemplate.bind({});
-Message.args = {
+export const WithMessage = BaseTemplate.bind({});
+WithMessage.args = {
   componentId: 'pds-textarea-helper-example',
   helperMessage: 'Helper message text',
-  label: 'Name',
+  label: 'Message',
   name: 'Message',
 };
 
@@ -105,7 +107,16 @@ Invalid.args = {
   componentId: 'pds-textarea-error-example',
   errorMessage: 'Error',
   invalid: true,
-  label: 'Name',
+  label: 'Message',
   name: 'Error',
   required: true,
 };
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-textarea-autocomplete',
+  label: 'Message',
+  name: 'message',
+  autocomplete: 'on',
+  placeholder: 'Enter a message...',
+};

package/dist/collection/components/pds-tooltip/pds-tooltip.css

@@ -19,8 +19,8 @@
 }
 :host ::slotted([slot=content]) {
   display: block;
+  max-width: var(--sizing-width-default);
   white-space: normal;
-  width: var(--sizing-width-default);
 }
 
 .pds-tooltip__content {
@@ -28,6 +28,7 @@
   border-radius: var(--border-radius-overlay);
   box-shadow: var(--box-shadow-default);
   color: var(--color-text-default);
+  max-width: var(--sizing-width-default);
   opacity: 0;
   padding: var(--spacing-padding-overlay);
   position: absolute;

package/dist/collection/components/pds-tooltip/pds-tooltip.js

@@ -8,11 +8,9 @@ export class PdsTooltip {
     constructor() {
         this.handleHide = () => {
             this.hideTooltip();
-            this.pdsTooltipHide.emit();
         };
         this.handleShow = () => {
             this.showTooltip();
-            this.pdsTooltipShow.emit();
         };
         this.isOpen = false;
         this.content = undefined;
@@ -20,6 +18,7 @@ export class PdsTooltip {
         this.hasArrow = true;
         this.htmlContent = false;
         this.placement = 'right';
+        this.maxWidth = '352px';
         this.opened = false;
     }
     handleOpenToggle() {
@@ -58,13 +57,13 @@ export class PdsTooltip {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: '2d8f8962d48885ba08942be77017a4935ddd2e22', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '532fcea8cc64b97257ee44f7513d24ae6369bc80', class: `
+        return (h(Host, { key: 'f4a8cd19668e7cc20a70ae13a0f6dcf0f809df65', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: 'b83498c6ea8e404b2abc25cc75daa95807649dba', class: `
             pds-tooltip
             pds-tooltip--${this.placement}
             ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
             ${this.opened ? 'pds-tooltip--is-open' : ''}
             ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: 'aeebff67bb54044f6c929b3da664c8b5185d34bb', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '459356377503d70ca14d8fc52fc25ed989e9c54c' })), h("div", { key: '29eab9bdfc2579d96ba66cce94ecf82b52c3e8a5', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, h("slot", { key: '33b625cdc333f23ad036a7623581e49b95ce23e7', name: "content" }), this.content))));
+          ` }, h("span", { key: '47ace7d3f543f0d86987389c76b25da0ad6be9b7', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '45bae92d87b8a67c00608c18f76aa9333d8d82a7' })), h("div", { key: 'a745ce513f1563cb8ea5a86bf27ee31f3e0d4392', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: '8c46fe5951624e2de4128bd0f819e1e55155a7b5', name: "content" }), this.content))));
     }
     static get is() { return "pds-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -177,6 +176,27 @@ export class PdsTooltip {
                 "reflect": true,
                 "defaultValue": "'right'"
             },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"352px\""
+                        }],
+                    "text": "Sets the maximum width of the tooltip content"
+                },
+                "attribute": "max-width",
+                "reflect": false,
+                "defaultValue": "'352px'"
+            },
             "opened": {
                 "type": "boolean",
                 "mutable": true,
@@ -205,39 +225,6 @@ export class PdsTooltip {
             "isOpen": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "pdsTooltipHide",
-                "name": "pdsTooltipHide",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is closed"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "pdsTooltipShow",
-                "name": "pdsTooltipShow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is shown"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
     static get methods() {
         return {
             "showTooltip": {

package/dist/collection/components/pds-tooltip/pds-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  /**\n   * Emitted after a tooltip is closed\n   */\n  @Event() pdsTooltipHide: EventEmitter;\n\n  /**\n   * Emitted after a tooltip is shown\n   */\n  @Event() pdsTooltipShow: EventEmitter;\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n    this.pdsTooltipHide.emit();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n    this.pdsTooltipShow.emit();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-tooltip.js","sourceRoot":"","sources":["../../../src/components/pds-tooltip/pds-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core';\nimport {\n  positionTooltip\n} from '../../utils/overlay';\n\n/**\n * @slot (default) - The tooltip's target element\n * @slot content - HTML content for the tooltip\n */\n\n@Component({\n  tag: 'pds-tooltip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'],\n  shadow: true,\n})\nexport class PdsTooltip {\n  private contentEl: HTMLElement | null;\n\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsTooltipElement;\n\n  /**\n   * Determines when the tooltip is open\n   * @defaultValue false\n   */\n  @State() isOpen = false;\n\n  /**\n   * Content for the tooltip. If HTML is required, use the content slot\n   */\n  @Prop() content: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether or not the tooltip has an arrow\n   * @defaultValue true\n   */\n  @Prop() hasArrow? = true;\n\n  /**\n   * Enable this option when using the content slot\n   * @defaultValue false\n   */\n  @Prop() htmlContent = false;\n\n  /**\n   * Determines the preferred position of the tooltip\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement:\n    'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'right';\n\n  /**\n   * Sets the maximum width of the tooltip content\n   * @defaultValue \"352px\"\n   */\n  @Prop() maxWidth: string = '352px';\n\n  /**\n   * Determines whether or not the tooltip is visible\n   * @defaultValue false\n   */\n  @Prop({mutable: true, reflect: true}) opened = false;\n\n  @Watch('opened')\n  handleOpenToggle() {\n    if (this.opened) {\n      this.handleShow();\n    } else {\n      this.handleHide();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n\n    this.el.addEventListener('blur', this.handleHide, true);\n    this.el.addEventListener('focus', this.handleShow, true);\n  }\n\n  componentDidUpdate() {\n    if (this.opened) {\n      this.showTooltip();\n    }\n  }\n\n  componentDidRender() {\n    positionTooltip({elem: this.el, elemPlacement: this.placement, overlay: this.contentEl});\n  }\n\n  /**\n   * Shows the tooltip by enabling the opened property\n   */\n  @Method()\n  async showTooltip() {\n    this.opened = true;\n  }\n\n  /**\n   * Hides the tooltip by disabling the opened property\n   */\n  @Method()\n  async hideTooltip() {\n    this.opened = false;\n  }\n\n  private handleHide = () => {\n    this.hideTooltip();\n  };\n\n  private handleShow = () => {\n    this.showTooltip();\n  };\n\n  render() {\n    return (\n      <Host\n        onMouseEnter={this.handleShow}\n        onMouseLeave={this.handleHide}\n        onFocusin={this.handleShow}\n        onFocusout={this.handleHide}\n      >\n        <div\n          class={`\n            pds-tooltip\n            pds-tooltip--${this.placement}\n            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}\n            ${this.opened ? 'pds-tooltip--is-open' : ''}\n            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}\n          `}\n        >\n          <span\n            aria-describedby={this.componentId}\n            class=\"pds-tooltip__trigger\"\n          >\n            <slot />\n          </span>\n\n          <div class=\"pds-tooltip__content\"\n            aria-hidden={this.opened ? 'false' : 'true'}\n            aria-live={this.opened ? 'polite' : 'off'}\n            id={this.componentId}\n            ref={(el) => (this.contentEl = el)}\n            role=\"tooltip\"\n            style={{ maxWidth: this.maxWidth }}\n          >\n            <slot\n              name=\"content\"\n            ></slot>\n            {this.content}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-tooltip/stories/pds-tooltip.stories.js

@@ -8,17 +8,17 @@ export default {
   decorators: [withActions],
   parameters: {
     actions: {
-      handles: ['mouseEnter', 'pdsTooltipShow', 'mouseLeave', 'pdsTooltipHide'],
+      handles: [],
     },
   },
   title: 'components/Tooltip'
 }
 
 const BaseTemplate = (args) => html`
-  <pds-tooltip content=${args.content} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
+  <pds-tooltip content=${args.content} max-width=${args.maxWidth} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
 
 const HTMLContentTemplate = (args) => html`
-  <pds-tooltip has-arrow=${args.hasArrow} placement=${args.placement} html-content=${args.htmlContent}>
+  <pds-tooltip has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement=${args.placement} html-content=${args.htmlContent}>
     <div slot="content">
       <p><strong>This is a tooltip</strong></p>
       <p>Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.</p>
@@ -30,46 +30,46 @@ const PositionTemplate = (args) => html`
   <div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
     <div class="position-demo-grid">
       <div class="position-demo-grid-item">
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top-start" opened=${args.opened}>
+        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-start" opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top" opened=${args.opened}>
+        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top" opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="top-end" opened=${args.opened}>
+        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-end" opened=${args.opened}>
           <pds-button variant="accent">te</pds-button>
         </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="left-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-start" opened=${args.opened}>
             <pds-button variant="accent">ls</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="left" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left" opened=${args.opened}>
             <pds-button variant="accent">l</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="left-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-end" opened=${args.opened}>
             <pds-button variant="accent">le</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="bottom-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-start" opened=${args.opened}>
             <pds-button variant="accent">bs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="bottom" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom" opened=${args.opened}>
             <pds-button variant="accent">b</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="bottom-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-end" opened=${args.opened}>
             <pds-button variant="accent">be</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="right-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-start" opened=${args.opened}>
             <pds-button variant="accent">rs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="right" opened=${args.opened}>
+          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right" opened=${args.opened}>
             <pds-button variant="accent">r</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="right-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-end" opened=${args.opened}>
             <pds-button variant="accent">re</pds-button>
           </pds-tooltip>
       </div>

package/dist/collection/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TooltipPlacementType =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type BoxColumnType =\n  '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12';\n\n  export type BoxTShirtSizeType =\n  'none'\n  | 'xxs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | 'xxl'\n\n  export type BoxShadowSizeType =\n  'none'\n  | '050'\n  | '100'\n  | '150'\n  | '200'\n  | '300'\n  | '400'\n  | '500'"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type PlacementType =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type BoxColumnType =\n  '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12';\n\n  export type BoxTShirtSizeType =\n  'none'\n  | 'xxs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | 'xxl'\n\n  export type BoxShadowSizeType =\n  'none'\n  | '050'\n  | '100'\n  | '150'\n  | '200'\n  | '300'\n  | '400'\n  | '500'"]}