@transferwise/components 46.63.0 → 46.65.0

package/build/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const labelId = useId();\n  const contentId = useId();\n  const isExpandable = Boolean(children);\n\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isExpandable && isExpanded,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-expanded={isExpandable ? isExpanded : undefined}\n        aria-controls={isExpanded ? contentId : undefined}\n        id={labelId}\n        aria-label={ariaLabel}\n        as={isExpandable ? 'button' : 'div'}\n        className=\"np-card__button\"\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={\n          isExpandable ? <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} /> : null\n        }\n        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n      />\n\n      {isExpandable && (\n        <div\n          className={clsx('np-card__divider', {\n            'np-card__divider--expanded': isExpanded,\n          })}\n        />\n      )}\n\n      {isExpandable && isExpanded && (\n        <Body\n          as=\"div\"\n          type={Typography.BODY_LARGE}\n          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n          id={contentId}\n          aria-labelledby={labelId}\n        >\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE,CAAA;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC,CAAA;EAGtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBAAGK,cAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAAA;OAAO,CAAG,GAAG,IACxF;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB,SAAAA;AAAU,KAGnE,CAAA,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB,UAAAA;OAC/B,CAAA;KACD,CACH,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const labelId = useId();\n  const contentId = useId();\n  const isExpandable = Boolean(children);\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isExpandable && isExpanded,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-expanded={isExpandable ? isExpanded : undefined}\n        aria-controls={isExpanded ? contentId : undefined}\n        id={labelId}\n        aria-label={ariaLabel}\n        as={isExpandable ? 'button' : 'div'}\n        className=\"np-card__button\"\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={\n          isExpandable ? (\n            <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n          ) : null\n        }\n        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n      />\n\n      {isExpandable && (\n        <div\n          className={clsx('np-card__divider', {\n            'np-card__divider--expanded': isExpanded,\n          })}\n        />\n      )}\n\n      {isExpandable && isExpanded && (\n        <Body\n          as=\"div\"\n          type={Typography.BODY_LARGE}\n          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n          id={contentId}\n          aria-labelledby={labelId}\n        >\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE,CAAA;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC,CAAA;EAEtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,cAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAAA;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB,SAAAA;AAAU,KAGnE,CAAA,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB,UAAAA;OAC/B,CAAA;KACD,CACH,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const labelId = useId();\n  const contentId = useId();\n  const isExpandable = Boolean(children);\n\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isExpandable && isExpanded,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-expanded={isExpandable ? isExpanded : undefined}\n        aria-controls={isExpanded ? contentId : undefined}\n        id={labelId}\n        aria-label={ariaLabel}\n        as={isExpandable ? 'button' : 'div'}\n        className=\"np-card__button\"\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={\n          isExpandable ? <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} /> : null\n        }\n        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n      />\n\n      {isExpandable && (\n        <div\n          className={clsx('np-card__divider', {\n            'np-card__divider--expanded': isExpanded,\n          })}\n        />\n      )}\n\n      {isExpandable && isExpanded && (\n        <Body\n          as=\"div\"\n          type={Typography.BODY_LARGE}\n          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n          id={contentId}\n          aria-labelledby={labelId}\n        >\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE,CAAA;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC,CAAA;EAGtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBAAGK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAAA;OAAO,CAAG,GAAG,IACxF;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB,SAAAA;AAAU,KAGnE,CAAA,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB,UAAAA;OAC/B,CAAA;KACD,CACH,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n  'aria-label'?: string;\n  as?: React.ElementType;\n  isExpanded?: boolean;\n  title: React.ReactNode;\n  details: React.ReactNode;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n  {\n    'aria-label': ariaLabel,\n    as: Element = 'div',\n    isExpanded,\n    title,\n    details,\n    children,\n    onClick,\n    icon,\n    id,\n    className,\n    'data-testid': dataTestId,\n  }: CardProps,\n  reference,\n) {\n  const labelId = useId();\n  const contentId = useId();\n  const isExpandable = Boolean(children);\n\n  return (\n    <Element\n      ref={reference}\n      className={clsx('np-card', className, {\n        'np-card--expanded': isExpandable && isExpanded,\n        'np-card--inactive': !children,\n        'np-card--has-icon': !!icon,\n      })}\n      id={id}\n      data-testid={dataTestId}\n    >\n      <Option\n        aria-expanded={isExpandable ? isExpanded : undefined}\n        aria-controls={isExpanded ? contentId : undefined}\n        id={labelId}\n        aria-label={ariaLabel}\n        as={isExpandable ? 'button' : 'div'}\n        className=\"np-card__button\"\n        media={icon}\n        title={title}\n        content={details}\n        showMediaAtAllSizes\n        button={\n          isExpandable ? (\n            <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n          ) : null\n        }\n        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n      />\n\n      {isExpandable && (\n        <div\n          className={clsx('np-card__divider', {\n            'np-card__divider--expanded': isExpanded,\n          })}\n        />\n      )}\n\n      {isExpandable && isExpanded && (\n        <Body\n          as=\"div\"\n          type={Typography.BODY_LARGE}\n          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n          id={contentId}\n          aria-labelledby={labelId}\n        >\n          {children}\n        </Body>\n      )}\n    </Element>\n  );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE,CAAA;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC,CAAA;EAEtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAAA;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB,SAAAA;AAAU,KAGnE,CAAA,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB,UAAAA;OAC/B,CAAA;KACD,CACH,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/circularButton/CircularButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { ControlType, Priority , Typography } from '../common';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <input\n        type=\"button\"\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","_jsxs","_jsx","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;AAiBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAElF,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;AAE5F,EAAA,oBACEiB,eAAA,CAAA,OAAA,EAAA;AAAOpB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;AAAAC,IAAAA,QAAA,gBAC3FoB,cAAA,CAAA,OAAA,EAAA;AACEd,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYN,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZM,cAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACvB,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEiB,qBAAU,CAACC,iBAAkB;AAAAxB,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { ControlType, Priority, Typography } from '../common';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <input\n        type=\"button\"\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","_jsxs","_jsx","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;AAiBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAElF,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;AAE5F,EAAA,oBACEiB,eAAA,CAAA,OAAA,EAAA;AAAOpB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;AAAAC,IAAAA,QAAA,gBAC3FoB,cAAA,CAAA,OAAA,EAAA;AACEd,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYN,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZM,cAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACvB,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEiB,qBAAU,CAACC,iBAAkB;AAAAxB,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/circularButton/CircularButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { ControlType, Priority , Typography } from '../common';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <input\n        type=\"button\"\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","_jsxs","_jsx","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;AAiBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,IAAI,CAAC,YAAY,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAElF,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;AAE5F,EAAA,oBACEiB,IAAA,CAAA,OAAA,EAAA;AAAOpB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;AAAAC,IAAAA,QAAA,gBAC3FoB,GAAA,CAAA,OAAA,EAAA;AACEd,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYN,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZM,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACvB,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEiB,UAAU,CAACC,iBAAkB;AAAAxB,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { ControlType, Priority, Typography } from '../common';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <input\n        type=\"button\"\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","_jsxs","_jsx","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;AAiBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,IAAI,CAAC,YAAY,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAElF,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;AAE5F,EAAA,oBACEiB,IAAA,CAAA,OAAA,EAAA;AAAOpB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;AAAAC,IAAAA,QAAA,gBAC3FoB,GAAA,CAAA,OAAA,EAAA;AACEd,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYN,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZM,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACvB,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEiB,UAAU,CAACC,iBAAkB;AAAAxB,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/common/bottomSheet/BottomSheet.js

@@ -23,7 +23,10 @@ const MOVE_OFFSET_THRESHOLD = 50;
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = props => {
+const BottomSheet = ({
+  role = 'dialog',
+  ...props
+}) => {
   const bottomSheetReference = React.useRef(null);
   const topBarReference = React.useRef(null);
   const contentReference = React.useRef(null);
@@ -144,6 +147,8 @@ const BottomSheet = props => {
   const is400Zoom = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
   const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
   return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
+    "aria-labelledby": props['aria-labelledby'],
+    role: role,
     open: props.open,
     className: props.className,
     onClose: close,
@@ -160,7 +165,8 @@ const BottomSheet = props => {
       className: clsx.clsx('np-bottom-sheet', props.className),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         id: overlayId,
-        role: "dialog",
+        "aria-labelledby": props['aria-labelledby'],
+        role: role,
         "aria-modal": true,
         onTouchStart: onSwipeStart,
         onTouchMove: onSwipeMove,

package/build/common/bottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = (props: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer open={props.open} className={props.className} onClose={close}>\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","role","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps &\n    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer\n      aria-labelledby={props['aria-labelledby']}\n      role={role}\n      open={props.open}\n      className={props.className}\n      onClose={close}\n    >\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          id={overlayId}\n          aria-labelledby={props['aria-labelledby']}\n          role={role}\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/bottomSheet/BottomSheet.mjs

@@ -21,7 +21,10 @@ const MOVE_OFFSET_THRESHOLD = 50;
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = props => {
+const BottomSheet = ({
+  role = 'dialog',
+  ...props
+}) => {
   const bottomSheetReference = useRef(null);
   const topBarReference = useRef(null);
   const contentReference = useRef(null);
@@ -142,6 +145,8 @@ const BottomSheet = props => {
   const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   const overlayId = useContext(OverlayIdContext);
   return is400Zoom ? /*#__PURE__*/jsx(Drawer, {
+    "aria-labelledby": props['aria-labelledby'],
+    role: role,
     open: props.open,
     className: props.className,
     onClose: close,
@@ -158,7 +163,8 @@ const BottomSheet = props => {
       className: clsx('np-bottom-sheet', props.className),
       children: /*#__PURE__*/jsxs("div", {
         id: overlayId,
-        role: "dialog",
+        "aria-labelledby": props['aria-labelledby'],
+        role: role,
         "aria-modal": true,
         onTouchStart: onSwipeStart,
         onTouchMove: onSwipeMove,

package/build/common/bottomSheet/BottomSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = (props: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer open={props.open} className={props.className} onClose={close}>\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","role","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps &\n    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer\n      aria-labelledby={props['aria-labelledby']}\n      role={role}\n      open={props.open}\n      className={props.className}\n      onClose={close}\n    >\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <div\n          id={overlayId}\n          aria-labelledby={props['aria-labelledby']}\n          role={role}\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/locale/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/common/locale/index.ts"],"sourcesContent":["import { Direction } from '..';\n\nexport const DEFAULT_LANG = 'en';\nexport const DEFAULT_LOCALE = 'en-GB';\n\n/**\n * Languages written right-to-left.\n */\nexport const RTL_LANGUAGES = ['ar', 'he'];\n\n/**\n * @deprecated The source of truth for supported languages lives in Crab.\n */\nexport const SUPPORTED_LANGUAGES = [\n  DEFAULT_LANG,\n  'de',\n  'es',\n  'fr',\n  'hu',\n  'id',\n  'it',\n  'ja',\n  'pl',\n  'pt',\n  'ro',\n  'ru',\n  'th',\n  'tr',\n  'uk',\n  'zh',\n];\n\n/**\n * Verifies and adjusts locale, replacing `_` with `-`.\n *\n * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns `null` if locale is unrecognized by `Intl.Locale`.\n */\nexport function adjustLocale(locale: string) {\n  const localeTrimmed = locale?.trim();\n  if (localeTrimmed) {\n    try {\n      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error(error);\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding lang (iso2) for provided locale.\n *\n * @deprecated The use of this function almost always breaks language variants\n * e.g. Simplified and Traditional Chinese.\n * There should be no use case for this function.\n * To select the correct translations from a translations object, pass the\n * locale directly into Crab's getLocalisedMessages.\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.\n */\nexport function getLangFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  if (adjustedLocale != null) {\n    const { language } = new Intl.Locale(adjustedLocale);\n    if (SUPPORTED_LANGUAGES.includes(language)) {\n      return language;\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding country code (iso2) for locales code with explicit region value.\n *\n * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.\n * @returns `null` if the locale is invalid or the region can‘t be identified.\n */\nexport function getCountryFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;\n}\n\n/**\n * Provides the layout direction for a given locale.\n *\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.\n */\nexport function getDirectionFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)\n    ? Direction.RTL\n    : Direction.LTR;\n}\n"],"names":["DEFAULT_LANG","DEFAULT_LOCALE","RTL_LANGUAGES","SUPPORTED_LANGUAGES","adjustLocale","locale","localeTrimmed","trim","Intl","Locale","replace","baseName","error","console","getLangFromLocale","adjustedLocale","language","includes","getCountryFromLocale","region","getDirectionFromLocale","Direction","RTL","LTR"],"mappings":";;;;AAEO,MAAMA,YAAY,GAAG,KAAI;AACzB,MAAMC,cAAc,GAAG,QAAO;AAErC;;AAEG;MACUC,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,EAAC;AAEzC;;AAEG;AACUC,MAAAA,mBAAmB,GAAG,CACjCH,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACL;AAED;;;;;AAKG;AACG,SAAUI,YAAYA,CAACC,MAAc,EAAA;AACzC,EAAA,MAAMC,aAAa,GAAGD,MAAM,EAAEE,IAAI,EAAE,CAAA;AACpC,EAAA,IAAID,aAAa,EAAE;IACjB,IAAI;AACF,MAAA,OAAO,IAAIE,IAAI,CAACC,MAAM,CAACH,aAAa,CAACI,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAACC,QAAQ,CAAA;KACjE,CAAC,OAAOC,KAAK,EAAE;AACd;AACAC,MAAAA,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC,CAAA;AACtB,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA;;;;;;;;;;AAUG;AACG,SAAUE,iBAAiBA,CAACT,MAAc,EAAA;AAC9C,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;EAC3C,IAAIU,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM;AAAEC,MAAAA,QAAAA;AAAQ,KAAE,GAAG,IAAIR,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAAA;AACpD,IAAA,IAAIZ,mBAAmB,CAACc,QAAQ,CAACD,QAAQ,CAAC,EAAE;AAC1C,MAAA,OAAOA,QAAQ,CAAA;AACjB,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA;;;;;AAKG;AACG,SAAUE,oBAAoBA,CAACb,MAAc,EAAA;AACjD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;AAC3C,EAAA,OAAOU,cAAc,IAAI,IAAI,GAAG,IAAIP,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACI,MAAM,IAAI,IAAI,GAAG,IAAI,CAAA;AACvF,CAAA;AAEA;;;;;AAKG;AACG,SAAUC,sBAAsBA,CAACf,MAAc,EAAA;AACnD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;EAC3C,OAAOU,cAAc,IAAI,IAAI,IAAIb,aAAa,CAACe,QAAQ,CAAC,IAAIT,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACC,QAAQ,CAAC,GAC7FK,mBAAS,CAACC,GAAG,GACbD,mBAAS,CAACE,GAAG,CAAA;AACnB;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/common/locale/index.ts"],"sourcesContent":["import { Direction } from '..';\n\nexport const DEFAULT_LANG = 'en';\nexport const DEFAULT_LOCALE = 'en-GB';\n\n/**\n * Languages written right-to-left.\n */\nexport const RTL_LANGUAGES = ['ar', 'he'];\n\n/**\n * @deprecated The source of truth for supported languages lives in Crab.\n */\nexport const SUPPORTED_LANGUAGES = [\n  DEFAULT_LANG,\n  'de',\n  'es',\n  'fr',\n  'hu',\n  'id',\n  'it',\n  'ja',\n  'pl',\n  'pt',\n  'ro',\n  'ru',\n  'th',\n  'tr',\n  'uk',\n  'zh',\n];\n\n/**\n * Verifies and adjusts locale, replacing `_` with `-`.\n *\n * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns `null` if locale is unrecognized by `Intl.Locale`.\n */\nexport function adjustLocale(locale: string) {\n  const localeTrimmed = locale?.trim();\n  if (localeTrimmed) {\n    try {\n      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error(error);\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding lang (iso2) for provided locale.\n *\n * @deprecated The use of this function almost always breaks language variants\n * e.g. Simplified and Traditional Chinese.\n * There should be no use case for this function.\n * To select the correct translations from a translations object, pass the\n * locale directly into Crab's getLocalisedMessages.\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.\n */\nexport function getLangFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  if (adjustedLocale != null) {\n    const { language } = new Intl.Locale(adjustedLocale);\n    if (SUPPORTED_LANGUAGES.includes(language)) {\n      return language;\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding country code (iso2) for locales code with explicit region value.\n *\n * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.\n * @returns `null` if the locale is invalid or the region can‘t be identified.\n */\nexport function getCountryFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null ? (new Intl.Locale(adjustedLocale).region ?? null) : null;\n}\n\n/**\n * Provides the layout direction for a given locale.\n *\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.\n */\nexport function getDirectionFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)\n    ? Direction.RTL\n    : Direction.LTR;\n}\n"],"names":["DEFAULT_LANG","DEFAULT_LOCALE","RTL_LANGUAGES","SUPPORTED_LANGUAGES","adjustLocale","locale","localeTrimmed","trim","Intl","Locale","replace","baseName","error","console","getLangFromLocale","adjustedLocale","language","includes","getCountryFromLocale","region","getDirectionFromLocale","Direction","RTL","LTR"],"mappings":";;;;AAEO,MAAMA,YAAY,GAAG,KAAI;AACzB,MAAMC,cAAc,GAAG,QAAO;AAErC;;AAEG;MACUC,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,EAAC;AAEzC;;AAEG;AACUC,MAAAA,mBAAmB,GAAG,CACjCH,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACL;AAED;;;;;AAKG;AACG,SAAUI,YAAYA,CAACC,MAAc,EAAA;AACzC,EAAA,MAAMC,aAAa,GAAGD,MAAM,EAAEE,IAAI,EAAE,CAAA;AACpC,EAAA,IAAID,aAAa,EAAE;IACjB,IAAI;AACF,MAAA,OAAO,IAAIE,IAAI,CAACC,MAAM,CAACH,aAAa,CAACI,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAACC,QAAQ,CAAA;KACjE,CAAC,OAAOC,KAAK,EAAE;AACd;AACAC,MAAAA,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC,CAAA;AACtB,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA;;;;;;;;;;AAUG;AACG,SAAUE,iBAAiBA,CAACT,MAAc,EAAA;AAC9C,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;EAC3C,IAAIU,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM;AAAEC,MAAAA,QAAAA;AAAQ,KAAE,GAAG,IAAIR,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAAA;AACpD,IAAA,IAAIZ,mBAAmB,CAACc,QAAQ,CAACD,QAAQ,CAAC,EAAE;AAC1C,MAAA,OAAOA,QAAQ,CAAA;AACjB,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA;;;;;AAKG;AACG,SAAUE,oBAAoBA,CAACb,MAAc,EAAA;AACjD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;AAC3C,EAAA,OAAOU,cAAc,IAAI,IAAI,GAAI,IAAIP,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACI,MAAM,IAAI,IAAI,GAAI,IAAI,CAAA;AACzF,CAAA;AAEA;;;;;AAKG;AACG,SAAUC,sBAAsBA,CAACf,MAAc,EAAA;AACnD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;EAC3C,OAAOU,cAAc,IAAI,IAAI,IAAIb,aAAa,CAACe,QAAQ,CAAC,IAAIT,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACC,QAAQ,CAAC,GAC7FK,mBAAS,CAACC,GAAG,GACbD,mBAAS,CAACE,GAAG,CAAA;AACnB;;;;;;;;;;;"}

package/build/common/locale/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/common/locale/index.ts"],"sourcesContent":["import { Direction } from '..';\n\nexport const DEFAULT_LANG = 'en';\nexport const DEFAULT_LOCALE = 'en-GB';\n\n/**\n * Languages written right-to-left.\n */\nexport const RTL_LANGUAGES = ['ar', 'he'];\n\n/**\n * @deprecated The source of truth for supported languages lives in Crab.\n */\nexport const SUPPORTED_LANGUAGES = [\n  DEFAULT_LANG,\n  'de',\n  'es',\n  'fr',\n  'hu',\n  'id',\n  'it',\n  'ja',\n  'pl',\n  'pt',\n  'ro',\n  'ru',\n  'th',\n  'tr',\n  'uk',\n  'zh',\n];\n\n/**\n * Verifies and adjusts locale, replacing `_` with `-`.\n *\n * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns `null` if locale is unrecognized by `Intl.Locale`.\n */\nexport function adjustLocale(locale: string) {\n  const localeTrimmed = locale?.trim();\n  if (localeTrimmed) {\n    try {\n      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error(error);\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding lang (iso2) for provided locale.\n *\n * @deprecated The use of this function almost always breaks language variants\n * e.g. Simplified and Traditional Chinese.\n * There should be no use case for this function.\n * To select the correct translations from a translations object, pass the\n * locale directly into Crab's getLocalisedMessages.\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.\n */\nexport function getLangFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  if (adjustedLocale != null) {\n    const { language } = new Intl.Locale(adjustedLocale);\n    if (SUPPORTED_LANGUAGES.includes(language)) {\n      return language;\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding country code (iso2) for locales code with explicit region value.\n *\n * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.\n * @returns `null` if the locale is invalid or the region can‘t be identified.\n */\nexport function getCountryFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;\n}\n\n/**\n * Provides the layout direction for a given locale.\n *\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.\n */\nexport function getDirectionFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)\n    ? Direction.RTL\n    : Direction.LTR;\n}\n"],"names":["DEFAULT_LANG","DEFAULT_LOCALE","RTL_LANGUAGES","SUPPORTED_LANGUAGES","adjustLocale","locale","localeTrimmed","trim","Intl","Locale","replace","baseName","error","console","getLangFromLocale","adjustedLocale","language","includes","getCountryFromLocale","region","getDirectionFromLocale","Direction","RTL","LTR"],"mappings":";;AAEO,MAAMA,YAAY,GAAG,KAAI;AACzB,MAAMC,cAAc,GAAG,QAAO;AAErC;;AAEG;MACUC,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,EAAC;AAEzC;;AAEG;AACUC,MAAAA,mBAAmB,GAAG,CACjCH,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACL;AAED;;;;;AAKG;AACG,SAAUI,YAAYA,CAACC,MAAc,EAAA;AACzC,EAAA,MAAMC,aAAa,GAAGD,MAAM,EAAEE,IAAI,EAAE,CAAA;AACpC,EAAA,IAAID,aAAa,EAAE;IACjB,IAAI;AACF,MAAA,OAAO,IAAIE,IAAI,CAACC,MAAM,CAACH,aAAa,CAACI,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAACC,QAAQ,CAAA;KACjE,CAAC,OAAOC,KAAK,EAAE;AACd;AACAC,MAAAA,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC,CAAA;AACtB,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA;;;;;;;;;;AAUG;AACG,SAAUE,iBAAiBA,CAACT,MAAc,EAAA;AAC9C,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;EAC3C,IAAIU,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM;AAAEC,MAAAA,QAAAA;AAAQ,KAAE,GAAG,IAAIR,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAAA;AACpD,IAAA,IAAIZ,mBAAmB,CAACc,QAAQ,CAACD,QAAQ,CAAC,EAAE;AAC1C,MAAA,OAAOA,QAAQ,CAAA;AACjB,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA;;;;;AAKG;AACG,SAAUE,oBAAoBA,CAACb,MAAc,EAAA;AACjD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;AAC3C,EAAA,OAAOU,cAAc,IAAI,IAAI,GAAG,IAAIP,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACI,MAAM,IAAI,IAAI,GAAG,IAAI,CAAA;AACvF,CAAA;AAEA;;;;;AAKG;AACG,SAAUC,sBAAsBA,CAACf,MAAc,EAAA;AACnD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;EAC3C,OAAOU,cAAc,IAAI,IAAI,IAAIb,aAAa,CAACe,QAAQ,CAAC,IAAIT,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACC,QAAQ,CAAC,GAC7FK,SAAS,CAACC,GAAG,GACbD,SAAS,CAACE,GAAG,CAAA;AACnB;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/common/locale/index.ts"],"sourcesContent":["import { Direction } from '..';\n\nexport const DEFAULT_LANG = 'en';\nexport const DEFAULT_LOCALE = 'en-GB';\n\n/**\n * Languages written right-to-left.\n */\nexport const RTL_LANGUAGES = ['ar', 'he'];\n\n/**\n * @deprecated The source of truth for supported languages lives in Crab.\n */\nexport const SUPPORTED_LANGUAGES = [\n  DEFAULT_LANG,\n  'de',\n  'es',\n  'fr',\n  'hu',\n  'id',\n  'it',\n  'ja',\n  'pl',\n  'pt',\n  'ro',\n  'ru',\n  'th',\n  'tr',\n  'uk',\n  'zh',\n];\n\n/**\n * Verifies and adjusts locale, replacing `_` with `-`.\n *\n * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns `null` if locale is unrecognized by `Intl.Locale`.\n */\nexport function adjustLocale(locale: string) {\n  const localeTrimmed = locale?.trim();\n  if (localeTrimmed) {\n    try {\n      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;\n    } catch (error) {\n      // eslint-disable-next-line no-console\n      console.error(error);\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding lang (iso2) for provided locale.\n *\n * @deprecated The use of this function almost always breaks language variants\n * e.g. Simplified and Traditional Chinese.\n * There should be no use case for this function.\n * To select the correct translations from a translations object, pass the\n * locale directly into Crab's getLocalisedMessages.\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.\n */\nexport function getLangFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  if (adjustedLocale != null) {\n    const { language } = new Intl.Locale(adjustedLocale);\n    if (SUPPORTED_LANGUAGES.includes(language)) {\n      return language;\n    }\n  }\n  return null;\n}\n\n/**\n * Provides corresponding country code (iso2) for locales code with explicit region value.\n *\n * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.\n * @returns `null` if the locale is invalid or the region can‘t be identified.\n */\nexport function getCountryFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null ? (new Intl.Locale(adjustedLocale).region ?? null) : null;\n}\n\n/**\n * Provides the layout direction for a given locale.\n *\n * @param locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.\n * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.\n */\nexport function getDirectionFromLocale(locale: string) {\n  const adjustedLocale = adjustLocale(locale);\n  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)\n    ? Direction.RTL\n    : Direction.LTR;\n}\n"],"names":["DEFAULT_LANG","DEFAULT_LOCALE","RTL_LANGUAGES","SUPPORTED_LANGUAGES","adjustLocale","locale","localeTrimmed","trim","Intl","Locale","replace","baseName","error","console","getLangFromLocale","adjustedLocale","language","includes","getCountryFromLocale","region","getDirectionFromLocale","Direction","RTL","LTR"],"mappings":";;AAEO,MAAMA,YAAY,GAAG,KAAI;AACzB,MAAMC,cAAc,GAAG,QAAO;AAErC;;AAEG;MACUC,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,EAAC;AAEzC;;AAEG;AACUC,MAAAA,mBAAmB,GAAG,CACjCH,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACL;AAED;;;;;AAKG;AACG,SAAUI,YAAYA,CAACC,MAAc,EAAA;AACzC,EAAA,MAAMC,aAAa,GAAGD,MAAM,EAAEE,IAAI,EAAE,CAAA;AACpC,EAAA,IAAID,aAAa,EAAE;IACjB,IAAI;AACF,MAAA,OAAO,IAAIE,IAAI,CAACC,MAAM,CAACH,aAAa,CAACI,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAACC,QAAQ,CAAA;KACjE,CAAC,OAAOC,KAAK,EAAE;AACd;AACAC,MAAAA,OAAO,CAACD,KAAK,CAACA,KAAK,CAAC,CAAA;AACtB,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA;;;;;;;;;;AAUG;AACG,SAAUE,iBAAiBA,CAACT,MAAc,EAAA;AAC9C,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;EAC3C,IAAIU,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM;AAAEC,MAAAA,QAAAA;AAAQ,KAAE,GAAG,IAAIR,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAAA;AACpD,IAAA,IAAIZ,mBAAmB,CAACc,QAAQ,CAACD,QAAQ,CAAC,EAAE;AAC1C,MAAA,OAAOA,QAAQ,CAAA;AACjB,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEA;;;;;AAKG;AACG,SAAUE,oBAAoBA,CAACb,MAAc,EAAA;AACjD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;AAC3C,EAAA,OAAOU,cAAc,IAAI,IAAI,GAAI,IAAIP,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACI,MAAM,IAAI,IAAI,GAAI,IAAI,CAAA;AACzF,CAAA;AAEA;;;;;AAKG;AACG,SAAUC,sBAAsBA,CAACf,MAAc,EAAA;AACnD,EAAA,MAAMU,cAAc,GAAGX,YAAY,CAACC,MAAM,CAAC,CAAA;EAC3C,OAAOU,cAAc,IAAI,IAAI,IAAIb,aAAa,CAACe,QAAQ,CAAC,IAAIT,IAAI,CAACC,MAAM,CAACM,cAAc,CAAC,CAACC,QAAQ,CAAC,GAC7FK,SAAS,CAACC,GAAG,GACbD,SAAS,CAACE,GAAG,CAAA;AACnB;;;;"}

package/build/dateLookup/tableLink/TableLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.js","sources":["../../../src/dateLookup/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n        ref={buttonRef}\n        type=\"button\"\n        className={clsx(\n          `tw-date-lookup-${type}-option np-text-body-default-bold`,\n          { active: !!active },\n          { today: !!today },\n        )}\n        disabled={disabled}\n        tabIndex={autofocus ? 0 : -1}\n        aria-label={calculateAriaLabel()}\n        aria-pressed={active}\n        onClick={onCalendarClick}\n      >\n        {title || item}\n      </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;;;AAkBMA,MAAAA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA,OAAAA;AACe,CAAA,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE,CAAA;OAC3B,EAAE,CAAC,CAAC,CAAA;AACP,KAAA;AACF,GAAC,EAAE,CAACT,SAAS,CAAC,CAAC,CAAA;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE,CAAA;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC,CAAA;AACf,KAAA;GACD,CAAA;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAKS,EAAAA,EAAAA,IAAI,CAACU,aAAa,CACvDC,mBAAQ,CAACC,QAAQ,CAClB,CAAIZ,CAAAA,EAAAA,IAAI,CAACU,aAAa,CAACC,mBAAQ,CAACrB,IAAI,CAAC,CAAC,CAAE,CAAA,CAAA;AAC3C,KAAA;IACA,OAAOE,SAAS,IAAID,KAAK,CAAA;GAC1B,CAAA;AAED,EAAA,oBACEsB,cAAA,CAAA,QAAA,EAAA;AACIC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,SAAI,CACb,CAAkB1B,eAAAA,EAAAA,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA,MAAAA;AAAQ,KAAA,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA,KAAAA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,YAAYa,EAAAA,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF,IAAAA;AAAI,GACR,CAAC,CAAA;AAEf;;;;"}
+{"version":3,"file":"TableLink.js","sources":["../../../src/dateLookup/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;;;AAkBMA,MAAAA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA,OAAAA;AACe,CAAA,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE,CAAA;OAC3B,EAAE,CAAC,CAAC,CAAA;AACP,KAAA;AACF,GAAC,EAAE,CAACT,SAAS,CAAC,CAAC,CAAA;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE,CAAA;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC,CAAA;AACf,KAAA;GACD,CAAA;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAKS,EAAAA,EAAAA,IAAI,CAACU,aAAa,CACvDC,mBAAQ,CAACC,QAAQ,CAClB,CAAIZ,CAAAA,EAAAA,IAAI,CAACU,aAAa,CAACC,mBAAQ,CAACrB,IAAI,CAAC,CAAC,CAAE,CAAA,CAAA;AAC3C,KAAA;IACA,OAAOE,SAAS,IAAID,KAAK,CAAA;GAC1B,CAAA;AAED,EAAA,oBACEsB,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,SAAI,CACb,CAAkB1B,eAAAA,EAAAA,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA,MAAAA;AAAQ,KAAA,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA,KAAAA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,YAAYa,EAAAA,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF,IAAAA;AAAI,GACR,CAAC,CAAA;AAEb;;;;"}

package/build/dateLookup/tableLink/TableLink.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.mjs","sources":["../../../src/dateLookup/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n        ref={buttonRef}\n        type=\"button\"\n        className={clsx(\n          `tw-date-lookup-${type}-option np-text-body-default-bold`,\n          { active: !!active },\n          { today: !!today },\n        )}\n        disabled={disabled}\n        tabIndex={autofocus ? 0 : -1}\n        aria-label={calculateAriaLabel()}\n        aria-pressed={active}\n        onClick={onCalendarClick}\n      >\n        {title || item}\n      </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;AAkBMA,MAAAA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA,OAAAA;AACe,CAAA,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE,CAAA;OAC3B,EAAE,CAAC,CAAC,CAAA;AACP,KAAA;AACF,GAAC,EAAE,CAACT,SAAS,CAAC,CAAC,CAAA;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE,CAAA;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC,CAAA;AACf,KAAA;GACD,CAAA;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAKS,EAAAA,EAAAA,IAAI,CAACU,aAAa,CACvDC,QAAQ,CAACC,QAAQ,CAClB,CAAIZ,CAAAA,EAAAA,IAAI,CAACU,aAAa,CAACC,QAAQ,CAACrB,IAAI,CAAC,CAAC,CAAE,CAAA,CAAA;AAC3C,KAAA;IACA,OAAOE,SAAS,IAAID,KAAK,CAAA;GAC1B,CAAA;AAED,EAAA,oBACEsB,GAAA,CAAA,QAAA,EAAA;AACIC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,IAAI,CACb,CAAkB1B,eAAAA,EAAAA,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA,MAAAA;AAAQ,KAAA,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA,KAAAA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,YAAYa,EAAAA,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF,IAAAA;AAAI,GACR,CAAC,CAAA;AAEf;;;;"}
+{"version":3,"file":"TableLink.mjs","sources":["../../../src/dateLookup/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../DateLookup.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;AAkBMA,MAAAA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA,OAAAA;AACe,CAAA,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE,CAAA;OAC3B,EAAE,CAAC,CAAC,CAAA;AACP,KAAA;AACF,GAAC,EAAE,CAACT,SAAS,CAAC,CAAC,CAAA;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE,CAAA;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC,CAAA;AACf,KAAA;GACD,CAAA;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAKS,EAAAA,EAAAA,IAAI,CAACU,aAAa,CACvDC,QAAQ,CAACC,QAAQ,CAClB,CAAIZ,CAAAA,EAAAA,IAAI,CAACU,aAAa,CAACC,QAAQ,CAACrB,IAAI,CAAC,CAAC,CAAE,CAAA,CAAA;AAC3C,KAAA;IACA,OAAOE,SAAS,IAAID,KAAK,CAAA;GAC1B,CAAA;AAED,EAAA,oBACEsB,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,IAAI,CACb,CAAkB1B,eAAAA,EAAAA,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA,MAAAA;AAAQ,KAAA,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA,KAAAA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,YAAYa,EAAAA,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF,IAAAA;AAAI,GACR,CAAC,CAAA;AAEb;;;;"}

package/build/drawer/Drawer.js

@@ -20,7 +20,9 @@ function Drawer({
   headerTitle,
   onClose,
   open = false,
-  position: position$1 = 'right'
+  position: position$1 = 'right',
+  role = 'dialog',
+  'aria-labelledby': ariaLabelledBy
 }) {
   logActionRequired.logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
   const {
@@ -36,9 +38,9 @@ function Drawer({
       position: isMobile ? position.Position.BOTTOM : position$1,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         id: overlayId,
-        role: "dialog",
+        role: role,
         "aria-modal": true,
-        "aria-labelledby": headerTitle ? titleId : undefined,
+        "aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
         className: clsx.clsx('np-drawer', className),
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           className: clsx.clsx('np-drawer-header', {

package/build/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","role","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACX,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCe,cAAA,CAACE,oBAAY,EAAA;AAACZ,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGU,iBAAQ,CAACC,MAAM,GAAGb,UAAS;AAAAN,MAAAA,QAAA,eACxEoB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdU,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBnB,WAAW,GAAGO,OAAO,GAAGa,SAAU;AACnDtB,QAAAA,SAAS,EAAEuB,SAAI,CAAC,WAAW,EAAEvB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCoB,eAAA,CAAA,KAAA,EAAA;AACEnB,UAAAA,SAAS,EAAEuB,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAErB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVY,cAAA,CAACU,KAAK,EAAA;AAACJ,YAAAA,EAAE,EAAEX,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA5B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDY,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE1B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIe,cAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,SAAI,CAAC,mBAAmB,CAAE;AAAAxB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIa,cAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,SAAI,CAAC,kBAAkB,CAAE;AAAAxB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n  role = 'dialog',\n  'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role={role}\n          aria-modal\n          aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACL,OAAO,CACT,CAAA;EAED,MAAM;AAAEM,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCiB,cAAA,CAACE,oBAAY,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGU,iBAAQ,CAACC,MAAM,GAAGf,UAAS;AAAAN,MAAAA,QAAA,eACxEsB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKL,WAAW,GAAGS,OAAO,GAAGY,SAAS,CAAE;AACvEvB,QAAAA,SAAS,EAAEwB,SAAI,CAAC,WAAW,EAAExB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCsB,eAAA,CAAA,KAAA,EAAA;AACErB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAEtB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVc,cAAA,CAACS,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEX,OAAQ;YAACe,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA7B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDc,cAAA,CAACa,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE3B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIiB,cAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,mBAAmB,CAAE;AAAAzB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIe,cAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,SAAI,CAAC,kBAAkB,CAAE;AAAAzB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/drawer/Drawer.mjs

@@ -18,7 +18,9 @@ function Drawer({
   headerTitle,
   onClose,
   open = false,
-  position = 'right'
+  position = 'right',
+  role = 'dialog',
+  'aria-labelledby': ariaLabelledBy
 }) {
   logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
   const {
@@ -34,9 +36,9 @@ function Drawer({
       position: isMobile ? Position.BOTTOM : position,
       children: /*#__PURE__*/jsxs("div", {
         id: overlayId,
-        role: "dialog",
+        role: role,
         "aria-modal": true,
-        "aria-labelledby": headerTitle ? titleId : undefined,
+        "aria-labelledby": ariaLabelledBy || (headerTitle ? titleId : undefined),
         className: clsx('np-drawer', className),
         children: [/*#__PURE__*/jsxs("div", {
           className: clsx('np-drawer-header', {

package/build/drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","role","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACX,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCe,GAAA,CAACE,YAAY,EAAA;AAACZ,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGU,QAAQ,CAACC,MAAM,GAAGb,QAAS;AAAAN,MAAAA,QAAA,eACxEoB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdU,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBnB,WAAW,GAAGO,OAAO,GAAGa,SAAU;AACnDtB,QAAAA,SAAS,EAAEuB,IAAI,CAAC,WAAW,EAAEvB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCoB,IAAA,CAAA,KAAA,EAAA;AACEnB,UAAAA,SAAS,EAAEuB,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAErB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVY,GAAA,CAACU,KAAK,EAAA;AAACJ,YAAAA,EAAE,EAAEX,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA5B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDY,GAAA,CAACc,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE1B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIe,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,IAAI,CAAC,mBAAmB,CAAE;AAAAxB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIa,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,IAAI,CAAC,kBAAkB,CAAE;AAAAxB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n  role = 'dialog',\n  'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role={role}\n          aria-modal\n          aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACL,OAAO,CACT,CAAA;EAED,MAAM;AAAEM,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCiB,GAAA,CAACE,YAAY,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGU,QAAQ,CAACC,MAAM,GAAGf,QAAS;AAAAN,MAAAA,QAAA,eACxEsB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKL,WAAW,GAAGS,OAAO,GAAGY,SAAS,CAAE;AACvEvB,QAAAA,SAAS,EAAEwB,IAAI,CAAC,WAAW,EAAExB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCsB,IAAA,CAAA,KAAA,EAAA;AACErB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAEtB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVc,GAAA,CAACS,KAAK,EAAA;AAACH,YAAAA,EAAE,EAAEX,OAAQ;YAACe,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA7B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDc,GAAA,CAACa,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE3B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIiB,GAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,mBAAmB,CAAE;AAAAzB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIe,GAAA,CAAA,KAAA,EAAA;AAAKhB,UAAAA,SAAS,EAAEwB,IAAI,CAAC,kBAAkB,CAAE;AAAAzB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/flowNavigation/FlowNavigation.js

@@ -52,7 +52,7 @@ const FlowNavigation = ({
           children: logo
         }), !screenSm && !done && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
           className: "m-x-1",
-          labels: steps.map(step => step.label),
+          steps: steps,
           activeLabel: activeStep
         })]
       }),

package/build/flowNavigation/FlowNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport BackButton from './backButton';\n\nexport interface FlowNavigationProps {\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel\n                className=\"m-x-1\"\n                labels={steps.map((step) => step.label)}\n                activeLabel={activeStep}\n              />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","BackButton","formatMessage","messages","back","AnimatedLabel","labels","map","step","label","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport BackButton from './backButton';\n\nexport interface FlowNavigationProps {\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","BackButton","formatMessage","messages","back","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.mjs

@@ -50,7 +50,7 @@ const FlowNavigation = ({
           children: logo
         }), !screenSm && !done && /*#__PURE__*/jsx(AnimatedLabel, {
           className: "m-x-1",
-          labels: steps.map(step => step.label),
+          steps: steps,
           activeLabel: activeStep
         })]
       }),