@helsenorge/designsystem-react 6.4.0 → 6.6.0

package/components/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { DropdownMode } from './Dropdown';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Dropdown").DropdownProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        label: string;
+        children: string;
+        placeholder: string;
+        closeText: string;
+        open: false;
+        mode: DropdownMode.onwhite;
+        transparent: false;
+        fluid: false;
+        noCloseButton: false;
+        disabled: false;
+    };
+    argTypes: {
+        label: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        closeText: {
+            control: string;
+        };
+        open: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: typeof DropdownMode;
+        };
+        transparent: {
+            control: string;
+        };
+        fluid: {
+            control: string;
+        };
+        noCloseButton: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const RadioButtonChildren: Story;
+export declare const CheckboxChildren: Story;
+export declare const CustomContent: Story;
+export declare const EksternChildrenRefs: Story;
+//# sourceMappingURL=Dropdown.stories.d.ts.map

package/components/Duolist/Duolist.d.ts

@@ -4,13 +4,13 @@ export type DuolistVariants = 'normal' | 'line';
 export type BoldColumn = 'first' | 'second' | 'none';
 export type Border = 'no-border' | 'border';
 export type Formats = 'formatted' | 'non-formatted';
-interface DuolistProps {
+export interface DuolistProps {
     /** Determines which column is bold */
     boldColumn?: BoldColumn;
     /** Label of the Duolist */
     border?: Border;
     /** Label of the Duolist */
-    label?: TitleProps;
+    label?: React.ReactElement<TitleProps>;
     /** Formatted or non-formatted visual variants */
     format?: Formats;
     /** Character separator for non-formatted format */

package/components/Duolist/Duolist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\ninterface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: TitleProps;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n\n  const duolistWrapperClasses = classNames(\n    duolistStyles['duolist-wrapper'],\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n  });\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl style={!nonFormatted ? { gridTemplateColumns: `auto ${duolistColumnStyle}` } : undefined} className={duolistClasses}>\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","format","boldColumn","description","separator","term","firstBold","secondBold","nonFormatted","dtClassNames","classNames","duolistStyles","ddClassNames","renderContent","React","Duolist","border","descriptionWidth","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","duolistColumnStyle","AnalyticsId","Spacer","child","duolistGroup","Duolist$1"],"mappings":";;;;;AAmDO,MAAMA,IAA4C,CAASC,MAAA;AAChE,QAAM,EAAE,QAAAC,IAAS,aAAa,YAAAC,IAAaD,MAAW,kBAAkB,SAAS,SAAS,aAAAE,GAAa,WAAAC,IAAY,MAAM,MAAAC,EAAA,IAASL,GAE5HM,IAAYJ,MAAe,SAC3BK,IAAaL,MAAe,UAC5BM,IAAeP,MAAW,iBAE1BQ,IAAeC,EAAWC,EAAc,aAAgB;AAAA,IAC5D,CAACA,EAAc,mBAAmB,CAAC,GAAGL;AAAA,IACtC,CAACK,EAAc,4BAA4B,CAAC,GAAGH;AAAA,EAAA,CAChD,GACKI,IAAeF,EAAWC,EAAc,aAAgB;AAAA,IAC5D,CAACA,EAAc,mBAAmB,CAAC,GAAGJ;AAAA,IACtC,CAACI,EAAc,4BAA4B,CAAC,GAAGH;AAAA,EAAA,CAChD,GAEKK,IAAgB,wDAGfC,gBAAAA,EAAA,cAAA,MAAA,EAAG,kBAAgBN,IAAeJ,IAAY,QAAW,WAAWK,EAClE,GAAAJ,CACH,GACCS,gBAAAA,EAAA,cAAA,MAAA,EAAG,WAAWF,KAAeT,CAAY,CAC5C;AAIG,SAAAK,oCAAgB,OAAK,MAAAK,EAAgB,CAAA,IAASC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAGD,EAAgB,CAAA;AAC1E,GAEaE,IAAkC,CAASf,MAAA;AAChD,QAAA;AAAA,IACJ,YAAAE;AAAA,IACA,QAAAc,IAAS;AAAA,IACT,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAjB,IAAS;AAAA,IACT,WAAAG;AAAA,IACA,SAAAe,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,EACE,IAAAtB,GAEEuB,IAAYP,MAAW,UACvBQ,IAAWL,MAAY,QACvBM,IAAkBF,MAAcL,KAASM,IACzChB,IAAeP,MAAW,iBAE1ByB,IAAwBhB;AAAA,IAC5BC,EAAc,iBAAiB;AAAA,IAC/B;AAAA,MACE,CAACA,EAAc,yBAAyB,CAAC,GAAGY;AAAA,MAC5C,CAACZ,EAAc,oCAAoC,CAAC,GAAGc;AAAA,IACzD;AAAA,IACAJ;AAAA,EAAA,GAGIM,IAAiBjB,EAAWC,EAAc,SAAS;AAAA,IACvD,CAACA,EAAc,eAAe,CAAC,GAAGa;AAAA,IAClC,CAACb,EAAc,wBAAwB,CAAC,GAAGH;AAAA,EAAA,CAC5C,GACKoB,IAAqBX,IAAmBA,IAAmB,MAAM;AAEvE,SACGH,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,GAAuB,eAAaJ,GAAQ,oBAAkBO,EAAY,QAAA,GACvFX,KAEIJ,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAI,GACAJ,gBAAAA,EAAA,cAAAgB,GAAA,IAAO,CACV,GAEFhB,gBAAAA,EAAA,cAAC,MAAG,EAAA,OAAQN,IAAuE,SAAxD,EAAE,qBAAqB,QAAQoB,CAAkB,GAAG,GAAe,WAAWD,KACtGb,EAAM,SAAS,IAAIM,GAAU,CAACW,MAAmE;AAC5F,QAAAA,MAAU,QAAQ,OAAOA,IAAU;AAAa;AACpD,UAAMC,IAAeD;AACjB,QAAAC,EAAa,SAASjC;AACjB,aAAAe,EAAM,aAAaiB,GAAgD;AAAA,QACxE,YAAYC,EAAa,MAAM,cAAc9B;AAAA,QAC7C,QAAQ8B,EAAa,MAAM,UAAU/B;AAAA,QACrC,WAAW+B,EAAa,MAAM,aAAa5B;AAAA,MAAA,CAC5C;AAAA,EAEJ,CAAA,CACH,CACF;AAEJ,GAEA6B,IAAelB;"}
+{"version":3,"file":"Duolist.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n\n  const duolistWrapperClasses = classNames(\n    duolistStyles['duolist-wrapper'],\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n  });\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl style={!nonFormatted ? { gridTemplateColumns: `auto ${duolistColumnStyle}` } : undefined} className={duolistClasses}>\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","format","boldColumn","description","separator","term","firstBold","secondBold","nonFormatted","dtClassNames","classNames","duolistStyles","ddClassNames","renderContent","React","Duolist","border","descriptionWidth","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","duolistColumnStyle","AnalyticsId","Spacer","child","duolistGroup","Duolist$1"],"mappings":";;;;;AAmDO,MAAMA,IAA4C,CAASC,MAAA;AAChE,QAAM,EAAE,QAAAC,IAAS,aAAa,YAAAC,IAAaD,MAAW,kBAAkB,SAAS,SAAS,aAAAE,GAAa,WAAAC,IAAY,MAAM,MAAAC,EAAA,IAASL,GAE5HM,IAAYJ,MAAe,SAC3BK,IAAaL,MAAe,UAC5BM,IAAeP,MAAW,iBAE1BQ,IAAeC,EAAWC,EAAc,aAAgB;AAAA,IAC5D,CAACA,EAAc,mBAAmB,CAAC,GAAGL;AAAA,IACtC,CAACK,EAAc,4BAA4B,CAAC,GAAGH;AAAA,EAAA,CAChD,GACKI,IAAeF,EAAWC,EAAc,aAAgB;AAAA,IAC5D,CAACA,EAAc,mBAAmB,CAAC,GAAGJ;AAAA,IACtC,CAACI,EAAc,4BAA4B,CAAC,GAAGH;AAAA,EAAA,CAChD,GAEKK,IAAgB,wDAGfC,gBAAAA,EAAA,cAAA,MAAA,EAAG,kBAAgBN,IAAeJ,IAAY,QAAW,WAAWK,EAClE,GAAAJ,CACH,GACCS,gBAAAA,EAAA,cAAA,MAAA,EAAG,WAAWF,KAAeT,CAAY,CAC5C;AAIG,SAAAK,oCAAgB,OAAK,MAAAK,EAAgB,CAAA,IAASC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAGD,EAAgB,CAAA;AAC1E,GAEaE,IAAkC,CAASf,MAAA;AAChD,QAAA;AAAA,IACJ,YAAAE;AAAA,IACA,QAAAc,IAAS;AAAA,IACT,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAjB,IAAS;AAAA,IACT,WAAAG;AAAA,IACA,SAAAe,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,EACE,IAAAtB,GAEEuB,IAAYP,MAAW,UACvBQ,IAAWL,MAAY,QACvBM,IAAkBF,MAAcL,KAASM,IACzChB,IAAeP,MAAW,iBAE1ByB,IAAwBhB;AAAA,IAC5BC,EAAc,iBAAiB;AAAA,IAC/B;AAAA,MACE,CAACA,EAAc,yBAAyB,CAAC,GAAGY;AAAA,MAC5C,CAACZ,EAAc,oCAAoC,CAAC,GAAGc;AAAA,IACzD;AAAA,IACAJ;AAAA,EAAA,GAGIM,IAAiBjB,EAAWC,EAAc,SAAS;AAAA,IACvD,CAACA,EAAc,eAAe,CAAC,GAAGa;AAAA,IAClC,CAACb,EAAc,wBAAwB,CAAC,GAAGH;AAAA,EAAA,CAC5C,GACKoB,IAAqBX,IAAmBA,IAAmB,MAAM;AAEvE,SACGH,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,GAAuB,eAAaJ,GAAQ,oBAAkBO,EAAY,QAAA,GACvFX,KAEIJ,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAI,GACAJ,gBAAAA,EAAA,cAAAgB,GAAA,IAAO,CACV,GAEFhB,gBAAAA,EAAA,cAAC,MAAG,EAAA,OAAQN,IAAuE,SAAxD,EAAE,qBAAqB,QAAQoB,CAAkB,GAAG,GAAe,WAAWD,KACtGb,EAAM,SAAS,IAAIM,GAAU,CAACW,MAAmE;AAC5F,QAAAA,MAAU,QAAQ,OAAOA,IAAU;AAAa;AACpD,UAAMC,IAAeD;AACjB,QAAAC,EAAa,SAASjC;AACjB,aAAAe,EAAM,aAAaiB,GAAgD;AAAA,QACxE,YAAYC,EAAa,MAAM,cAAc9B;AAAA,QAC7C,QAAQ8B,EAAa,MAAM,UAAU/B;AAAA,QACrC,WAAW+B,EAAa,MAAM,aAAa5B;AAAA,MAAA,CAC5C;AAAA,EAEJ,CAAA,CACH,CACF;AAEJ,GAEA6B,IAAelB;"}

package/components/Duolist/Duolist.stories.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Duolist").DuolistProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+    };
+    argTypes: {
+        descriptionWidth: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DescriptionWithLink: Story;
+export declare const WithLabel: Story;
+export declare const WithLines: Story;
+export declare const WithBorder: Story;
+export declare const BoldColumn: Story;
+export declare const DescriptionWidth: Story;
+export declare const NonFormatted: Story;
+//# sourceMappingURL=Duolist.stories.d.ts.map

package/components/EmptyState/EmptyState.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TitleTags } from '../Title';
-interface EmptyStateProps {
+export interface EmptyStateProps {
     /** Text content */
     children: React.ReactNode;
     /** Markup props for title. Default: h2 */

package/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from 'react';\n\nimport NobodyHome from './NobodyHome';\nimport { AnalyticsId } from '../../constants';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface EmptyStateProps {\n  /** Text content */\n  children: React.ReactNode;\n  /** Markup props for title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst EmptyState: React.FC<EmptyStateProps> = props => (\n  <div className={styles.emptystate} data-testid={props.testId} data-analyticsid={AnalyticsId.EmptyState}>\n    <NobodyHome />\n    <Title appearance={'title3'} htmlMarkup={props.titleHtmlMarkup || 'h2'}>\n      {props.children}\n    </Title>\n  </div>\n);\n\nexport default EmptyState;\n"],"names":["EmptyState","props","React","styles","AnalyticsId","NobodyHome","Title","EmptyState$1"],"mappings":";;;;;AAiBA,MAAMA,IAAwC,CAC5CC,MAAAC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWC,EAAO,YAAY,eAAaF,EAAM,QAAQ,oBAAkBG,EAAY,8CACzFC,GAAW,IAAA,GACXH,gBAAAA,EAAA,cAAAI,GAAA,EAAM,YAAY,UAAU,YAAYL,EAAM,mBAAmB,KAAA,GAC/DA,EAAM,QACT,CACF,GAGFM,IAAeP;"}
+{"version":3,"file":"EmptyState.js","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React from 'react';\n\nimport NobodyHome from './NobodyHome';\nimport { AnalyticsId } from '../../constants';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface EmptyStateProps {\n  /** Text content */\n  children: React.ReactNode;\n  /** Markup props for title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst EmptyState: React.FC<EmptyStateProps> = props => (\n  <div className={styles.emptystate} data-testid={props.testId} data-analyticsid={AnalyticsId.EmptyState}>\n    <NobodyHome />\n    <Title appearance={'title3'} htmlMarkup={props.titleHtmlMarkup || 'h2'}>\n      {props.children}\n    </Title>\n  </div>\n);\n\nexport default EmptyState;\n"],"names":["EmptyState","props","React","styles","AnalyticsId","NobodyHome","Title","EmptyState$1"],"mappings":";;;;;AAiBA,MAAMA,IAAwC,CAC5CC,MAAAC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWC,EAAO,YAAY,eAAaF,EAAM,QAAQ,oBAAkBG,EAAY,8CACzFC,GAAW,IAAA,GACXH,gBAAAA,EAAA,cAAAI,GAAA,EAAM,YAAY,UAAU,YAAYL,EAAM,mBAAmB,KAAA,GAC/DA,EAAM,QACT,CACF,GAGFM,IAAeP;"}

package/components/EmptyState/EmptyState.stories.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./EmptyState").EmptyStateProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithAnchorLink: Story;
+//# sourceMappingURL=EmptyState.stories.d.ts.map

package/components/Expander/Expander.d.ts

@@ -7,7 +7,7 @@ export declare enum ExpanderSize {
     large = "large"
 }
 export type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
-interface ExpanderProps {
+export interface ExpanderProps {
     /** Sets the trigger title */
     title: string;
     /** Sets the expanded content */
@@ -30,6 +30,8 @@ interface ExpanderProps {
     renderChildrenWhenClosed?: boolean;
     /** Sets the data-testid attribute on the expander button. */
     testId?: string;
+    /** Overrides the default z-index of the expander header */
+    zIndex?: number;
 }
 declare const Expander: React.FC<ExpanderProps>;
 export default Expander;

package/components/Expander/Expander.js

@@ -1,30 +1,31 @@
 import r, { useRef as N } from "react";
 import d from "classnames";
-import { ZIndex as A, AnalyticsId as C, IconSize as p } from "../../constants.js";
-import { useExpand as D } from "../../hooks/useExpand.js";
-import { useHover as O } from "../../hooks/useHover.js";
-import { useSticky as U } from "../../hooks/useSticky.js";
-import Z from "../Button/Button.js";
+import { ZIndex as D, AnalyticsId as C, IconSize as p } from "../../constants.js";
+import { useExpand as O } from "../../hooks/useExpand.js";
+import { useHover as U } from "../../hooks/useHover.js";
+import { useSticky as Z } from "../../hooks/useSticky.js";
+import j from "../Button/Button.js";
 import { Icon as _ } from "../Icon/Icon.js";
 import b from "../Icons/ChevronDown.js";
 import h from "../Icons/ChevronUp.js";
-import j from "../LazyIcon/LazyIcon.js";
+import q from "../LazyIcon/LazyIcon.js";
 import e from "./styles.module.scss";
-var q = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(q || {});
-const F = (s) => {
+var F = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(F || {});
+const G = (s) => {
   const {
     title: x,
-    children: $,
+    children: z,
     size: t = "small",
     color: g,
     svgIcon: o,
-    expanded: k = !1,
-    noNestedLine: z = !1,
+    expanded: $ = !1,
+    noNestedLine: k = !1,
     sticky: S = !1,
     testId: f,
     onExpand: w,
-    renderChildrenWhenClosed: R = !1
-  } = s, [n, u] = D(k, w), E = N(null), l = N(null), { isHovered: i } = O(l), { isOutsideWindow: W, isLeavingWindow: c, offsetHeight: v, contentWidth: y } = U(E, l), a = S && n && W, I = (m) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${m}`]) }, /* @__PURE__ */ r.createElement(_, { svgIcon: n ? h : b, size: p.XSmall, isHovered: i })), X = d(
+    renderChildrenWhenClosed: R = !1,
+    zIndex: W = D.ExpanderTrigger
+  } = s, [n, u] = O($, w), E = N(null), l = N(null), { isHovered: i } = U(l), { isOutsideWindow: X, isLeavingWindow: c, offsetHeight: v, contentWidth: y } = Z(E, l), a = S && n && X, I = (m) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${m}`]) }, /* @__PURE__ */ r.createElement(_, { svgIcon: n ? h : b, size: p.XSmall, isHovered: i })), H = d(
     e.expander__trigger,
     e[`expander__trigger--${t}`],
     t === "large" && e[`expander__trigger--${g || "neutral"}`],
@@ -32,13 +33,13 @@ const F = (s) => {
     n && e["expander__trigger--expanded"],
     a && !c && e["expander__trigger--sticky"],
     a && c && e["expander__trigger--absolute"]
-  ), H = () => /* @__PURE__ */ r.createElement(
+  ), L = () => /* @__PURE__ */ r.createElement(
     "button",
     {
       type: "button",
-      className: X,
+      className: H,
       style: {
-        zIndex: i || a ? A.ExpanderTrigger : void 0,
+        zIndex: i || a ? W : void 0,
         width: a && y ? `${y}px` : void 0
       },
       "aria-expanded": n,
@@ -48,19 +49,19 @@ const F = (s) => {
       "data-analyticsid": C.Expander
     },
     t === "small" && I("left"),
-    o && /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e["expander__icon--left"]) }, typeof o == "string" ? /* @__PURE__ */ r.createElement(j, { iconName: o, size: p.XSmall, isHovered: i }) : /* @__PURE__ */ r.createElement(_, { svgIcon: o, size: p.XSmall, isHovered: i })),
+    o && /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e["expander__icon--left"]) }, typeof o == "string" ? /* @__PURE__ */ r.createElement(q, { iconName: o, size: p.XSmall, isHovered: i }) : /* @__PURE__ */ r.createElement(_, { svgIcon: o, size: p.XSmall, isHovered: i })),
     x,
     t === "large" && I("right")
-  ), L = d(
+  ), T = d(
     e.expander__button,
     n && e["expander__button--expanded"],
     a && !c && e["expander__button--sticky"],
     a && c && e["expander__button--absolute"]
-  ), T = () => /* @__PURE__ */ r.createElement(
-    Z,
+  ), B = () => /* @__PURE__ */ r.createElement(
+    j,
     {
       variant: "borderless",
-      className: L,
+      className: T,
       "aria-expanded": n,
       ref: l,
       onClick: () => u(!n),
@@ -69,7 +70,7 @@ const F = (s) => {
     },
     /* @__PURE__ */ r.createElement(_, { svgIcon: n ? h : b, size: p.XSmall }),
     x
-  ), B = () => {
+  ), A = () => {
     if (!R && !n)
       return null;
     const m = d(
@@ -78,9 +79,9 @@ const F = (s) => {
       t === "large" && e[`expander__content--${g || "neutral"}`],
       t === "large" && o && e["expander__content--icon"],
       n && e["expander__content--expanded"],
-      t === "small" && !z && e["expander__content--nested-line"]
+      t === "small" && !k && e["expander__content--nested-line"]
     );
-    return /* @__PURE__ */ r.createElement("div", { className: m }, $);
+    return /* @__PURE__ */ r.createElement("div", { className: m }, z);
   };
   return /* @__PURE__ */ r.createElement(
     "div",
@@ -89,12 +90,12 @@ const F = (s) => {
       ref: E,
       style: { paddingTop: a && v ? `${v}px` : void 0 }
     },
-    t === "large" ? H() : T(),
-    B()
+    t === "large" ? L() : B(),
+    A()
   );
-}, ae = F;
+}, oe = G;
 export {
-  q as ExpanderSize,
-  ae as default
+  F as ExpanderSize,
+  oe as default
 };
 //# sourceMappingURL=Expander.js.map

package/components/Expander/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\ninterface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const renderChevron = (align: 'left' | 'right') => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n    isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n  );\n\n  const renderTrigger = () => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n    isSticky && isLeavingWindow && styles['expander__button--absolute']\n  );\n\n  const renderButton = () => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","ZIndex","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}
+{"version":3,"file":"Expander.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex = ZIndex.ExpanderTrigger,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n    isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n    isSticky && isLeavingWindow && styles['expander__button--absolute']\n  );\n\n  const renderButton = (): React.ReactNode => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":";;;;;;;;;;;;AAkBY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA;AAkCZ,MAAMC,IAAoC,CAASC,MAAA;AAC3C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,SAASC;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,cAAAC,IAAe;AAAA,IACf,QAAAC,IAAS;AAAA,IACT,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,0BAAAC,IAA2B;AAAA,IAC3B,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GACE,CAACc,GAAYC,CAAa,IAAIC,EAAUV,GAAUI,CAAQ,GAC1DO,IAAcC,EAAuB,IAAI,GACzCC,IAAaD,EAA0B,IAAI,GAC3C,EAAE,WAAAE,EAAA,IAAcC,EAASF,CAAU,GACnC,EAAE,iBAAAG,GAAiB,iBAAAC,GAAiB,cAAAC,GAAc,cAAAC,MAAiBC,EAAUT,GAAaE,CAAU,GAEpGQ,IAAWnB,KAAUM,KAAcQ,GAEnCM,IAAgB,CAACC,MACpBC,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWC,EAAWC,EAAO,gBAAmBA,EAAO,mBAAmBH,CAAK,EAAE,CAAC,EAAA,GACrFC,gBAAAA,EAAA,cAAAG,GAAA,EAAK,SAASnB,IAAaoB,IAAYC,GAAa,MAAMC,EAAS,QAAQ,WAAAhB,EAAA,CAAsB,CACpG,GAGIiB,IAAmBN;AAAA,IACvBC,EAAO;AAAA,IACPA,EAAO,sBAAsB7B,CAAI,EAAE;AAAA,IACnCA,MAAS,WAAsB6B,EAAO,sBAAsB5B,KAAS,SAAS,EAAE;AAAA,IAChFD,MAAS,WAAsBE,KAAQ2B,EAAO,yBAAyB;AAAA,IACvElB,KAAckB,EAAO,6BAA6B;AAAA,IAClDL,KAAY,CAACJ,KAAmBS,EAAO,2BAA2B;AAAA,IAClEL,KAAYJ,KAAmBS,EAAO,6BAA6B;AAAA,EAAA,GAG/DM,IAAgB,MACpBR,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWO;AAAA,MACX,OAAO;AAAA,QACL,QAAQjB,KAAaO,IAAWf,IAAS;AAAA,QACzC,OAAOe,KAAYF,IAAe,GAAGA,CAAY,OAAO;AAAA,MAC1D;AAAA,MACA,iBAAeX;AAAA,MACf,KAAKK;AAAA,MACL,SAAS,MAAYJ,EAAc,CAACD,CAAU;AAAA,MAC9C,eAAaL;AAAA,MACb,oBAAkB8B,EAAY;AAAA,IAAA;AAAA,IAE7BpC,MAAS,WAAsByB,EAAc,MAAM;AAAA,IACnDvB,KACCyB,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWC,EAAWC,EAAO,gBAAmBA,EAAO,sBAAsB,CAAC,EACjF,GAAA,OAAO3B,KAAS,WACfyB,gBAAAA,EAAA,cAACU,GAAS,EAAA,UAAUnC,GAAM,MAAM+B,EAAS,QAAQ,WAAAhB,GAAsB,IAEvEU,gBAAAA,EAAA,cAACG,GAAK,EAAA,SAAS5B,GAAM,MAAM+B,EAAS,QAAQ,WAAAhB,GAAsB,CAEtE;AAAA,IAEDnB;AAAA,IACAE,MAAS,WAAsByB,EAAc,OAAO;AAAA,EAAA,GAInDa,IAAkBV;AAAA,IACtBC,EAAO;AAAA,IACPlB,KAAckB,EAAO,4BAA4B;AAAA,IACjDL,KAAY,CAACJ,KAAmBS,EAAO,0BAA0B;AAAA,IACjEL,KAAYJ,KAAmBS,EAAO,4BAA4B;AAAA,EAAA,GAG9DU,IAAe,MACnBZ,gBAAAA,EAAA;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAWF;AAAA,MACX,iBAAe3B;AAAA,MACf,KAAKK;AAAA,MACL,SAAS,MAAYJ,EAAc,CAACD,CAAU;AAAA,MAC9C,QAAAL;AAAA,MACA,oBAAkB8B,EAAY;AAAA,IAAA;AAAA,IAE9BT,gBAAAA,EAAA,cAACG,KAAK,SAASnB,IAAaoB,IAAYC,GAAa,MAAMC,EAAS,OAAQ,CAAA;AAAA,IAC3EnC;AAAA,EAAA,GAIC2C,IAAgB,MAAuB;AACvC,QAAA,CAACjC,KAA4B,CAACG;AACzB,aAAA;AAGT,UAAM+B,IAAmBd;AAAA,MACvBC,EAAO;AAAA,MACPA,EAAO,sBAAsB7B,CAAI,EAAE;AAAA,MACnCA,MAAS,WAAsB6B,EAAO,sBAAsB5B,KAAS,SAAS,EAAE;AAAA,MAChFD,MAAS,WAAsBE,KAAQ2B,EAAO,yBAAyB;AAAA,MACvElB,KAAckB,EAAO,6BAA6B;AAAA,MAClD7B,MAAS,WAAsB,CAACI,KAAgByB,EAAO,gCAAgC;AAAA,IAAA;AAGzF,WAAQF,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWe,EAAA,GAAmB3C,CAAS;AAAA,EAAA;AAInD,SAAA4B,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE,EAAO;AAAA,MAClB,KAAKf;AAAA,MACL,OAAO,EAAE,YAAYU,KAAYH,IAAe,GAAGA,CAAY,OAAO,OAAU;AAAA,IAAA;AAAA,IAE/ErB,MAAS,UAAqBmC,EAAc,IAAII,EAAa;AAAA,IAC7DE,EAAc;AAAA,EAAA;AAGrB,GAEAE,KAAe/C;"}

package/components/Expander/Expander.stories.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { ExpanderSize } from './Expander';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Expander").ExpanderProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        title: string;
+        size: ExpanderSize.small;
+        color: "blueberry";
+        noNestedLine: false;
+        expanded: false;
+        renderChildrenWhenClosed: false;
+        sticky: true;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        title: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: typeof ExpanderSize;
+        };
+        color: {
+            control: string;
+            options: string[];
+        };
+        noNestedLine: {
+            control: string;
+        };
+        expanded: {
+            control: string;
+        };
+        renderChildrenWhenClosed: {
+            control: string;
+        };
+        sticky: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DefaultSmall: Story;
+export declare const Large: Story;
+export declare const WithIcon: Story;
+export declare const WithLoader: Story;
+export declare const WithCallback: Story;
+//# sourceMappingURL=Expander.stories.d.ts.map

package/components/ExpanderHierarchy/ExpanderHierarchy.stories.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import ExpanderHierarchy from './ExpanderHierarchy';
+type ExpanderHierarchyWithAndCustomArgs = React.ComponentProps<typeof ExpanderHierarchy> & {
+    title: string;
+    expanded: boolean;
+};
+declare const meta: {
+    title: string;
+    component: import("./ExpanderHierarchy").ExpanderHierarchyCompound;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        title: string;
+        htmlMarkup: "h2";
+        expanded: false;
+        print: false;
+    };
+    argTypes: {
+        title: {
+            control: string;
+        };
+        htmlMarkup: {
+            control: string;
+            options: string[];
+        };
+        expanded: {
+            control: string;
+        };
+        print: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ExpanderHierarchyWithAndCustomArgs>;
+export declare const Default: Story;
+//# sourceMappingURL=ExpanderHierarchy.stories.d.ts.map

package/components/ExpanderList/ExpanderList.d.ts

@@ -31,6 +31,8 @@ interface ExpanderListProps {
     testId?: string;
     /** Sets visual priority */
     variant?: ExpanderListVariant;
+    /** Overrides the default z-index of the expander header */
+    zIndex?: number;
 }
 type Modify<T, R> = Omit<T, keyof R> & R;
 type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
@@ -49,6 +51,8 @@ type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
     handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     /** Called when expander is open/closed. */
     onExpand?: (isExpanded: boolean) => void;
+    /** Overrides the default z-index of the expander header */
+    zIndex?: number;
 }> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;
 export declare const ExpanderList: ExpanderListCompound;
 export default ExpanderList;