@dnb/eufemia 10.75.3 → 10.76.0

package/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","useContext","classnames","Flex","SectionParams","combineLabelledBy","CardContext","Space","useId","Card","props","_ref","nestedContext","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","isNested","filled","outset","title","children","rest","_objectWithoutProperties","_excluded","titleId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Provider","value","Container","wrap","id","_supportsSpacingProps"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport CardContext from './CardContext'\nimport Space from '../Space'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  Pick<SectionProps, 'outset'> &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size' | 'title'>\n\nfunction Card(props: Props) {\n  const nestedContext = useContext(CardContext)\n\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    align,\n    divider = 'space',\n    rowGap,\n    responsive = !nestedContext?.isNested,\n    filled,\n    outset,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    outset: nestedContext?.isNested\n      ? false\n      : outset === true\n      ? falseWhenSmall\n      : outset,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: 'var(--outline-card-color)',\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <CardContext.Provider value={{ isNested: true }}>\n        <Flex.Container\n          direction={direction ?? 'vertical'}\n          divider={divider}\n          alignSelf={alignSelf}\n          align={stack ? 'stretch' : align}\n          wrap={!stack}\n          gap={gap ?? spacing ?? (stack ? 'medium' : false)}\n          rowGap={rowGap}\n        >\n          {title && (\n            <Space id={titleId} className=\"dnb-card__title\">\n              {title}\n            </Space>\n          )}\n          {children}\n        </Flex.Container>\n      </CardContext.Provider>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Card.js","names":["React","useContext","classnames","Flex","SectionParams","combineLabelledBy","CardContext","Space","useId","Card","props","_ref","nestedContext","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","isNested","filled","outset","title","children","rest","_objectWithoutProperties","_excluded","titleId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Provider","disableCardBreakout","Container","wrap","id","_supportsSpacingProps","CardProvider","_ref2","context","value"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport CardContext from './CardContext'\nimport Space from '../Space'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  Pick<SectionProps, 'outset'> &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size' | 'title'>\n\nfunction Card(props: Props) {\n  const nestedContext = useContext(CardContext)\n\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    align,\n    divider = 'space',\n    rowGap,\n    responsive = !nestedContext?.isNested,\n    filled,\n    outset,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    outset: nestedContext?.isNested\n      ? false\n      : outset === true\n      ? falseWhenSmall\n      : outset,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: 'var(--outline-card-color)',\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <Card.Provider disableCardBreakout>\n        <Flex.Container\n          direction={direction ?? 'vertical'}\n          divider={divider}\n          alignSelf={alignSelf}\n          align={stack ? 'stretch' : align}\n          wrap={!stack}\n          gap={gap ?? spacing ?? (stack ? 'medium' : false)}\n          rowGap={rowGap}\n        >\n          {title && (\n            <Space id={titleId} className=\"dnb-card__title\">\n              {title}\n            </Space>\n          )}\n          {children}\n        </Flex.Container>\n      </Card.Provider>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\n/**\n * Provides the default context for the Card component's children.\n * Can be used to tell children to act as if they are in a Card, even if they are not.\n */\nCard.Provider = function CardProvider({\n  /**\n   * Defines if Card components should act as if it is nested inside another Card.\n   * Used to control side-margins outset behaviour.\n   *\n   * Defaults to existing context value.\n   */\n  disableCardBreakout,\n  children,\n}: {\n  disableCardBreakout?: boolean\n  children: React.ReactNode\n}) {\n  const context = useContext(CardContext) || {}\n\n  context.isNested = disableCardBreakout ?? context?.isNested\n\n  return (\n    <CardContext.Provider value={context}>{children}</CardContext.Provider>\n  )\n}\n\nexport default Card\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,aAAa,QAAsB,oBAAoB;AAChE,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,KAAK,MAAM,4BAA4B;AA6B9C,SAASC,IAAIA,CAACC,KAAY,EAAE;EAAA,IAAAC,IAAA;EAC1B,MAAMC,aAAa,GAAGX,UAAU,CAACK,WAAW,CAAC;EAE7C,MAAM;MACJO,SAAS;MACTC,KAAK;MACLC,SAAS;MACTC,GAAG;MACHC,OAAO;MACPC,UAAU;MACVC,SAAS,GAAG,SAAS;MACrBC,KAAK;MACLC,OAAO,GAAG,OAAO;MACjBC,MAAM;MACNC,UAAU,GAAG,EAACX,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEY,QAAQ;MACrCC,MAAM;MACNC,MAAM;MACNC,KAAK;MACLC;IAEF,CAAC,GAAGlB,KAAK;IADJmB,IAAI,GAAAC,wBAAA,CACLpB,KAAK,EAAAqB,SAAA;EAET,MAAMC,OAAO,GAAGxB,KAAK,CAAC,CAAC;EACvB,MAAMyB,cAAc,GAAG;IAAEC,KAAK,EAAE,KAAK;IAAEC,MAAM,EAAE,IAAI;IAAEC,KAAK,EAAE;EAAK,CAAC;EAClE,MAAMC,aAAa,GAAG;IAAEH,KAAK,EAAE,IAAI;IAAEC,MAAM,EAAE,KAAK;IAAEC,KAAK,EAAE;EAAM,CAAC;EAClE,MAAME,UAAU,GAAG;IACjBC,GAAG,EAAE,QAAQ;IACbC,KAAK,EAAE,QAAQ;IACfC,MAAM,EAAE,OAAO;IACfC,IAAI,EAAE;EACR,CAAC;EACD,MAAMC,UAAU,GAAGpB,UAAU,GAAAqB,aAAA,CAAAA,aAAA,KAEpBN,UAAU;IACbE,KAAK,EAAE,CAAC;IACRE,IAAI,EAAE;EAAC,KAETJ,UAAU;EAEd,MAAMO,MAAM,GAAGzC,aAAa,CAAAwC,aAAA,CAAAA,aAAA;IAC1B/B,SAAS,EAAEX,UAAU,CACnB,UAAU,EACVW,SAAS,EACTU,UAAU,IAAI,sBAAsB,EACpCE,MAAM,IAAI,kBACZ,CAAC;IACDqB,QAAQ,EAAEvB,UAAU,GAAGc,aAAa,GAAG,KAAK;IAC5CX,MAAM,EAAEd,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEY,QAAQ,GAC3B,KAAK,GACLE,MAAM,KAAK,IAAI,GACfO,cAAc,GACdP,MAAM;IACVqB,aAAa,EAAExB,UAAU,GAAGU,cAAc,GAAG,IAAI;IACjDe,OAAO,EAAE,2BAA2B;IACpC9B,UAAU,EACRA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GACT;MACCgB,KAAK,EAAES,UAAU;MACjBR,MAAM,EAAEG,UAAU;MAClBF,KAAK,EAAEE;IACT;EAAoB,GAClBT,IAAI;IACR,iBAAiB,EAAExB,iBAAiB,CAACwB,IAAI,EAAEF,KAAK,IAAIK,OAAO;EAAC,EAC7D,CAAC;EAEF,OACEhC,KAAA,CAAAiD,aAAA,CAAC9C,IAAI,CAAC+C,IAAI,EAAAC,QAAA;IAAChC,SAAS,EAAEA,SAAU;IAACiC,OAAO,EAAC;EAAS,GAAKP,MAAM,GAC3D7C,KAAA,CAAAiD,aAAA,CAACxC,IAAI,CAAC4C,QAAQ;IAACC,mBAAmB;EAAA,GAChCtD,KAAA,CAAAiD,aAAA,CAAC9C,IAAI,CAACoD,SAAS;IACbxC,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,UAAW;IACnCM,OAAO,EAAEA,OAAQ;IACjBF,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEN,KAAK,GAAG,SAAS,GAAGM,KAAM;IACjCoC,IAAI,EAAE,CAAC1C,KAAM;IACbE,GAAG,GAAAL,IAAA,GAAEK,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAIC,OAAO,cAAAN,IAAA,cAAAA,IAAA,GAAKG,KAAK,GAAG,QAAQ,GAAG,KAAO;IAClDQ,MAAM,EAAEA;EAAO,GAEdK,KAAK,IACJ3B,KAAA,CAAAiD,aAAA,CAAC1C,KAAK;IAACkD,EAAE,EAAEzB,OAAQ;IAACnB,SAAS,EAAC;EAAiB,GAC5Cc,KACI,CACR,EACAC,QACa,CACH,CACN,CAAC;AAEhB;AAEAnB,IAAI,CAACiD,qBAAqB,GAAG,IAAI;AAMjCjD,IAAI,CAAC4C,QAAQ,GAAG,SAASM,YAAYA,CAAAC,KAAA,EAYlC;EAAA,IAZmC;IAOpCN,mBAAmB;IACnB1B;EAIF,CAAC,GAAAgC,KAAA;EACC,MAAMC,OAAO,GAAG5D,UAAU,CAACK,WAAW,CAAC,IAAI,CAAC,CAAC;EAE7CuD,OAAO,CAACrC,QAAQ,GAAG8B,mBAAmB,aAAnBA,mBAAmB,cAAnBA,mBAAmB,GAAIO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAErC,QAAQ;EAE3D,OACExB,KAAA,CAAAiD,aAAA,CAAC3C,WAAW,CAAC+C,QAAQ;IAACS,KAAK,EAAED;EAAQ,GAAEjC,QAA+B,CAAC;AAE3E,CAAC;AAED,eAAenB,IAAI","ignoreList":[]}

package/components/card/CardDocs.js

@@ -5,7 +5,7 @@ export const CardProperties = {
     status: 'optional'
   },
   stack: {
-    doc: 'True to stack the sub components with lines between. The `spacing` will default to `medium`.',
+    doc: 'True to stack the sub components with space between. The `spacing` will default to `medium`. Defaults to `false`.',
     type: 'boolean',
     status: 'optional'
   },

package/components/card/CardDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardDocs.js","names":["CardProperties","outset","doc","type","status","stack","direction","alignSelf","title","responsive","filled","element","children"],"sources":["../../../../src/components/card/CardDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CardProperties: PropertiesTableProps = {\n  outset: {\n    doc: 'Whether or not to break out (using negative margins) on larger screens. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stack: {\n    doc: 'True to stack the sub components with lines between. The `spacing` will default to `medium`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  direction: {\n    doc: 'Defaults to `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  alignSelf: {\n    doc: 'Defaults to `stretch`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Define a title that appears on top of the Card.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  responsive: {\n    doc: 'Define if the card should behave responsive. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  filled: {\n    doc: 'Define if the Card should get the same background color as the outline border.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `section`.',\n    type: 'React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container/properties)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Flex.Item](/uilib/layout/flex/item/properties)': {\n    doc: 'Flex.Item properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,MAAM,EAAE;IACNC,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDK,UAAU,EAAE;IACVP,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,oDAAoD;IACzDC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,2DAA2D,EAAE;IAC3DF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,iDAAiD,EAAE;IACjDF,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"CardDocs.js","names":["CardProperties","outset","doc","type","status","stack","direction","alignSelf","title","responsive","filled","element","children"],"sources":["../../../../src/components/card/CardDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CardProperties: PropertiesTableProps = {\n  outset: {\n    doc: 'Whether or not to break out (using negative margins) on larger screens. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stack: {\n    doc: 'True to stack the sub components with space between. The `spacing` will default to `medium`. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  direction: {\n    doc: 'Defaults to `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  alignSelf: {\n    doc: 'Defaults to `stretch`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Define a title that appears on top of the Card.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  responsive: {\n    doc: 'Define if the card should behave responsive. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  filled: {\n    doc: 'Define if the Card should get the same background color as the outline border.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `section`.',\n    type: 'React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container/properties)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Flex.Item](/uilib/layout/flex/item/properties)': {\n    doc: 'Flex.Item properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,MAAM,EAAE;IACNC,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,mHAAmH;IACxHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDK,UAAU,EAAE;IACVP,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,oDAAoD;IACzDC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,2DAA2D,EAAE;IAC3DF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,iDAAiD,EAAE;IACjDF,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","keycode","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","extractPropsFromContext","skeleton","FormRow","formElement","props","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","className","id","idProp","indeterminate","checked","onChange","onClick","innerRef","rest","_objectWithoutProperties","_excluded","forceUpdate","isFn","refHook","ref","current","preventChangeRef","isCheckedRef","prevCheckedRef","callOnChange","args","handleChange","event","updatedCheck","focus","onChangeHandler","onClickHandler","preventDefault","target","_objectSpread","onKeyDownHandler","showStatus","handleInputAttributes","inputParams","mainParams","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_span2"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Web Checkbox Component\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n  keycode,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport useId from '../../shared/helpers/useId'\nimport type { SpacingProps } from '../space/types'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nimport type {\n  FormStatusProps,\n  FormStatusState,\n  FormStatusText,\n} from '../FormStatus'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\nimport CheckIcon from './CheckIcon'\n\nexport type CheckboxLabelPosition = 'left' | 'right'\nexport type CheckboxSize = 'default' | 'medium' | 'large'\nexport type CheckboxAttributes = string | Record<string, unknown>\nexport type OnChangeParams = {\n  checked: boolean\n  event: React.ChangeEvent<HTMLInputElement>\n}\nexport type OnClickParams = React.MouseEvent<HTMLInputElement> & {\n  checked: boolean\n  event: React.MouseEvent<HTMLInputElement>\n}\n\nexport type CheckboxProps = {\n  /**\n   * Use either the `label` property or provide a custom one.\n   */\n  label?: React.ReactNode\n  /**\n   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.\n   */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Use `true` to make the label only readable by screen readers.\n   */\n  labelSrOnly?: boolean\n  /**\n   * The `title` of the input - describing it a bit further for accessibility reasons.\n   */\n  title?: string\n  /**\n   * Determine whether the checkbox is checked or not. The default is `false`.\n   */\n  checked?: boolean | undefined | null\n  /**\n   * Determine whether to show the indeterminate checked state when checked. The default is `false`.\n   */\n  indeterminate?: boolean\n  /**\n   * The size of the checkbox. For now there is \"medium\" (default) and \"large\".\n   */\n  size?: CheckboxSize\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)\n   */\n  statusProps?: FormStatusProps\n  statusNoAnimation?: boolean\n  /**\n   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)\n   */\n  globalStatus?: GlobalStatusConfigObject\n  /**\n   * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.\n   */\n  suffix?: React.ReactNode\n  value?: string\n  element?: React.ElementType\n  attributes?: CheckboxAttributes\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  /**\n   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.\n   */\n  onChange?: (args: OnChangeParams) => void\n  /**\n   * Will be called on click made by the user. Returns the ClickEvent.\n   */\n  onClick?: (args: OnClickParams) => void\n  /**\n   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.\n   */\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement>\n    | ((elem: HTMLInputElement) => void)\n} & SpacingProps &\n  Omit<\n    React.HTMLProps<HTMLInputElement>,\n    'ref' | 'label' | 'size' | 'onChange' | 'onClick'\n  > &\n  DeprecatedCheckboxProps\n\n// deprecated, can be removed in v11\ntype DeprecatedCheckboxProps = {\n  /** @deprecated use the `label` prop instead */\n  children?: React.ReactNode\n  /**  @deprecated use `onChange` */\n  on_change?: (args: OnChangeParams) => void\n  /**  @deprecated use `labelPosition` */\n  label_position?: CheckboxLabelPosition\n  /**  @deprecated use `labelSrOnly` */\n  label_sr_only?: boolean\n  /**  @deprecated use `statusState` */\n  status_state?: FormStatusState\n  /**  @deprecated use `statusProps` */\n  status_props?: FormStatusProps\n  /**  @deprecated use `statusNoAnimation` */\n  status_no_animation?: boolean\n}\n\nconst defaultProps: CheckboxProps = {\n  statusState: 'error',\n}\n\nfunction Checkbox(localProps: CheckboxProps) {\n  const context = useContext(Context)\n\n  const extractPropsFromContext = useCallback(() => {\n    return extendPropsWithContext(\n      convertSnakeCaseProps(localProps),\n      defaultProps,\n      context.Checkbox,\n      {\n        skeleton: context?.Checkbox,\n      },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(context?.FormRow),\n      pickFormElementProps(context?.formElement)\n    )\n  }, [\n    context.Checkbox,\n    context?.FormRow,\n    context?.formElement,\n    localProps,\n  ])\n\n  const props = extractPropsFromContext()\n\n  const {\n    value,\n    status,\n    statusState,\n    statusProps,\n    statusNoAnimation,\n    globalStatus,\n    suffix,\n    size,\n    label,\n    labelPosition,\n    labelSrOnly,\n    title,\n    element,\n    disabled,\n    readOnly,\n    skeleton,\n    className,\n    id: idProp,\n    indeterminate,\n    checked,\n    onChange,\n    onClick,\n    innerRef,\n    ...rest\n  } = props\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const id = useId(idProp)\n\n  const isFn = typeof innerRef === 'function'\n  const refHook = useRef<HTMLInputElement>()\n  const ref = (!isFn && innerRef) || refHook\n\n  useEffect(() => {\n    if (isFn) {\n      innerRef?.(ref.current)\n    }\n  }, [innerRef, isFn, ref])\n\n  const preventChangeRef = useRef(false)\n  const isCheckedRef = useRef(checked ?? false)\n  const prevCheckedRef = useRef(checked)\n\n  useEffect(() => {\n    if (checked !== prevCheckedRef.current) {\n      isCheckedRef.current = !!checked\n      prevCheckedRef.current = !!checked\n      forceUpdate()\n    }\n  }, [checked])\n\n  useEffect(() => {\n    ref.current.indeterminate = indeterminate\n  }, [indeterminate, ref])\n\n  const callOnChange: CheckboxProps['onChange'] = useCallback(\n    (args) => {\n      onChange?.(args)\n    },\n    [onChange]\n  )\n\n  const handleChange = useCallback(\n    (event: OnChangeParams['event']) => {\n      if (preventChangeRef.current) {\n        return // stop here\n      }\n      preventChangeRef.current = false\n      const updatedCheck = !isCheckedRef.current\n\n      isCheckedRef.current = updatedCheck\n      forceUpdate()\n      callOnChange({ checked: updatedCheck, event })\n\n      // help firefox and safari to have an correct state after a click\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [callOnChange, ref]\n  )\n\n  const onChangeHandler = useCallback(\n    (event: OnChangeParams['event']) => {\n      handleChange(event)\n    },\n    [handleChange]\n  )\n\n  const onClickHandler: React.MouseEventHandler<HTMLInputElement> =\n    useCallback(\n      (event) => {\n        const preventDefault = () => {\n          event.preventDefault()\n\n          // if (event.target['checked'] !== isChecked) {\n          if (event.target['checked'] !== isCheckedRef.current) {\n            preventChangeRef.current = true\n            isCheckedRef.current = !isCheckedRef.current\n            forceUpdate()\n          }\n        }\n\n        if (readOnly) {\n          return preventDefault()\n        }\n\n        onClick?.({\n          checked: isCheckedRef.current,\n          preventDefault,\n          event,\n          ...event,\n        })\n      },\n      [onClick, readOnly]\n    )\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent & OnChangeParams['event']) => {\n      switch (keycode(event)) {\n        case 'enter':\n          handleChange(event)\n          break\n      }\n    },\n    [handleChange]\n  )\n\n  const showStatus = getStatusState(status)\n\n  /**\n   * Adds aria attributes, calls validateDOMAttributes and skeletonDOMAttributes and returns the result\n   */\n  const handleInputAttributes = useCallback(() => {\n    const inputParams = {\n      disabled,\n      checked: isCheckedRef.current,\n      readOnly,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    // also used for code markup simulation\n    return validateDOMAttributes(\n      props,\n      skeletonDOMAttributes(inputParams, skeleton, context)\n    )\n  }, [\n    context,\n    disabled,\n    id,\n    props,\n    readOnly,\n    rest,\n    showStatus,\n    skeleton,\n    suffix,\n  ])\n\n  const mainParams = {\n    className: classnames(\n      'dnb-checkbox',\n      status && `dnb-checkbox__status--${statusState}`,\n      size && `dnb-checkbox--${size}`,\n      label && `dnb-checkbox--label-position-${labelPosition || 'right'}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton, context),\n      createSpacingClasses(props),\n      className\n    ),\n  }\n\n  const inputParams = handleInputAttributes()\n\n  const statusComp = (\n    <FormStatus\n      show={showStatus}\n      id={id + '-form-status'}\n      globalStatus={globalStatus}\n      label={label}\n      text_id={id + '-status'} // used for \"aria-describedby\"\n      width_selector={id + ', ' + id + '-label'}\n      text={status}\n      state={statusState}\n      no_animation={statusNoAnimation}\n      skeleton={skeleton}\n      {...statusProps}\n    />\n  )\n\n  const Element = element || 'input'\n\n  return (\n    <span {...mainParams}>\n      <span className=\"dnb-checkbox__order\">\n        {label && (\n          <FormLabel\n            id={id + '-label'}\n            forId={id}\n            text={label}\n            disabled={disabled}\n            skeleton={skeleton}\n            srOnly={labelSrOnly}\n          />\n        )}\n\n        <span className=\"dnb-checkbox__inner\">\n          <AlignmentHelper />\n          {labelPosition === 'left' && statusComp}\n\n          <span className=\"dnb-checkbox__shell\">\n            <Element\n              id={id}\n              name={id}\n              type=\"checkbox\"\n              title={title}\n              className=\"dnb-checkbox__input\"\n              value={isCheckedRef.current ? value || '' : ''}\n              disabled={disabled}\n              {...inputParams}\n              onChange={onChangeHandler}\n              onClick={onClickHandler}\n              onKeyDown={onKeyDownHandler}\n              ref={ref}\n            />\n\n            <span\n              className={classnames(\n                'dnb-checkbox__button',\n                createSkeletonClass('shape', skeleton, context)\n              )}\n              aria-hidden\n            >\n              <span className=\"dnb-checkbox__focus\" />\n            </span>\n\n            <span className=\"dnb-checkbox__indeterminate\" />\n\n            <CheckIcon size={size} />\n          </span>\n        </span>\n\n        {suffix && (\n          <Suffix\n            className=\"dnb-checkbox__suffix\"\n            id={id + '-suffix'} // used for \"aria-describedby\"\n            context={props}\n          >\n            {suffix}\n          </Suffix>\n        )}\n      </span>\n\n      {(labelPosition === 'right' || !labelPosition) && statusComp}\n    </span>\n  )\n}\n\nexport default Checkbox\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","keycode","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","extractPropsFromContext","skeleton","FormRow","formElement","props","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","className","id","idProp","indeterminate","checked","onChange","onClick","innerRef","rest","_objectWithoutProperties","_excluded","forceUpdate","isFn","refHook","ref","current","preventChangeRef","isCheckedRef","prevCheckedRef","callOnChange","args","handleChange","event","updatedCheck","focus","onChangeHandler","onClickHandler","preventDefault","target","_objectSpread","onKeyDownHandler","showStatus","handleInputAttributes","inputParams","mainParams","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_span2"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Web Checkbox Component\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n  keycode,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport useId from '../../shared/helpers/useId'\nimport type { SpacingProps } from '../space/types'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nimport type {\n  FormStatusProps,\n  FormStatusState,\n  FormStatusText,\n} from '../FormStatus'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\nimport CheckIcon from './CheckIcon'\n\nexport type CheckboxLabelPosition = 'left' | 'right'\nexport type CheckboxSize = 'default' | 'medium' | 'large'\nexport type CheckboxAttributes = string | Record<string, unknown>\nexport type OnChangeParams = {\n  checked: boolean\n  event: React.ChangeEvent<HTMLInputElement>\n}\nexport type OnClickParams = React.MouseEvent<HTMLInputElement> & {\n  checked: boolean\n  event: React.MouseEvent<HTMLInputElement>\n}\n\nexport type CheckboxProps = {\n  /**\n   * Use either the `label` property or provide a custom one.\n   */\n  label?: React.ReactNode\n  /**\n   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.\n   */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Use `true` to make the label only readable by screen readers.\n   */\n  labelSrOnly?: boolean\n  /**\n   * The `title` of the input - describing it a bit further for accessibility reasons.\n   */\n  title?: string\n  /**\n   * Determine whether the checkbox is checked or not. The default is `false`.\n   */\n  checked?: boolean | undefined | null\n  /**\n   * Determine whether to show the indeterminate checked state when checked. The default is `false`.\n   */\n  indeterminate?: boolean\n  /**\n   * The size of the checkbox. For now there is \"medium\" (default) and \"large\".\n   */\n  size?: CheckboxSize\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)\n   */\n  statusProps?: FormStatusProps\n  statusNoAnimation?: boolean\n  /**\n   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)\n   */\n  globalStatus?: GlobalStatusConfigObject\n  /**\n   * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.\n   */\n  suffix?: React.ReactNode\n  value?: string\n  element?: React.ElementType\n  attributes?: CheckboxAttributes\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  /**\n   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.\n   */\n  onChange?: (args: OnChangeParams) => void\n  /**\n   * Will be called on click made by the user. Returns the ClickEvent.\n   */\n  onClick?: (args: OnClickParams) => void\n  /**\n   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.\n   */\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement>\n    | ((elem: HTMLInputElement) => void)\n} & SpacingProps &\n  Omit<\n    React.HTMLProps<HTMLInputElement>,\n    'ref' | 'label' | 'size' | 'onChange' | 'onClick'\n  > &\n  DeprecatedCheckboxProps\n\n// deprecated, can be removed in v11\ntype DeprecatedCheckboxProps = {\n  /** @deprecated use the `label` prop instead */\n  children?: React.ReactNode\n  /**  @deprecated use `onChange` */\n  on_change?: (args: OnChangeParams) => void\n  /**  @deprecated use `labelPosition` */\n  label_position?: CheckboxLabelPosition\n  /**  @deprecated use `labelSrOnly` */\n  label_sr_only?: boolean\n  /**  @deprecated use `statusState` */\n  status_state?: FormStatusState\n  /**  @deprecated use `statusProps` */\n  status_props?: FormStatusProps\n  /**  @deprecated use `statusNoAnimation` */\n  status_no_animation?: boolean\n}\n\nconst defaultProps: CheckboxProps = {\n  statusState: 'error',\n}\n\nfunction Checkbox(localProps: CheckboxProps) {\n  const context = useContext(Context)\n\n  const extractPropsFromContext = useCallback(() => {\n    return extendPropsWithContext(\n      convertSnakeCaseProps(localProps),\n      defaultProps,\n      context.Checkbox,\n      {\n        skeleton: context?.Checkbox,\n      },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(context?.FormRow),\n      pickFormElementProps(context?.formElement)\n    )\n  }, [\n    context.Checkbox,\n    context?.FormRow,\n    context?.formElement,\n    localProps,\n  ])\n\n  const props = extractPropsFromContext()\n\n  const {\n    value,\n    status,\n    statusState,\n    statusProps,\n    statusNoAnimation,\n    globalStatus,\n    suffix,\n    size,\n    label,\n    labelPosition,\n    labelSrOnly,\n    title,\n    element,\n    disabled,\n    readOnly,\n    skeleton,\n    className,\n    id: idProp,\n    indeterminate,\n    checked,\n    onChange,\n    onClick,\n    innerRef,\n    ...rest\n  } = props\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const id = useId(idProp)\n\n  const isFn = typeof innerRef === 'function'\n  const refHook = useRef<HTMLInputElement>()\n  const ref = (!isFn && innerRef) || refHook\n\n  useEffect(() => {\n    if (isFn) {\n      innerRef?.(ref.current)\n    }\n  }, [innerRef, isFn, ref])\n\n  const preventChangeRef = useRef(false)\n  const isCheckedRef = useRef(checked ?? false)\n  const prevCheckedRef = useRef(checked)\n\n  useEffect(() => {\n    if (checked !== prevCheckedRef.current) {\n      isCheckedRef.current = !!checked\n      prevCheckedRef.current = !!checked\n      forceUpdate()\n    }\n  }, [checked])\n\n  useEffect(() => {\n    ref.current.indeterminate = indeterminate\n  }, [indeterminate, ref])\n\n  const callOnChange: CheckboxProps['onChange'] = useCallback(\n    (args) => {\n      onChange?.(args)\n    },\n    [onChange]\n  )\n\n  const handleChange = useCallback(\n    (event: OnChangeParams['event']) => {\n      if (preventChangeRef.current) {\n        return // stop here\n      }\n      preventChangeRef.current = false\n      const updatedCheck = !isCheckedRef.current\n\n      isCheckedRef.current = updatedCheck\n      forceUpdate()\n      callOnChange({ checked: updatedCheck, event })\n\n      // help firefox and safari to have an correct state after a click\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [callOnChange, ref]\n  )\n\n  const onChangeHandler = useCallback(\n    (event: OnChangeParams['event']) => {\n      handleChange(event)\n    },\n    [handleChange]\n  )\n\n  const onClickHandler: React.MouseEventHandler<HTMLInputElement> =\n    useCallback(\n      (event) => {\n        const preventDefault = () => {\n          event.preventDefault()\n\n          if (event.target['checked'] !== isCheckedRef.current) {\n            preventChangeRef.current = true\n            isCheckedRef.current = !isCheckedRef.current\n            forceUpdate()\n          }\n        }\n\n        if (readOnly) {\n          return preventDefault()\n        }\n\n        onClick?.({\n          checked: isCheckedRef.current,\n          preventDefault,\n          event,\n          ...event,\n        })\n      },\n      [onClick, readOnly]\n    )\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent & OnChangeParams['event']) => {\n      switch (keycode(event)) {\n        case 'enter':\n          handleChange(event)\n          break\n      }\n    },\n    [handleChange]\n  )\n\n  const showStatus = getStatusState(status)\n\n  /**\n   * Adds aria attributes, calls validateDOMAttributes and skeletonDOMAttributes and returns the result\n   */\n  const handleInputAttributes = useCallback(() => {\n    const inputParams = {\n      disabled,\n      checked: isCheckedRef.current,\n      readOnly,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    // also used for code markup simulation\n    return validateDOMAttributes(\n      props,\n      skeletonDOMAttributes(inputParams, skeleton, context)\n    )\n  }, [\n    context,\n    disabled,\n    id,\n    props,\n    readOnly,\n    rest,\n    showStatus,\n    skeleton,\n    suffix,\n  ])\n\n  const mainParams = {\n    className: classnames(\n      'dnb-checkbox',\n      status && `dnb-checkbox__status--${statusState}`,\n      size && `dnb-checkbox--${size}`,\n      label && `dnb-checkbox--label-position-${labelPosition || 'right'}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton, context),\n      createSpacingClasses(props),\n      className\n    ),\n  }\n\n  const inputParams = handleInputAttributes()\n\n  const statusComp = (\n    <FormStatus\n      show={showStatus}\n      id={id + '-form-status'}\n      globalStatus={globalStatus}\n      label={label}\n      text_id={id + '-status'} // used for \"aria-describedby\"\n      width_selector={id + ', ' + id + '-label'}\n      text={status}\n      state={statusState}\n      no_animation={statusNoAnimation}\n      skeleton={skeleton}\n      {...statusProps}\n    />\n  )\n\n  const Element = element || 'input'\n\n  return (\n    <span {...mainParams}>\n      <span className=\"dnb-checkbox__order\">\n        {label && (\n          <FormLabel\n            id={id + '-label'}\n            forId={id}\n            text={label}\n            disabled={disabled}\n            skeleton={skeleton}\n            srOnly={labelSrOnly}\n          />\n        )}\n\n        <span className=\"dnb-checkbox__inner\">\n          <AlignmentHelper />\n          {labelPosition === 'left' && statusComp}\n\n          <span className=\"dnb-checkbox__shell\">\n            <Element\n              id={id}\n              name={id}\n              type=\"checkbox\"\n              title={title}\n              className=\"dnb-checkbox__input\"\n              value={isCheckedRef.current ? value || '' : ''}\n              disabled={disabled}\n              {...inputParams}\n              onChange={onChangeHandler}\n              onClick={onClickHandler}\n              onKeyDown={onKeyDownHandler}\n              ref={ref}\n            />\n\n            <span\n              className={classnames(\n                'dnb-checkbox__button',\n                createSkeletonClass('shape', skeleton, context)\n              )}\n              aria-hidden\n            >\n              <span className=\"dnb-checkbox__focus\" />\n            </span>\n\n            <span className=\"dnb-checkbox__indeterminate\" />\n\n            <CheckIcon size={size} />\n          </span>\n        </span>\n\n        {suffix && (\n          <Suffix\n            className=\"dnb-checkbox__suffix\"\n            id={id + '-suffix'} // used for \"aria-describedby\"\n            context={props}\n          >\n            {suffix}\n          </Suffix>\n        )}\n      </span>\n\n      {(labelPosition === 'right' || !labelPosition) && statusComp}\n    </span>\n  )\n}\n\nexport default Checkbox\n"],"mappings":"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","ignoreList":[]}

package/components/date-format/DateFormat.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { InternalLocale } from '../../shared/Context';
+import { SpacingProps } from '../space/types';
+import { SkeletonShow } from '../Skeleton';
+type DateFormatProps = SpacingProps & {
+    /**
+     * The date that will be formatted.
+     */
+    value?: Date | string;
+    /**
+     * Defines the style used to format the date. Defaults to `long`.
+     * Defaults to `long`.
+     */
+    dateStyle?: Intl.DateTimeFormatOptions['dateStyle'];
+    /**
+     * A string in {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument | Intl.DateTimeFormat locale} accepted format.
+     * Defaults to `nb-NO`
+     */
+    locale?: InternalLocale;
+    /**
+     * If set to `true`, an overlaying skeleton with animation will be shown.
+     */
+    skeleton?: SkeletonShow;
+    children?: React.ReactNode;
+};
+declare function DateFormat(props: DateFormatProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DateFormat {
+    var _supportsSpacingProps: boolean;
+}
+export default DateFormat;

package/components/date-format/DateFormat.js

@@ -0,0 +1,77 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.string.replace.js";
+import React, { useContext, useMemo } from 'react';
+import SharedContext from '../../shared/Context';
+import { convertJsxToString } from '../../shared/component-helper';
+import { convertStringToDate } from '../date-picker/DatePickerCalc';
+import { formatDate } from './DateFormatUtils';
+import { format } from 'date-fns';
+import classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingUtils';
+import { createSkeletonClass, skeletonDOMAttributes } from '../skeleton/SkeletonHelper';
+import { useTranslation } from '../../shared';
+function DateFormat(props) {
+  const context = useContext(SharedContext);
+  const {
+    invalidDate
+  } = useTranslation().DateFormat;
+  const {
+    value,
+    locale = context.locale,
+    dateStyle = 'long',
+    children,
+    skeleton
+  } = props;
+  const date = useMemo(() => getDate({
+    value,
+    children
+  }), [value, children]);
+  const attributes = {};
+  skeletonDOMAttributes(attributes, skeleton, context);
+  if (!date) {
+    return React.createElement("span", {
+      className: "dnb-date-format"
+    }, invalidDate.replace('{value}', getInvalidValue({
+      value,
+      children
+    })));
+  }
+  return React.createElement("time", _extends({
+    className: classnames('dnb-date-format', createSpacingClasses(props), createSkeletonClass('font', skeleton, context)),
+    lang: locale,
+    dateTime: format(date, 'yyyy-MM-dd')
+  }, attributes), formatDate(date, {
+    locale,
+    options: {
+      dateStyle
+    }
+  }));
+}
+function getDate(_ref) {
+  let {
+    value,
+    children
+  } = _ref;
+  if (value) {
+    return convertStringToDate(value);
+  }
+  return convertStringToDate(convertJsxToString(children));
+}
+function getInvalidValue(_ref2) {
+  let {
+    value,
+    children
+  } = _ref2;
+  if (value instanceof Date) {
+    return value.toString();
+  }
+  if (children !== undefined && value === undefined) {
+    return String(children);
+  }
+  return value;
+}
+export default DateFormat;
+DateFormat._supportsSpacingProps = true;
+//# sourceMappingURL=DateFormat.js.map

package/components/date-format/DateFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormat.js","names":["React","useContext","useMemo","SharedContext","convertJsxToString","convertStringToDate","formatDate","format","classnames","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","useTranslation","DateFormat","props","context","invalidDate","value","locale","dateStyle","children","skeleton","date","getDate","attributes","createElement","className","replace","getInvalidValue","_extends","lang","dateTime","options","_ref","_ref2","Date","toString","undefined","String","_supportsSpacingProps"],"sources":["../../../../src/components/date-format/DateFormat.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport SharedContext, { InternalLocale } from '../../shared/Context'\nimport { convertJsxToString } from '../../shared/component-helper'\nimport { convertStringToDate } from '../date-picker/DatePickerCalc'\nimport { formatDate } from './DateFormatUtils'\nimport { format } from 'date-fns'\nimport { SpacingProps } from '../space/types'\nimport classnames from 'classnames'\nimport { createSpacingClasses } from '../space/SpacingUtils'\nimport { SkeletonShow } from '../Skeleton'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport { useTranslation } from '../../shared'\n\ntype DateFormatProps = SpacingProps & {\n  /**\n   * The date that will be formatted.\n   */\n  value?: Date | string\n\n  /**\n   * Defines the style used to format the date. Defaults to `long`.\n   * Defaults to `long`.\n   */\n  dateStyle?: Intl.DateTimeFormatOptions['dateStyle']\n  /**\n   * A string in {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument | Intl.DateTimeFormat locale} accepted format.\n   * Defaults to `nb-NO`\n   */\n  locale?: InternalLocale\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  children?: React.ReactNode\n}\n\nfunction DateFormat(props: DateFormatProps) {\n  const context = useContext(SharedContext)\n  const { invalidDate } = useTranslation().DateFormat\n\n  const {\n    value,\n    locale = context.locale,\n    dateStyle = 'long',\n    children,\n    skeleton,\n  } = props\n\n  const date = useMemo(\n    () => getDate({ value, children }),\n    [value, children]\n  )\n\n  const attributes = {}\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (!date) {\n    return (\n      <span className=\"dnb-date-format\">\n        {invalidDate.replace(\n          '{value}',\n          getInvalidValue({ value, children })\n        )}\n      </span>\n    )\n  }\n\n  return (\n    <time\n      className={classnames(\n        'dnb-date-format',\n        createSpacingClasses(props),\n        createSkeletonClass('font', skeleton, context)\n      )}\n      lang={locale}\n      // Makes sure that screen readers are reading the date correctly in the system language.\n      dateTime={format(date, 'yyyy-MM-dd')}\n      {...attributes}\n    >\n      {formatDate(date, {\n        locale,\n        options: {\n          dateStyle,\n        },\n      })}\n    </time>\n  )\n}\n\nfunction getDate({\n  value,\n  children,\n}: Pick<DateFormatProps, 'value' | 'children'>) {\n  if (value) {\n    return convertStringToDate(value)\n  }\n\n  return convertStringToDate(convertJsxToString(children))\n}\n\nfunction getInvalidValue({\n  value,\n  children,\n}: Pick<DateFormatProps, 'value' | 'children'>) {\n  if (value instanceof Date) {\n    return value.toString()\n  }\n\n  if (children !== undefined && value === undefined) {\n    return String(children)\n  }\n\n  return value\n}\n\nexport default DateFormat\n\nDateFormat._supportsSpacingProps = true\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,aAAa,MAA0B,sBAAsB;AACpE,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,mBAAmB,QAAQ,+BAA+B;AACnE,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,MAAM,QAAQ,UAAU;AAEjC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D,SACEC,mBAAmB,EACnBC,qBAAqB,QAChB,4BAA4B;AACnC,SAASC,cAAc,QAAQ,cAAc;AAyB7C,SAASC,UAAUA,CAACC,KAAsB,EAAE;EAC1C,MAAMC,OAAO,GAAGd,UAAU,CAACE,aAAa,CAAC;EACzC,MAAM;IAAEa;EAAY,CAAC,GAAGJ,cAAc,CAAC,CAAC,CAACC,UAAU;EAEnD,MAAM;IACJI,KAAK;IACLC,MAAM,GAAGH,OAAO,CAACG,MAAM;IACvBC,SAAS,GAAG,MAAM;IAClBC,QAAQ;IACRC;EACF,CAAC,GAAGP,KAAK;EAET,MAAMQ,IAAI,GAAGpB,OAAO,CAClB,MAAMqB,OAAO,CAAC;IAAEN,KAAK;IAAEG;EAAS,CAAC,CAAC,EAClC,CAACH,KAAK,EAAEG,QAAQ,CAClB,CAAC;EAED,MAAMI,UAAU,GAAG,CAAC,CAAC;EACrBb,qBAAqB,CAACa,UAAU,EAAEH,QAAQ,EAAEN,OAAO,CAAC;EAEpD,IAAI,CAACO,IAAI,EAAE;IACT,OACEtB,KAAA,CAAAyB,aAAA;MAAMC,SAAS,EAAC;IAAiB,GAC9BV,WAAW,CAACW,OAAO,CAClB,SAAS,EACTC,eAAe,CAAC;MAAEX,KAAK;MAAEG;IAAS,CAAC,CACrC,CACI,CAAC;EAEX;EAEA,OACEpB,KAAA,CAAAyB,aAAA,SAAAI,QAAA;IACEH,SAAS,EAAElB,UAAU,CACnB,iBAAiB,EACjBC,oBAAoB,CAACK,KAAK,CAAC,EAC3BJ,mBAAmB,CAAC,MAAM,EAAEW,QAAQ,EAAEN,OAAO,CAC/C,CAAE;IACFe,IAAI,EAAEZ,MAAO;IAEba,QAAQ,EAAExB,MAAM,CAACe,IAAI,EAAE,YAAY;EAAE,GACjCE,UAAU,GAEblB,UAAU,CAACgB,IAAI,EAAE;IAChBJ,MAAM;IACNc,OAAO,EAAE;MACPb;IACF;EACF,CAAC,CACG,CAAC;AAEX;AAEA,SAASI,OAAOA,CAAAU,IAAA,EAGgC;EAAA,IAH/B;IACfhB,KAAK;IACLG;EAC2C,CAAC,GAAAa,IAAA;EAC5C,IAAIhB,KAAK,EAAE;IACT,OAAOZ,mBAAmB,CAACY,KAAK,CAAC;EACnC;EAEA,OAAOZ,mBAAmB,CAACD,kBAAkB,CAACgB,QAAQ,CAAC,CAAC;AAC1D;AAEA,SAASQ,eAAeA,CAAAM,KAAA,EAGwB;EAAA,IAHvB;IACvBjB,KAAK;IACLG;EAC2C,CAAC,GAAAc,KAAA;EAC5C,IAAIjB,KAAK,YAAYkB,IAAI,EAAE;IACzB,OAAOlB,KAAK,CAACmB,QAAQ,CAAC,CAAC;EACzB;EAEA,IAAIhB,QAAQ,KAAKiB,SAAS,IAAIpB,KAAK,KAAKoB,SAAS,EAAE;IACjD,OAAOC,MAAM,CAAClB,QAAQ,CAAC;EACzB;EAEA,OAAOH,KAAK;AACd;AAEA,eAAeJ,UAAU;AAEzBA,UAAU,CAAC0B,qBAAqB,GAAG,IAAI","ignoreList":[]}

package/components/date-format/DateFormatDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const DateFormatProperties: PropertiesTableProps;

package/components/date-format/DateFormatDocs.js

@@ -0,0 +1,28 @@
+export const DateFormatProperties = {
+  value: {
+    doc: 'The date that will be formatted.',
+    type: ['Date', 'string'],
+    status: 'optional'
+  },
+  dateStyle: {
+    doc: 'Defines the style used to format the date. Defaults to `long`.',
+    type: ['long', 'medium', 'short', 'full'],
+    status: 'optional'
+  },
+  locale: {
+    doc: 'A string in [Intl.DateTimeFormat locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) format. Defaults to `nb-NO`.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=DateFormatDocs.js.map

package/components/date-format/DateFormatDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormatDocs.js","names":["DateFormatProperties","value","doc","type","status","dateStyle","locale","skeleton"],"sources":["../../../../src/components/date-format/DateFormatDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const DateFormatProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The date that will be formatted.',\n    type: ['Date', 'string'],\n    status: 'optional',\n  },\n  dateStyle: {\n    doc: 'Defines the style used to format the date. Defaults to `long`.',\n    type: ['long', 'medium', 'short', 'full'],\n    status: 'optional',\n  },\n  locale: {\n    doc: 'A string in [Intl.DateTimeFormat locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) format. Defaults to `nb-NO`.',\n    type: 'string',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,KAAK,EAAE;IACLC,GAAG,EAAE,kCAAkC;IACvCC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;IACxBC,MAAM,EAAE;EACV,CAAC;EACDC,SAAS,EAAE;IACTH,GAAG,EAAE,gEAAgE;IACrEC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;IACzCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,+KAA+K;IACpLC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/components/date-format/DateFormatUtils.d.ts

@@ -0,0 +1,11 @@
+import { AnyLocale } from '../../shared/Context';
+import { DateType } from '../date-picker/DatePickerContext';
+export type FormatDateOptions = {
+    locale?: AnyLocale;
+    options?: Intl.DateTimeFormatOptions;
+};
+export declare function formatDate(dateValue: DateType, { locale, options, }?: FormatDateOptions): string;
+export declare function formatDateRange(dates: {
+    startDate: DateType;
+    endDate: DateType;
+}, { locale, options, }?: FormatDateOptions): string;

package/components/date-format/DateFormatUtils.js

@@ -0,0 +1,29 @@
+import { LOCALE as defaultLocale } from '../../shared/defaults';
+import { convertStringToDate } from '../date-picker/DatePickerCalc';
+export function formatDate(dateValue) {
+  let {
+    locale = defaultLocale,
+    options = {
+      dateStyle: 'short'
+    }
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const date = convertStringToDate(dateValue);
+  return typeof Intl !== 'undefined' ? new Intl.DateTimeFormat(locale, options).format(date) : date.toLocaleString(locale, options);
+}
+export function formatDateRange(dates) {
+  let {
+    locale = defaultLocale,
+    options = {
+      dateStyle: 'long'
+    }
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const startDate = convertStringToDate(dates.startDate);
+  const endDate = convertStringToDate(dates.endDate);
+  if (typeof Intl !== 'undefined') {
+    return new Intl.DateTimeFormat(locale, options).formatRange(startDate, endDate);
+  }
+  const startDateString = startDate.toLocaleString(locale, options);
+  const endDateString = endDate.toLocaleString(locale, options);
+  return `${startDateString}-${endDateString}`;
+}
+//# sourceMappingURL=DateFormatUtils.js.map

package/components/date-format/DateFormatUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormatUtils.js","names":["LOCALE","defaultLocale","convertStringToDate","formatDate","dateValue","locale","options","dateStyle","arguments","length","undefined","date","Intl","DateTimeFormat","format","toLocaleString","formatDateRange","dates","startDate","endDate","formatRange","startDateString","endDateString"],"sources":["../../../../src/components/date-format/DateFormatUtils.ts"],"sourcesContent":["import { AnyLocale } from '../../shared/Context'\nimport { LOCALE as defaultLocale } from '../../shared/defaults'\nimport { convertStringToDate } from '../date-picker/DatePickerCalc'\nimport { DateType } from '../date-picker/DatePickerContext'\n\nexport type FormatDateOptions = {\n  locale?: AnyLocale\n  options?: Intl.DateTimeFormatOptions\n}\n\nexport function formatDate(\n  dateValue: DateType,\n  {\n    locale = defaultLocale,\n    options = { dateStyle: 'short' },\n  }: FormatDateOptions = {}\n) {\n  const date = convertStringToDate(dateValue)\n\n  return typeof Intl !== 'undefined'\n    ? new Intl.DateTimeFormat(locale, options).format(date)\n    : date.toLocaleString(locale, options)\n}\n\nexport function formatDateRange(\n  dates: { startDate: DateType; endDate: DateType },\n  {\n    locale = defaultLocale,\n    options = { dateStyle: 'long' },\n  }: FormatDateOptions = {}\n) {\n  const startDate = convertStringToDate(dates.startDate)\n  const endDate = convertStringToDate(dates.endDate)\n\n  if (typeof Intl !== 'undefined') {\n    return new Intl.DateTimeFormat(locale, options).formatRange(\n      startDate,\n      endDate\n    )\n  }\n\n  const startDateString = startDate.toLocaleString(locale, options)\n  const endDateString = endDate.toLocaleString(locale, options)\n\n  return `${startDateString}-${endDateString}`\n}\n"],"mappings":"AACA,SAASA,MAAM,IAAIC,aAAa,QAAQ,uBAAuB;AAC/D,SAASC,mBAAmB,QAAQ,+BAA+B;AAQnE,OAAO,SAASC,UAAUA,CACxBC,SAAmB,EAKnB;EAAA,IAJA;IACEC,MAAM,GAAGJ,aAAa;IACtBK,OAAO,GAAG;MAAEC,SAAS,EAAE;IAAQ;EACd,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEzB,MAAMG,IAAI,GAAGT,mBAAmB,CAACE,SAAS,CAAC;EAE3C,OAAO,OAAOQ,IAAI,KAAK,WAAW,GAC9B,IAAIA,IAAI,CAACC,cAAc,CAACR,MAAM,EAAEC,OAAO,CAAC,CAACQ,MAAM,CAACH,IAAI,CAAC,GACrDA,IAAI,CAACI,cAAc,CAACV,MAAM,EAAEC,OAAO,CAAC;AAC1C;AAEA,OAAO,SAASU,eAAeA,CAC7BC,KAAiD,EAKjD;EAAA,IAJA;IACEZ,MAAM,GAAGJ,aAAa;IACtBK,OAAO,GAAG;MAAEC,SAAS,EAAE;IAAO;EACb,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEzB,MAAMU,SAAS,GAAGhB,mBAAmB,CAACe,KAAK,CAACC,SAAS,CAAC;EACtD,MAAMC,OAAO,GAAGjB,mBAAmB,CAACe,KAAK,CAACE,OAAO,CAAC;EAElD,IAAI,OAAOP,IAAI,KAAK,WAAW,EAAE;IAC/B,OAAO,IAAIA,IAAI,CAACC,cAAc,CAACR,MAAM,EAAEC,OAAO,CAAC,CAACc,WAAW,CACzDF,SAAS,EACTC,OACF,CAAC;EACH;EAEA,MAAME,eAAe,GAAGH,SAAS,CAACH,cAAc,CAACV,MAAM,EAAEC,OAAO,CAAC;EACjE,MAAMgB,aAAa,GAAGH,OAAO,CAACJ,cAAc,CAACV,MAAM,EAAEC,OAAO,CAAC;EAE7D,OAAO,GAAGe,eAAe,IAAIC,aAAa,EAAE;AAC9C","ignoreList":[]}

package/components/date-format/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Component Entry
+ *
+ */
+import DateFormat from './DateFormat';
+export default DateFormat;
+export * from './DateFormat';

package/components/date-format/index.js

@@ -0,0 +1,4 @@
+import DateFormat from './DateFormat';
+export default DateFormat;
+export * from './DateFormat';
+//# sourceMappingURL=index.js.map

package/components/date-format/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["DateFormat"],"sources":["../../../../src/components/date-format/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport DateFormat from './DateFormat'\nexport default DateFormat\nexport * from './DateFormat'\n"],"mappings":"AAKA,OAAOA,UAAU,MAAM,cAAc;AACrC,eAAeA,UAAU;AACzB,cAAc,cAAc","ignoreList":[]}

package/components/date-picker/DatePicker.js

@@ -29,7 +29,7 @@ import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
 import { useTranslation } from '../../shared';
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 import DatePickerPortal from './DatePickerPortal';
-import { formatDate, formatDateRange } from './DatePickerCalc';
+import { formatDate, formatDateRange } from '../date-format/DateFormatUtils';
 const defaultProps = {
   hideNavigation: false,
   hideDays: false,
@@ -263,11 +263,8 @@ function DatePicker(externalProps) {
     }
     const options = {
       locale: context.locale,
-      formatOptions: {
-        weekday: 'long',
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric'
+      options: {
+        dateStyle: 'full'
       }
     };
     return range && endDate ? selectedDateRange.replace(/%s/, formatDateRange({