tide-design-system 2.2.3 → 2.2.5

package/src/stories/TideCard.stories.ts

@@ -91,7 +91,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideCard',
+  title: 'Components/TideCard',
 };
 
 export const Demo = {};

package/src/stories/TideCarousel.stories.ts

@@ -10,21 +10,24 @@ const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
   const argsWithValues: string[] = [];
+  const hasBleed = args.bleed !== '';
 
+  if (hasBleed) argsWithValues.push(`bleed="${args.bleed}"`);
   if (args.isHideawayButtons !== undefined) argsWithValues.push(`:is-hideaway-buttons="${args.isHideawayButtons}"`);
   if (args.isTouchscreen !== undefined) argsWithValues.push(`:is-touchscreen="${args.isTouchscreen}"`);
-  if (args.subtitle !== undefined) argsWithValues.push(`subtitle="${args.subtitle}"`);
-  if (args.title !== undefined) argsWithValues.push(`title="${args.title}"`);
+  if (args.subtitle !== '') argsWithValues.push(`subtitle="${args.subtitle}"`);
+  if (args.title !== '') argsWithValues.push(`title="${args.title}"`);
   if (args.handleChange) argsWithValues.push(`@change="${args.handleChange}"`);
 
-  const slotContentMsic = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
+  const slotContentMisc = args.misc === '' ? '' : `${tab}<template #misc>${args.misc}</template>${lineBreak}`;
 
   return (
-    `<TideCarousel ${argsWithValues.join(' ')}>${lineBreak}` +
-    `${slotContentMsic}` +
-    `${tab}<li v-for="(_child, index) in new Array(12)">${lineBreak}` +
-    `${tab}${tab}<div class="tide-shrink-none">${args.default}</div>${lineBreak}` +
-    `${tab}</li>${lineBreak}` +
+    // prettier-ignore
+    `<TideCarousel ${argsWithValues.join(' ')}>` + lineBreak +
+      slotContentMisc + tab +
+      `<li class="tide-shrink-none ${hasBleed ? 'tide-shadow-bottom' : ''}" v-for="(_child, index) in new Array(12)">` + lineBreak + tab + tab +
+        args.default + lineBreak + tab +
+      `</li>` + lineBreak +
     `</TideCarousel>`
   );
 };
@@ -58,11 +61,41 @@ const render = (args: any) => ({
     },
   },
   setup: () => ({ args }),
-  template: `<TideCarousel @change="handleChange" v-bind="args"><template #misc>${args.misc}</template><li class="tide-shrink-none tide-border-1 tide-border tide-padding-1" v-for="(_child, index) in new Array(12)">{{ args.default }}</li></TideCarousel>`,
+  // prettier-ignore
+  template:
+  `<TideCarousel
+    @change="handleChange"
+    class="tide-margin-x-1"
+    v-bind="args"
+  >
+    <template #misc>{{ args.misc }}</template>
+    <li
+      :class="args.bleed ? 'tide-shadow-bottom' : ''"
+      class="tide-shrink-none tide-border-1 tide-border tide-padding-1"
+      v-for="(_child, index) in new Array(12)"
+    >
+      {{ args.default }}
+    </li>
+  </TideCarousel>`,
+  updated() {
+    if (args.bleed === '') {
+      args.bleed = 0;
+    }
+
+    return { args };
+  },
 });
 
 export default {
   argTypes: {
+    bleed: {
+      control: 'text',
+      description: 'Sets an allowance for visible overflow at component boundaries.',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'number' },
+      },
+    },
     change: disabledArgType,
     default: {
       control: 'text',
@@ -87,9 +120,17 @@ export default {
         defaultValue: { summary: 'False' },
       },
     },
+    isHeadline1: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines font role used for title display',
+      table: {
+        defaultValue: { summary: 'False' },
+      },
+    },
     isHideawayButtons: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether on-page buttons should be hidden until hover',
+      if: { arg: 'isFloating', eq: true },
       table: {
         defaultValue: { summary: 'True' },
       },
@@ -127,6 +168,7 @@ export default {
     },
   },
   args: {
+    bleed: '',
     default: 'Card',
     handleChange: 'doSomething',
     isFloating: undefined,
@@ -140,7 +182,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideCarousel',
+  title: 'Components/TideCarousel',
 };
 
 export const Demo = {};

package/src/stories/TideChipAction.stories.ts

@@ -40,7 +40,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideChipAction',
+  title: 'Components/TideChipAction',
 };
 
 export const Demo = {};

package/src/stories/TideChipFilter.stories.ts

@@ -63,7 +63,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideChipFilter',
+  title: 'Components/TideChipFilter',
 };
 
 export const Demo = {};

package/src/stories/TideChipInput.stories.ts

@@ -47,7 +47,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideChipInput',
+  title: 'Components/TideChipInput',
 };
 
 export const Demo = {};

package/src/stories/TideColumns.stories.ts

@@ -84,7 +84,7 @@ export default {
   component: TideColumns,
   parameters,
   tags: ['autodocs'],
-  title: 'Basic Components/TideColumns',
+  title: 'Components/TideColumns',
 };
 
 export const Demo = {};

package/src/stories/TideDivider.stories.ts

@@ -39,7 +39,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideDivider',
+  title: 'Components/TideDivider',
 };
 
 export const Demo = {};

package/src/stories/TideIcon.stories.ts

@@ -27,7 +27,7 @@ export default {
   component: TideIcon,
   parameters,
   tags: ['autodocs'],
-  title: 'Basic Components/TideIcon',
+  title: 'Components/TideIcon',
 };
 
 export const Demo = {};

package/src/stories/TideImage.stories.ts

@@ -108,7 +108,7 @@ export default {
   component: TideImage,
   parameters,
   tags: ['autodocs'],
-  title: 'Basic Components/TideImage',
+  title: 'Components/TideImage',
 };
 
 export const Demo = {};

package/src/stories/TideImageBackground.stories.ts

@@ -103,7 +103,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideImageBackground',
+  title: 'Components/TideImageBackground',
 };
 
 export const Demo = {};

package/src/stories/TideIndicator.stories.ts

@@ -25,7 +25,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideIndicator',
+  title: 'Components/TideIndicator',
 };
 
 export const Demo = {};

package/src/stories/TideInputCheckbox.stories.ts

@@ -95,7 +95,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputCheckbox',
+  title: 'Components/TideInputCheckbox',
 };
 
 export const Demo = {};

package/src/stories/TideInputRadio.stories.ts

@@ -78,7 +78,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputRadio',
+  title: 'Components/TideInputRadio',
 };
 
 export const Demo = {};

package/src/stories/TideInputSelect.stories.ts

@@ -206,7 +206,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputSelect',
+  title: 'Components/TideInputSelect',
 };
 
 export const Demo = {};

package/src/stories/TideInputText.stories.ts

@@ -172,7 +172,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputText',
+  title: 'Components/TideInputText',
 };
 
 export const Demo = {};

package/src/stories/TideInputTextarea.stories.ts

@@ -110,7 +110,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputTextarea',
+  title: 'Components/TideInputTextarea',
 };
 
 export const Demo = {};

package/src/stories/TideLink.stories.ts

@@ -36,6 +36,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
     argsWithValues.push(`:icon-trailing="${formatValueAsConstant({ iconTrailing }, argTypes)}"`);
   if (args.isNewTab !== undefined) argsWithValues.push(`:is-new-tab="${args.isNewTab}"`);
   if (args.label !== undefined) argsWithValues.push(`:label="${args.label}"`);
+  if (args.subtle !== undefined) argsWithValues.push(`:subtle="${args.subtle}"`);
   if (args.click !== undefined) argsWithValues.push(`@click="${args.click}"`);
 
   return `<TideLink ${argsWithValues.join(' ')} />`;
@@ -117,23 +118,28 @@ export default {
         type: { summary: 'string' },
       },
     },
+    subtle: {
+      ...argTypeBooleanUnrequired,
+      description: 'Hides the underline until hovered, de-emphasizing the link',
+    },
   },
   args: {
     click: 'doSomething',
     dataTrack: '',
     element: undefined,
-    href: '/',
+    href: '#',
     iconLeading: undefined,
     iconTrailing: undefined,
     isNewTab: undefined,
     label: 'Demo',
     size: undefined,
+    subtle: undefined,
   },
   component: TideLink,
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideLink',
+  title: 'Components/TideLink',
 };
 
 export const Demo = {};

package/src/stories/TideModal.stories.ts

@@ -180,7 +180,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideModal',
+  title: 'Components/TideModal',
 };
 
 export const Demo = {};

package/src/stories/TidePagination.stories.ts

@@ -77,7 +77,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TidePagination',
+  title: 'Components/TidePagination',
 };
 
 export const Demo = {};

package/src/stories/TidePopover.stories.ts

@@ -92,7 +92,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TidePopover',
+  title: 'Components/TidePopover',
 };
 
 export const Demo = {};

package/src/stories/TideSeoLinks.stories.ts

@@ -60,7 +60,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideSeoLinks',
+  title: 'Components/TideSeoLinks',
 };
 
 export const Demo = {};

package/src/stories/TideSwitch.stories.ts

@@ -64,7 +64,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideSwitch',
+  title: 'Components/TideSwitch',
 };
 
 export const Demo = {};

package/src/types/Storybook.ts

@@ -110,38 +110,6 @@ export const GAP = {
   '0.25 REM': CSS.GAP.QUARTER,
 };
 
-export const GRID_END = {
-  'Column 1': CSS.GRID.END.ONE,
-  'Column 2': CSS.GRID.END.TWO,
-  'Column 3': CSS.GRID.END.THREE,
-  'Column 4': CSS.GRID.END.FOUR,
-  'Column 5': CSS.GRID.END.FIVE,
-  'Column 6': CSS.GRID.END.SIX,
-  'Column 7': CSS.GRID.END.SEVEN,
-  'Column 8': CSS.GRID.END.EIGHT,
-  'Column 9': CSS.GRID.END.NINE,
-  'Column 10': CSS.GRID.END.TEN,
-  'Column 11': CSS.GRID.END.ELEVEN,
-  'Column 12': CSS.GRID.END.TWELVE,
-  'Column 13': CSS.GRID.END.THIRTEEN,
-};
-
-export const GRID_START = {
-  'Column 0': CSS.GRID.START.ZERO,
-  'Column 1': CSS.GRID.START.ONE,
-  'Column 2': CSS.GRID.START.TWO,
-  'Column 3': CSS.GRID.START.THREE,
-  'Column 4': CSS.GRID.START.FOUR,
-  'Column 5': CSS.GRID.START.FIVE,
-  'Column 6': CSS.GRID.START.SIX,
-  'Column 7': CSS.GRID.START.SEVEN,
-  'Column 8': CSS.GRID.START.EIGHT,
-  'Column 9': CSS.GRID.START.NINE,
-  'Column 10': CSS.GRID.START.TEN,
-  'Column 11': CSS.GRID.START.ELEVEN,
-  'Column 12': CSS.GRID.START.TWELVE,
-};
-
 export const LINK_SIZE = {
   TWELVE: CSS.FONT.SIZE.TWELVE,
   FOURTEEN: CSS.FONT.SIZE.FOURTEEN,

package/src/types/Styles.ts

@@ -230,39 +230,9 @@ export const CSS = {
     FOUR: 'tide-gap-4',
   },
   GRID: {
-    END: {
-      ONE: 'tide-end-1',
-      TWO: 'tide-end-2',
-      THREE: 'tide-end-3',
-      FOUR: 'tide-end-4',
-      FIVE: 'tide-end-5',
-      SIX: 'tide-end-6',
-      SEVEN: 'tide-end-7',
-      EIGHT: 'tide-end-8',
-      NINE: 'tide-end-9',
-      TEN: 'tide-end-10',
-      ELEVEN: 'tide-end-11',
-      TWELVE: 'tide-end-12',
-      THIRTEEN: 'tide-end-13',
-    },
     FLUID: 'tide-fluid',
     ITEM: 'tide-grid-item',
     LAYOUT: 'tide-grid-layout',
-    START: {
-      ZERO: 'tide-start-0',
-      ONE: 'tide-start-1',
-      TWO: 'tide-start-2',
-      THREE: 'tide-start-3',
-      FOUR: 'tide-start-4',
-      FIVE: 'tide-start-5',
-      SIX: 'tide-start-6',
-      SEVEN: 'tide-start-7',
-      EIGHT: 'tide-start-8',
-      NINE: 'tide-start-9',
-      TEN: 'tide-start-10',
-      ELEVEN: 'tide-start-11',
-      TWELVE: 'tide-start-12',
-    },
     XL: 'tide-grid-xl',
   },
   HEIGHT: {
@@ -466,9 +436,14 @@ export const CSS = {
     UPPER: 'tide-text-transform-upper',
   },
   UNDERLINE: {
-    HOVER: 'tide-underline-hover',
-    OFF: 'tide-underline-none',
-    ON: 'tide-underline',
+    HOVER: {
+      ON: 'tide-underline-hover',
+      OFF: 'tide-underline-hover-none',
+    },
+    REST: {
+      ON: 'tide-underline',
+      OFF: 'tide-underline-none',
+    },
   },
   VISIBILITY: {
     OFF: 'tide-visible-none',
@@ -490,202 +465,3 @@ export const CSS = {
 } as const;
 
 export type CssUtility = (typeof CSS)[keyof typeof CSS];
-
-export const cssSortOrder = [
-  CSS.DISPLAY.BLOCK,
-  CSS.DISPLAY.CONTENTS,
-  CSS.DISPLAY.FLEX,
-  CSS.DISPLAY.GRID,
-  CSS.DISPLAY.NONE,
-  CSS.DISPLAY.INITIAL,
-  CSS.DISPLAY.INLINE,
-  CSS.DISPLAY.INLINE_BLOCK,
-  CSS.DISPLAY.INLINE_FLEX,
-  CSS.AXIS1.AROUND,
-  CSS.AXIS1.BETWEEN,
-  CSS.AXIS1.CENTER,
-  CSS.AXIS1.END,
-  CSS.AXIS1.START,
-  CSS.AXIS2.AROUND,
-  CSS.AXIS2.CENTER,
-  CSS.AXIS2.END,
-  CSS.AXIS2.START,
-  CSS.FLEX.DIRECTION.COLUMN,
-  CSS.FLEX.DIRECTION.COLUMN_REVERSE,
-  CSS.FLEX.DIRECTION.ROW,
-  CSS.FLEX.DIRECTION.ROW_REVERSE,
-  CSS.GAP.ONE,
-  CSS.GAP.HALF,
-  CSS.GAP.QUARTER,
-  CSS.GAP.TWO,
-  CSS.GAP.FOUR,
-  CSS.FLEX.BASIS.ZERO,
-  CSS.FLEX.GROW.ON,
-  CSS.FLEX.GROW.OFF,
-  CSS.FLEX.SHRINK.ON,
-  CSS.FLEX.SHRINK.OFF,
-  CSS.FLEX.WRAP,
-  CSS.POSITION.ABSOLUTE,
-  CSS.POSITION.FIXED,
-  CSS.POSITION.RELATIVE,
-  CSS.POSITION.STICKY,
-  CSS.POSITIONING.TOP,
-  CSS.POSITIONING.RIGHT,
-  CSS.POSITIONING.BOTTOM,
-  CSS.POSITIONING.LEFT,
-  CSS.BOX_SIZING.BORDER_BOX,
-  CSS.BOX_SIZING.CONTENT_BOX,
-  CSS.MARGIN.FULL.ZERO,
-  CSS.MARGIN.FULL.ONE,
-  CSS.MARGIN.FULL.HALF,
-  CSS.MARGIN.FULL.QUARTER,
-  CSS.MARGIN.FULL.TWO,
-  CSS.MARGIN.FULL.FOUR,
-  CSS.MARGIN.Y.ZERO,
-  CSS.MARGIN.Y.ONE,
-  CSS.MARGIN.Y.HALF,
-  CSS.MARGIN.Y.QUARTER,
-  CSS.MARGIN.Y.TWO,
-  CSS.MARGIN.Y.FOUR,
-  CSS.MARGIN.TOP.ZERO,
-  CSS.MARGIN.TOP.ONE,
-  CSS.MARGIN.TOP.HALF,
-  CSS.MARGIN.TOP.QUARTER,
-  CSS.MARGIN.TOP.TWO,
-  CSS.MARGIN.TOP.FOUR,
-  CSS.MARGIN.X.ZERO,
-  CSS.MARGIN.X.ONE,
-  CSS.MARGIN.X.HALF,
-  CSS.MARGIN.X.QUARTER,
-  CSS.MARGIN.X.TWO,
-  CSS.MARGIN.X.FOUR,
-  CSS.MARGIN.X.AUTO,
-  CSS.MARGIN.RIGHT.ZERO,
-  CSS.MARGIN.RIGHT.ONE,
-  CSS.MARGIN.RIGHT.HALF,
-  CSS.MARGIN.RIGHT.QUARTER,
-  CSS.MARGIN.RIGHT.TWO,
-  CSS.MARGIN.RIGHT.FOUR,
-  CSS.MARGIN.RIGHT.AUTO,
-  CSS.MARGIN.BOTTOM.ZERO,
-  CSS.MARGIN.BOTTOM.ONE,
-  CSS.MARGIN.BOTTOM.HALF,
-  CSS.MARGIN.BOTTOM.QUARTER,
-  CSS.MARGIN.BOTTOM.TWO,
-  CSS.MARGIN.BOTTOM.FOUR,
-  CSS.MARGIN.LEFT.ZERO,
-  CSS.MARGIN.LEFT.ONE,
-  CSS.MARGIN.LEFT.HALF,
-  CSS.MARGIN.LEFT.QUARTER,
-  CSS.MARGIN.LEFT.TWO,
-  CSS.MARGIN.LEFT.FOUR,
-  CSS.MARGIN.LEFT.AUTO,
-  CSS.BORDER.FULL.ONE,
-  CSS.BORDER.FULL.TWO,
-  CSS.BORDER.TOP.ONE,
-  CSS.BORDER.TOP.TWO,
-  CSS.BORDER.RIGHT.ONE,
-  CSS.BORDER.RIGHT.TWO,
-  CSS.BORDER.BOTTOM.ONE,
-  CSS.BORDER.BOTTOM.TWO,
-  CSS.BORDER.LEFT.ONE,
-  CSS.BORDER.LEFT.TWO,
-  CSS.BORDER.RADIUS.ONE,
-  CSS.BORDER.RADIUS.HALF,
-  CSS.BORDER.RADIUS.QUARTER,
-  CSS.BORDER.RADIUS.FULL,
-  CSS.PADDING.FULL.ZERO,
-  CSS.PADDING.FULL.ONE,
-  CSS.PADDING.FULL.HALF,
-  CSS.PADDING.FULL.QUARTER,
-  CSS.PADDING.FULL.TWO,
-  CSS.PADDING.FULL.FOUR,
-  CSS.PADDING.Y.ZERO,
-  CSS.PADDING.Y.ONE,
-  CSS.PADDING.Y.HALF,
-  CSS.PADDING.Y.QUARTER,
-  CSS.PADDING.Y.TWO,
-  CSS.PADDING.Y.FOUR,
-  CSS.PADDING.TOP.ZERO,
-  CSS.PADDING.TOP.ONE,
-  CSS.PADDING.TOP.HALF,
-  CSS.PADDING.TOP.QUARTER,
-  CSS.PADDING.TOP.TWO,
-  CSS.PADDING.TOP.FOUR,
-  CSS.PADDING.X.ZERO,
-  CSS.PADDING.X.ONE,
-  CSS.PADDING.X.HALF,
-  CSS.PADDING.X.QUARTER,
-  CSS.PADDING.X.TWO,
-  CSS.PADDING.X.FOUR,
-  CSS.PADDING.RIGHT.ZERO,
-  CSS.PADDING.RIGHT.ONE,
-  CSS.PADDING.RIGHT.HALF,
-  CSS.PADDING.RIGHT.QUARTER,
-  CSS.PADDING.RIGHT.TWO,
-  CSS.PADDING.RIGHT.FOUR,
-  CSS.PADDING.BOTTOM.ZERO,
-  CSS.PADDING.BOTTOM.ONE,
-  CSS.PADDING.BOTTOM.HALF,
-  CSS.PADDING.BOTTOM.QUARTER,
-  CSS.PADDING.BOTTOM.TWO,
-  CSS.PADDING.BOTTOM.FOUR,
-  CSS.PADDING.LEFT.ZERO,
-  CSS.PADDING.LEFT.ONE,
-  CSS.PADDING.LEFT.HALF,
-  CSS.PADDING.LEFT.QUARTER,
-  CSS.PADDING.LEFT.TWO,
-  CSS.PADDING.LEFT.FOUR,
-  CSS.WIDTH.MAX_FULL,
-  CSS.WIDTH.ZERO,
-  CSS.WIDTH.FULL,
-  CSS.HEIGHT.ZERO,
-  CSS.HEIGHT.FULL,
-  CSS.ALIGN.Y.MIDDLE,
-  CSS.BREAK_WORD,
-  CSS.CURSOR.NOT_ALLOWED,
-  CSS.CURSOR.POINTER,
-  CSS.CURSOR.TEXT,
-  CSS.FONT.SIZE.TWELVE,
-  CSS.FONT.SIZE.FOURTEEN,
-  CSS.FONT.SIZE.SIXTEEN,
-  CSS.FONT.SIZE.TWENTY,
-  CSS.FONT.SIZE.TWENTY_FOUR,
-  CSS.FONT.SIZE.THIRTY_TWO,
-  CSS.FONT.WEIGHT.FOUR_HUNDRED,
-  CSS.FONT.WEIGHT.FIVE_HUNDRED,
-  CSS.FONT.WEIGHT.SIX_HUNDRED,
-  CSS.FONT.WEIGHT.SEVEN_HUNDRED,
-  CSS.LIST_BULLETS.OFF,
-  CSS.OBJECT.CENTER,
-  CSS.OBJECT.CONTAIN,
-  CSS.OBJECT.COVER,
-  CSS.OBJECT.SCALE_DOWN,
-  CSS.POINTER_EVENTS.ON,
-  CSS.POINTER_EVENTS.OFF,
-  CSS.SCROLLBAR.OFF,
-  CSS.SHADOW.BOTTOM,
-  CSS.SHADOW.TOP,
-  CSS.SNAP.ON,
-  CSS.SNAP_ALIGN.START,
-  CSS.ALIGN.X.LEFT,
-  CSS.ALIGN.X.CENTER,
-  CSS.ALIGN.X.RIGHT,
-  CSS.TEXT_TRANSFORM.LOWER,
-  CSS.TEXT_TRANSFORM.NONE,
-  CSS.TEXT_TRANSFORM.UPPER,
-  CSS.UNDERLINE.HOVER,
-  CSS.UNDERLINE.OFF,
-  CSS.UNDERLINE.ON,
-  CSS.VISIBILITY.ON,
-  CSS.VISIBILITY.OFF,
-  CSS.WHITESPACE_WRAP.OFF,
-  CSS.OVERFLOW.XY.AUTO,
-  CSS.OVERFLOW.XY.HIDDEN,
-  CSS.OVERFLOW.X.AUTO,
-  CSS.OVERFLOW.X.HIDDEN,
-  CSS.OVERFLOW.X.SCROLL,
-  CSS.OVERFLOW.Y.AUTO,
-  CSS.OVERFLOW.Y.HIDDEN,
-  CSS.Z_INDEX.ONE,
-] as const;

package/src/utilities/storybook.ts

@@ -76,6 +76,16 @@ export const click = {
   },
 };
 
+export const close = {
+  control: 'text',
+  description: 'JS code or function to execute on close event',
+  isEmit: true,
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: '() => void' },
+  },
+};
+
 export const dataTrack = {
   control: 'text',
   description: 'Data attribute for external tracking',
@@ -91,6 +101,8 @@ export const disabledArgType = {
   },
 };
 
+export const isProduction = process.env.NODE_ENV === 'production';
+
 export const doSomething = () => {
   alert('Did something.');
 };