npm - @dnb/eufemia - Versions diffs - 10.32.0 → 10.34.0 - Mend

@dnb/eufemia 10.32.0 → 10.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (938) hide show

package/components/breadcrumb/Breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.js","names":["React","useCallback","useEffect","useMemo","useReducer","useRef","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","forceUpdate","isCollapsedRef","isLarge","current","onClickHandler","currentVariant","innerSpace","createElement","_extends","style_type","text","icon","icon_position","Fragment","Item","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n} from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n SectionSpacing,\n SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n convertJsxToString,\n isTrue,\n validateDOMAttributes,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n /*\n Custom className on the component root\n * Default: null\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /\n Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n * Default: null\n /\n data?: Array<BreadcrumbItemProps>\n\n /\n The content of the component. Can be used instead of prop \"data\".\n * Default: null\n /\n children?:\n \| React.ReactElement<BreadcrumbItemProps>\n \| Array<React.ReactElement<BreadcrumbItemProps>>\n\n /\n The variant of the component.\n * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n /\n variant?: 'responsive' \| 'single' \| 'multiple' \| 'collapse'\n\n /\n Handle the click event on 'single'/'collapse'\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n * Default: null\n /\n href?: string\n\n /\n Every <nav> on a page needs an unique aria-label text\n * Default: Page hierarchy\n /\n navText?: React.ReactNode\n\n /\n Add custom 'Back' text for variant 'single'\n * Default: 'Back' or defined by Context translation\n /\n goBackText?: React.ReactNode\n\n /\n Add custom 'Home' text\n * Default: 'Home' or defined by Context translation\n /\n homeText?: React.ReactNode\n\n /\n Add custom 'Back to...' text, for variant collapse\n * Default 'Back to...' or defined by Context translation\n /\n backToText?: React.ReactNode\n\n /\n If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n * Default: null\n /\n isCollapsed?: boolean\n\n /\n Use one of the Section component style types (style_type)\n * Default: transparent\n /\n styleType?: SectionStyleTypes\n\n /\n Use one of the Section component style types (style_type)\n * Default: pistachio\n /\n collapsedStyleType?: SectionStyleTypes\n\n /\n Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n * Default: false\n /\n spacing?: SectionSpacing\n\n /\n Will disable the height animation\n * Default: false\n */\n noAnimation?: boolean\n}\n\nexport const defaultProps = {\n skeleton: false,\n navText: 'Back',\n goBackText: 'Back',\n homeText: 'Home',\n backToText: 'Back to...',\n isCollapsed: true,\n styleType: 'transparent',\n collapsedStyleType: 'info',\n spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n\n // Extract additional props from global context\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.translation?.Breadcrumb,\n context?.Breadcrumb,\n { skeleton: context?.skeleton }\n )\n\n const {\n className,\n skeleton,\n children: items,\n variant,\n onClick,\n navText, // has a translation in context\n goBackText, // has a translation in context\n homeText, // eslint-disable-line\n backToText, // has a translation in context\n styleType,\n collapsedStyleType,\n isCollapsed: overrideIsCollapsed,\n spacing,\n noAnimation,\n data,\n href,\n ...props\n } = allProps\n const skeletonClasses = createSkeletonClass('font', skeleton, context)\n const spacingClasses = createSpacingClasses(props)\n\n const [, forceUpdate] = useReducer(() => ({}), {})\n\n const isCollapsedRef = useRef(overrideIsCollapsed)\n\n const { isLarge } = useMedia()\n\n useEffect(() => {\n if (overrideIsCollapsed !== isCollapsedRef.current) {\n isCollapsedRef.current = overrideIsCollapsed\n forceUpdate()\n }\n }, [overrideIsCollapsed])\n\n // Auto-collapse breadcrumbs if going from small screen to large screen.\n useEffect(() => {\n if (isLarge && overrideIsCollapsed !== false) {\n isCollapsedRef.current = true\n forceUpdate()\n }\n }, [isLarge, overrideIsCollapsed])\n\n const onClickHandler = useCallback(() => {\n isCollapsedRef.current = !isCollapsedRef.current\n forceUpdate()\n }, [])\n\n const currentVariant = useMemo(() => {\n if (!variant) {\n if (items \|\| data) {\n return 'responsive'\n } else {\n return 'single'\n }\n }\n\n return variant\n }, [data, items, variant])\n\n validateDOMAttributes(allProps, props)\n\n const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n return (\n <nav\n aria-label={convertJsxToString(navText)}\n className={classnames(\n 'dnb-breadcrumb',\n `dnb-breadcrumb--variant-${currentVariant}`,\n skeletonClasses,\n spacingClasses,\n className\n )}\n {...props}\n >\n <Section\n className=\"dnb-breadcrumb__bar\"\n style_type={styleType \|\| 'transparent'}\n innerSpace={innerSpace}\n >\n {currentVariant === 'single' ? (\n <Button\n text={goBackText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick}\n href={href}\n />\n ) : (\n <>\n {currentVariant !== 'multiple' && (\n <Button\n className=\"dnb-breadcrumb__toggle\"\n text={backToText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick ?? onClickHandler}\n aria-expanded={!isCollapsedRef.current}\n />\n )}\n\n {currentVariant !== 'collapse' && (\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={false}\n noAnimation={noAnimation}\n />\n )}\n </>\n )}\n </Section>\n\n {(currentVariant === 'collapse' \|\|\n currentVariant === 'responsive') && (\n <Section\n variant={collapsedStyleType}\n className=\"dnb-breadcrumb__collapse\"\n >\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={isCollapsedRef.current}\n noAnimation={noAnimation}\n />\n </Section>\n )}\n </nav>\n )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,MAAM,QACD,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AAGnC,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,OAAO,MAGP,oBAAoB;AAC3B,OAAOC,MAAM,MAAM,kBAAkB;AAGrC,OAAOC,OAAO,MAAM,sBAAsB;AAK1C,OAAOC,cAAc,MAA+B,kBAAkB;AACtE,SACEC,kBAAkB,EAClBC,MAAM,EACNC,qBAAqB,EACrBC,sBAAsB,QACjB,+BAA+B;AACtC,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,QAAQ,QAAQ,cAAc;AAsGvC,OAAO,MAAMC,YAAY,GAAG;EAC1BC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,MAAM;EAClBC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,YAAY;EACxBC,WAAW,EAAE,IAAI;EACjBC,SAAS,EAAE,aAAa;EACxBC,kBAAkB,EAAE,MAAM;EAC1BC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,UAAU,GAAIC,UAA0C,IAAK;EAAA,IAAAC,oBAAA;EAEjE,MAAMC,OAAO,GAAGhC,KAAK,CAACiC,UAAU,CAACtB,OAAO,CAAC;EAGzC,MAAMuB,QAAQ,GAAGlB,sBAAsB,CACrCc,UAAU,EACVX,YAAY,EACZa,OAAO,aAAPA,OAAO,wBAAAD,oBAAA,GAAPC,OAAO,CAAEG,WAAW,cAAAJ,oBAAA,uBAApBA,oBAAA,CAAsBF,UAAU,EAChCG,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEH,UAAU,EACnB;IAAET,QAAQ,EAAEY,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEZ;EAAS,CAChC,CAAC;EAED,MAAM;MACJgB,SAAS;MACThB,QAAQ;MACRiB,QAAQ,EAAEC,KAAK;MACfC,OAAO;MACPC,OAAO;MACPnB,OAAO;MACPC,UAAU;MACVC,QAAQ;MACRC,UAAU;MACVE,SAAS;MACTC,kBAAkB;MAClBF,WAAW,EAAEgB,mBAAmB;MAChCb,OAAO;MACPc,WAAW;MACXC,IAAI;MACJC;IAEF,CAAC,GAAGV,QAAQ;IADPW,KAAK,GAAAC,wBAAA,CACNZ,QAAQ,EAAAa,SAAA;EACZ,MAAMC,eAAe,GAAGzC,mBAAmB,CAAC,MAAM,EAAEa,QAAQ,EAAEY,OAAO,CAAC;EACtE,MAAMiB,cAAc,GAAGzC,oBAAoB,CAACqC,KAAK,CAAC;EAElD,MAAM,GAAGK,WAAW,CAAC,GAAG9C,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAElD,MAAM+C,cAAc,GAAG9C,MAAM,CAACoC,mBAAmB,CAAC;EAElD,MAAM;IAAEW;EAAQ,CAAC,GAAGlC,QAAQ,CAAC,CAAC;EAE9BhB,SAAS,CAAC,MAAM;IACd,IAAIuC,mBAAmB,KAAKU,cAAc,CAACE,OAAO,EAAE;MAClDF,cAAc,CAACE,OAAO,GAAGZ,mBAAmB;MAC5CS,WAAW,CAAC,CAAC;IACf;EACF,CAAC,EAAE,CAACT,mBAAmB,CAAC,CAAC;EAGzBvC,SAAS,CAAC,MAAM;IACd,IAAIkD,OAAO,IAAIX,mBAAmB,KAAK,KAAK,EAAE;MAC5CU,cAAc,CAACE,OAAO,GAAG,IAAI;MAC7BH,WAAW,CAAC,CAAC;IACf;EACF,CAAC,EAAE,CAACE,OAAO,EAAEX,mBAAmB,CAAC,CAAC;EAElC,MAAMa,cAAc,GAAGrD,WAAW,CAAC,MAAM;IACvCkD,cAAc,CAACE,OAAO,GAAG,CAACF,cAAc,CAACE,OAAO;IAChDH,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,cAAc,GAAGpD,OAAO,CAAC,MAAM;IACnC,IAAI,CAACoC,OAAO,EAAE;MACZ,IAAID,KAAK,IAAIK,IAAI,EAAE;QACjB,OAAO,YAAY;MACrB,CAAC,MAAM;QACL,OAAO,QAAQ;MACjB;IACF;IAEA,OAAOJ,OAAO;EAChB,CAAC,EAAE,CAACI,IAAI,EAAEL,KAAK,EAAEC,OAAO,CAAC,CAAC;EAE1BxB,qBAAqB,CAACmB,QAAQ,EAAEW,KAAK,CAAC;EAEtC,MAAMW,UAAU,GAAG1C,MAAM,CAACc,OAAO,CAAC,GAAG,OAAO,GAAGA,OAAO;EAEtD,OACE5B,KAAA,CAAAyD,aAAA,QAAAC,QAAA;IACE,cAAY7C,kBAAkB,CAACQ,OAAO,CAAE;IACxCe,SAAS,EAAE9B,UAAU,2CAEQiD,cAAe,IAC1CP,eAAe,EACfC,cAAc,EACdb,SACF;EAAE,GACES,KAAK,GAET7C,KAAA,CAAAyD,aAAA,CAAChD,OAAO;IACN2B,SAAS,EAAC,qBAAqB;IAC/BuB,UAAU,EAAEjC,SAAS,IAAI,aAAc;IACvC8B,UAAU,EAAEA;EAAW,GAEtBD,cAAc,KAAK,QAAQ,GAC1BvD,KAAA,CAAAyD,aAAA,CAAC/C,MAAM;IACLkD,IAAI,EAAEtC,UAAW;IACjBiB,OAAO,EAAC,UAAU;IAClBsB,IAAI,EAAC,cAAc;IACnBC,aAAa,EAAC,MAAM;IACpBtB,OAAO,EAAEA,OAAQ;IACjBI,IAAI,EAAEA;EAAK,CACZ,CAAC,GAEF5C,KAAA,CAAAyD,aAAA,CAAAzD,KAAA,CAAA+D,QAAA,QACGR,cAAc,KAAK,UAAU,IAC5BvD,KAAA,CAAAyD,aAAA,CAAC/C,MAAM;IACL0B,SAAS,EAAC,wBAAwB;IAClCwB,IAAI,EAAEpC,UAAW;IACjBe,OAAO,EAAC,UAAU;IAClBsB,IAAI,EAAC,cAAc;IACnBC,aAAa,EAAC,MAAM;IACpBtB,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIc,cAAe;IACnC,iBAAe,CAACH,cAAc,CAACE;EAAQ,CACxC,CACF,EAEAE,cAAc,KAAK,UAAU,IAC5BvD,KAAA,CAAAyD,aAAA,CAACxC,kBAAkB;IACjB0B,IAAI,EAAEA,IAAK;IACXL,KAAK,EAAEA,KAAM;IACbb,WAAW,EAAE,KAAM;IACnBiB,WAAW,EAAEA;EAAY,CAC1B,CAEH,CAEG,CAAC,EAET,CAACa,cAAc,KAAK,UAAU,IAC7BA,cAAc,KAAK,YAAY,KAC/BvD,KAAA,CAAAyD,aAAA,CAAChD,OAAO;IACN8B,OAAO,EAAEZ,kBAAmB;IAC5BS,SAAS,EAAC;EAA0B,GAEpCpC,KAAA,CAAAyD,aAAA,CAACxC,kBAAkB;IACjB0B,IAAI,EAAEA,IAAK;IACXL,KAAK,EAAEA,KAAM;IACbb,WAAW,EAAE0B,cAAc,CAACE,OAAQ;IACpCX,WAAW,EAAEA;EAAY,CAC1B,CACM,CAER,CAAC;AAEV,CAAC;AAEDb,UAAU,CAACmC,IAAI,GAAGpD,cAAc;AAChCiB,UAAU,CAACoC,qBAAqB,GAAG,IAAI;AAEvC,SAASrD,cAAc;AACvB,eAAeiB,UAAU"}
1	+ {"version":3,"file":"Breadcrumb.js","names":["React","useCallback","useEffect","useMemo","useReducer","useRef","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","useTheme","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","_useTheme","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","forceUpdate","isCollapsedRef","isLarge","current","onClickHandler","currentVariant","innerSpace","overrideSbankenSectionColor","isSbanken","createElement","_extends","style_type","text","icon","icon_position","Fragment","undefined","backgroundColor","Item","_supportsSpacingProps"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n} from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n SectionSpacing,\n SectionStyleTypes,\n SectionVariants,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n convertJsxToString,\n isTrue,\n validateDOMAttributes,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia, useTheme } from '../../shared'\n\nexport type BreadcrumbProps = {\n /*\n Custom className on the component root\n * Default: null\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /\n Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n * Default: null\n /\n data?: Array<BreadcrumbItemProps>\n\n /\n The content of the component. Can be used instead of prop \"data\".\n * Default: null\n /\n children?:\n \| React.ReactElement<BreadcrumbItemProps>\n \| Array<React.ReactElement<BreadcrumbItemProps>>\n\n /\n The variant of the component.\n * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n /\n variant?: 'responsive' \| 'single' \| 'multiple' \| 'collapse'\n\n /\n Handle the click event on 'single'/'collapse'\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n * Default: null\n /\n href?: string\n\n /\n Every <nav> on a page needs an unique aria-label text\n * Default: Page hierarchy\n /\n navText?: React.ReactNode\n\n /\n Add custom 'Back' text for variant 'single'\n * Default: 'Back' or defined by Context translation\n /\n goBackText?: React.ReactNode\n\n /\n Add custom 'Home' text\n * Default: 'Home' or defined by Context translation\n /\n homeText?: React.ReactNode\n\n /\n Add custom 'Back to...' text, for variant collapse\n * Default 'Back to...' or defined by Context translation\n /\n backToText?: React.ReactNode\n\n /\n If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n * Default: null\n /\n isCollapsed?: boolean\n\n /\n Use one of the Section component style types (style_type)\n * Default: transparent\n /\n styleType?: SectionStyleTypes\n\n /\n Use one of the Section component variants\n * Default: info\n /\n collapsedStyleType?: SectionVariants\n\n /\n Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n * Default: false\n /\n spacing?: SectionSpacing\n\n /\n Will disable the height animation\n * Default: false\n */\n noAnimation?: boolean\n}\n\nexport const defaultProps = {\n skeleton: false,\n navText: 'Back',\n goBackText: 'Back',\n homeText: 'Home',\n backToText: 'Back to...',\n isCollapsed: true,\n styleType: 'transparent',\n collapsedStyleType: 'info',\n spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n\n // Extract additional props from global context\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.translation?.Breadcrumb,\n context?.Breadcrumb,\n { skeleton: context?.skeleton }\n )\n\n const {\n className,\n skeleton,\n children: items,\n variant,\n onClick,\n navText, // has a translation in context\n goBackText, // has a translation in context\n homeText, // eslint-disable-line\n backToText, // has a translation in context\n styleType,\n collapsedStyleType,\n isCollapsed: overrideIsCollapsed,\n spacing,\n noAnimation,\n data,\n href,\n ...props\n } = allProps\n const skeletonClasses = createSkeletonClass('font', skeleton, context)\n const spacingClasses = createSpacingClasses(props)\n\n const [, forceUpdate] = useReducer(() => ({}), {})\n\n const isCollapsedRef = useRef(overrideIsCollapsed)\n\n const { isLarge } = useMedia()\n\n useEffect(() => {\n if (overrideIsCollapsed !== isCollapsedRef.current) {\n isCollapsedRef.current = overrideIsCollapsed\n forceUpdate()\n }\n }, [overrideIsCollapsed])\n\n // Auto-collapse breadcrumbs if going from small screen to large screen.\n useEffect(() => {\n if (isLarge && overrideIsCollapsed !== false) {\n isCollapsedRef.current = true\n forceUpdate()\n }\n }, [isLarge, overrideIsCollapsed])\n\n const onClickHandler = useCallback(() => {\n isCollapsedRef.current = !isCollapsedRef.current\n forceUpdate()\n }, [])\n\n const currentVariant = useMemo(() => {\n if (!variant) {\n if (items \|\| data) {\n return 'responsive'\n } else {\n return 'single'\n }\n }\n\n return variant\n }, [data, items, variant])\n\n validateDOMAttributes(allProps, props)\n\n const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n const overrideSbankenSectionColor =\n useTheme()?.isSbanken && collapsedStyleType === 'info'\n return (\n <nav\n aria-label={convertJsxToString(navText)}\n className={classnames(\n 'dnb-breadcrumb',\n `dnb-breadcrumb--variant-${currentVariant}`,\n skeletonClasses,\n spacingClasses,\n className\n )}\n {...props}\n >\n <Section\n className=\"dnb-breadcrumb__bar\"\n style_type={styleType \|\| 'transparent'}\n innerSpace={innerSpace}\n >\n {currentVariant === 'single' ? (\n <Button\n text={goBackText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick}\n href={href}\n />\n ) : (\n <>\n {currentVariant !== 'multiple' && (\n <Button\n className=\"dnb-breadcrumb__toggle\"\n text={backToText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick ?? onClickHandler}\n aria-expanded={!isCollapsedRef.current}\n />\n )}\n\n {currentVariant !== 'collapse' && (\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={false}\n noAnimation={noAnimation}\n />\n )}\n </>\n )}\n </Section>\n\n {(currentVariant === 'collapse' \|\|\n currentVariant === 'responsive') && (\n <Section\n variant={\n overrideSbankenSectionColor ? undefined : collapsedStyleType\n }\n className=\"dnb-breadcrumb__collapse\"\n backgroundColor={\n overrideSbankenSectionColor\n ? 'var(--sb-color-gray-light-2)'\n : undefined\n }\n >\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={isCollapsedRef.current}\n noAnimation={noAnimation}\n />\n </Section>\n )}\n </nav>\n )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}

package/components/card/Card.js CHANGED Viewed

@@ -69,6 +69,7 @@ function Card(props) {
     direction: direction !== null && direction !== void 0 ? direction : 'vertical',
     divider: divider,
     alignSelf: alignSelf,
+    align: stack ? 'stretch' : undefined,
     wrap: !stack,
     gap: stack ? 'medium' : (gap !== null && gap !== void 0 ? gap : spacing) || false,
     rowGap: rowGap || false

package/components/card/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","names":["React","classnames","Flex","SectionParams","combineLabelledBy","useId","Space","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","divider","rowGap","responsive","filled","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","Container","wrap","id","_supportsSpacingProps"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\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'\nimport Space 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 FlexItemProps & {\n stack?: boolean\n } & SpaceProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref' \| 'wrap' \| 'size'>\n\nfunction Card(props: Props) {\n const {\n className,\n stack,\n direction,\n gap,\n spacing,\n innerSpace,\n alignSelf = 'stretch',\n divider = 'space',\n rowGap,\n responsive = true,\n filled,\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 roundedCorner: responsive ? falseWhenSmall : true,\n outline: true,\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 <Flex.Container\n direction={direction ?? 'vertical'}\n divider={divider}\n alignSelf={alignSelf}\n wrap={!stack}\n gap={stack ? 'medium' : (gap ?? spacing) \|\| false}\n rowGap={rowGap \|\| false}\n >\n {title && (\n <Space id={titleId} className=\"dnb-card__title\">\n {title}\n </Space>\n )}\n {children}\n </Flex.Container>\n </Flex.Item>\n )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,aAAa,QAAsB,oBAAoB;AAChE,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,OAAOC,KAAK,MAAM,4BAA4B;AAM9C,OAAOC,KAAK,MAAM,UAAU;AAuB5B,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;MACJC,SAAS;MACTC,KAAK;MACLC,SAAS;MACTC,GAAG;MACHC,OAAO;MACPC,UAAU;MACVC,SAAS,GAAG,SAAS;MACrBC,OAAO,GAAG,OAAO;MACjBC,MAAM;MACNC,UAAU,GAAG,IAAI;MACjBC,MAAM;MACNC,KAAK;MACLC;IAEF,CAAC,GAAGb,KAAK;IADJc,IAAI,GAAAC,wBAAA,CACLf,KAAK,EAAAgB,SAAA;EAET,MAAMC,OAAO,GAAGpB,KAAK,CAAC,CAAC;EACvB,MAAMqB,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,GAAGlB,UAAU,GAAAmB,aAAA,CAAAA,aAAA,KAEpBN,UAAU;IACbE,KAAK,EAAE,CAAC;IACRE,IAAI,EAAE;EAAC,KAETJ,UAAU;EAEd,MAAMO,MAAM,GAAGnC,aAAa,CAAAkC,aAAA,CAAAA,aAAA;IAC1B5B,SAAS,EAAER,UAAU,CACnB,UAAU,EACVQ,SAAS,EACTS,UAAU,IAAI,sBAAsB,EACpCC,MAAM,IAAI,kBACZ,CAAC;IACDoB,QAAQ,EAAErB,UAAU,GAAGY,aAAa,GAAG,KAAK;IAC5CU,aAAa,EAAEtB,UAAU,GAAGQ,cAAc,GAAG,IAAI;IACjDe,OAAO,EAAE,IAAI;IACb3B,UAAU,EACRA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GACT;MACCa,KAAK,EAAES,UAAU;MACjBR,MAAM,EAAEG,UAAU;MAClBF,KAAK,EAAEE;IACT;EAAoB,GAClBT,IAAI;IACR,iBAAiB,EAAElB,iBAAiB,CAACkB,IAAI,EAAEF,KAAK,IAAIK,OAAO;EAAC,EAC7D,CAAC;EAEF,OACEzB,KAAA,CAAA0C,aAAA,CAACxC,IAAI,CAACyC,IAAI,EAAAC,QAAA;IAAC7B,SAAS,EAAEA,SAAU;IAAC8B,OAAO,EAAC;EAAS,GAAKP,MAAM,GAC3DtC,KAAA,CAAA0C,aAAA,CAACxC,IAAI,CAAC4C,SAAS;IACbnC,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,UAAW;IACnCK,OAAO,EAAEA,OAAQ;IACjBD,SAAS,EAAEA,SAAU;IACrBgC,IAAI,EAAE,~~CAACrC~~,KAAM;IACbE,GAAG,EAAEF,KAAK,GAAG,QAAQ,GAAG,CAACE,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAIC,OAAO,KAAK,KAAM;IAClDI,MAAM,EAAEA,MAAM,IAAI;EAAM,GAEvBG,KAAK,IACJpB,KAAA,CAAA0C,aAAA,CAACpC,KAAK;~~IAAC0C~~,EAAE,~~EAAEvB~~,OAAQ;IAAChB,SAAS,EAAC;EAAiB,GAC5CW,KACI,CACR,EACAC,QACa,CACP,CAAC;AAEhB;AAEAd,IAAI,~~CAAC0C~~,qBAAqB,GAAG,IAAI;AAEjC,~~eAAe1C~~,IAAI"}
1	+ {"version":3,"file":"Card.js","names":["React","classnames","Flex","SectionParams","combineLabelledBy","useId","Space","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","divider","rowGap","responsive","filled","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","Container","align","undefined","wrap","id","_supportsSpacingProps"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\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'\nimport Space 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 FlexItemProps & {\n stack?: boolean\n } & SpaceProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref' \| 'wrap' \| 'size'>\n\nfunction Card(props: Props) {\n const {\n className,\n stack,\n direction,\n gap,\n spacing,\n innerSpace,\n alignSelf = 'stretch',\n divider = 'space',\n rowGap,\n responsive = true,\n filled,\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 roundedCorner: responsive ? falseWhenSmall : true,\n outline: true,\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 <Flex.Container\n direction={direction ?? 'vertical'}\n divider={divider}\n alignSelf={alignSelf}\n align={stack ? 'stretch' : undefined}\n wrap={!stack}\n gap={stack ? 'medium' : (gap ?? spacing) \|\| false}\n rowGap={rowGap \|\| false}\n >\n {title && (\n <Space id={titleId} className=\"dnb-card__title\">\n {title}\n </Space>\n )}\n {children}\n </Flex.Container>\n </Flex.Item>\n )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}

package/components/card/style/dnb-card.css CHANGED Viewed

@@ -63,4 +63,7 @@
 }
 .dnb-card > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
   width: 100%;
+}
+.dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
+  align-self: flex-start;
 }

package/components/card/style/dnb-card.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{background-color:var(--background-color)}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}
1	+ .dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{background-color:var(--background-color)}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}

package/components/card/style/dnb-card.scss CHANGED Viewed

@@ -92,4 +92,8 @@
   & > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
     width: 100%;
   }
+  & > .dnb-flex-container--align-stretch > .dnb-button {
+    align-self: flex-start;
+  }
 }

package/components/checkbox/Checkbox.js CHANGED Viewed

@@ -101,7 +101,7 @@ function Checkbox(localProps) {
     }
   }, [handleChange]);
   const mainParams = {
-    className: classnames("dnb-checkbox dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(props), className, status && `dnb-checkbox__status--${statusState}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${labelPosition || 'right'}`)
+    className: classnames("dnb-checkbox dnb-form-component", createSkeletonClass(null, skeleton, context), createSpacingClasses(props), className, status && `dnb-checkbox__status--${statusState}`, size && `dnb-checkbox--${size}`, label && `dnb-checkbox--label-position-${labelPosition || 'right'}`)
   };
   const showStatus = getStatusState(status);
   const inputParams = handleInputAttributes();

package/components/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","keycode","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","props","extractPropsFromContext","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","skeleton","className","id","idProp","indeterminate","checked","onChange","innerRef","rest","_objectWithoutProperties","_excluded","isFn","refHook","ref","current","isChecked","setIsChecked","prevChecked","setPrevChecked","callOnChange","args","handleChange","event","preventDefault","updatedCheck","focus","onChangeHandler","onKeyDownHandler","mainParams","showStatus","inputParams","handleInputAttributes","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_span2","_objectSpread","FormRow","formElement"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/*\n Web Checkbox Component\n /\n\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\n\nimport {\n validateDOMAttributes,\n getStatusState,\n combineDescribedBy,\n extendPropsWithContext,\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}\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 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'\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 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 innerRef,\n ...rest\n } = props\n\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 [isChecked, setIsChecked] = useState<boolean>(checked ?? false)\n const [prevChecked, setPrevChecked] = useState<boolean>(checked)\n\n useEffect(() => {\n if (checked !== prevChecked) {\n setIsChecked(!!checked)\n setPrevChecked(!!checked)\n }\n }, [checked, prevChecked])\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 (readOnly) {\n return event.preventDefault()\n }\n const updatedCheck = !isChecked\n\n setIsChecked(updatedCheck)\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, isChecked, readOnly, ref]\n )\n\n const onChangeHandler = useCallback(\n (event: OnChangeParams['event']) => {\n handleChange(event)\n },\n [handleChange]\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 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),\n createSpacingClasses(props),\n className\n ),\n }\n\n const showStatus = getStatusState(status)\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={isChecked ? value \|\| '' : ''}\n disabled={disabled}\n {...inputParams}\n onChange={onChangeHandler}\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 /\n Adds aria attributes, calls validateDOMAttributes and skeletonDOMAttributes and returns the result\n */\n function handleInputAttributes() {\n const inputParams = {\n disabled,\n checked: isChecked,\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\n function extractPropsFromContext() {\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}\n\nexport default Checkbox\n"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","keycode","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","props","extractPropsFromContext","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","skeleton","className","id","idProp","indeterminate","checked","onChange","innerRef","rest","_objectWithoutProperties","_excluded","isFn","refHook","ref","current","isChecked","setIsChecked","prevChecked","setPrevChecked","callOnChange","args","handleChange","event","preventDefault","updatedCheck","focus","onChangeHandler","onKeyDownHandler","mainParams","showStatus","inputParams","handleInputAttributes","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_span2","_objectSpread","FormRow","formElement"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/*\n Web Checkbox Component\n /\n\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\n\nimport {\n validateDOMAttributes,\n getStatusState,\n combineDescribedBy,\n extendPropsWithContext,\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}\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 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'\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 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 innerRef,\n ...rest\n } = props\n\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 [isChecked, setIsChecked] = useState<boolean>(checked ?? false)\n const [prevChecked, setPrevChecked] = useState<boolean>(checked)\n\n useEffect(() => {\n if (checked !== prevChecked) {\n setIsChecked(!!checked)\n setPrevChecked(!!checked)\n }\n }, [checked, prevChecked])\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 (readOnly) {\n return event.preventDefault()\n }\n const updatedCheck = !isChecked\n\n setIsChecked(updatedCheck)\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, isChecked, readOnly, ref]\n )\n\n const onChangeHandler = useCallback(\n (event: OnChangeParams['event']) => {\n handleChange(event)\n },\n [handleChange]\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 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 showStatus = getStatusState(status)\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={isChecked ? value \|\| '' : ''}\n disabled={disabled}\n {...inputParams}\n onChange={onChangeHandler}\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 /\n Adds aria attributes, calls validateDOMAttributes and skeletonDOMAttributes and returns the result\n */\n function handleInputAttributes() {\n const inputParams = {\n disabled,\n checked: isChecked,\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\n function extractPropsFromContext() {\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}\n\nexport default Checkbox\n"],"mappings":"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"}

package/components/checkbox/style/dnb-checkbox.css CHANGED Viewed

@@ -19,14 +19,14 @@
   --checkbox-gfx-width__indeterminate: 0.625rem;
   --checkbox-gfx-height__indeterminate--large: 0.875rem;
   --checkbox-gfx-width__indeterminate--large: 0.875rem;
-  --checkbox-border-width: 0.125rem;
-  --checkbox-border-width--hover: 0.125rem;
+  --checkbox-border-width: 0.09375rem;
   --checkbox-color-gfx-on: black;
   --checkbox-color-gfx-off: white;
   --checkbox-color-background-on: white;
   --checkbox-color-background-off: white;
   --checkbox-color-border-on: black;
   --checkbox-color-border-off: black;
+  --checkbox-border-width--disabled: 0.125rem;
   --checkbox-color-gfx--disabled: grey;
   --checkbox-color-background-on--disabled: lightgrey;
   --checkbox-color-background-off--disabled: lightgrey;
@@ -35,12 +35,14 @@
   --checkbox-color-gfx__indeterminate--disabled: grey;
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx--hover: grey;
   --checkbox-color-background--hover: white;
   --checkbox-color-border-on--hover: grey;
   --checkbox-color-border-off--hover: grey;
   --checkbox-color-gfx--focus: grey;
   --checkbox-color-background--focus: lightgrey;
+  --checkbox-border-width--error: 0.125rem;
   --checkbox-color-gfx--error: lavenderblush;
   --checkbox-color-gfx--error-contrast: red;
   --checkbox-color-background-on--error: red;
@@ -233,6 +235,9 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   width: var(--checkbox-gfx-width__indeterminate--large);
   height: var(--checkbox-gfx-height__indeterminate--large);
 }
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button {
+  border-width: var(--checkbox-border-width--disabled);
+}
 .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-on--disabled);
   border-color: var(--checkbox-color-border-on--disabled);
@@ -267,6 +272,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__button {
   border-color: var(--checkbox-color-border-off--hover);
   background-color: var(--checkbox-color-background--hover);
+  border-width: var(--checkbox-border-width--hover);
 }
 .dnb-checkbox__input:hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--hover);
@@ -293,7 +299,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
   display: block;
   --border-color: var(--checkbox-color-border--error);
-  --border-width: var(--checkbox-border-width);
+  --border-width: var(--checkbox-border-width--error);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }

package/components/checkbox/style/dnb-checkbox.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- :root{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.dnb-checkbox{--checkbox-border-radius:0.25rem;--checkbox-gfx-border-radius__indeterminate:0.125rem;--checkbox-width--large:2rem;--checkbox-height--large:2rem;--checkbox-gfx-height__indeterminate:0.625rem;--checkbox-gfx-width__indeterminate:0.625rem;--checkbox-gfx-height__indeterminate--large:0.875rem;--checkbox-gfx-width__indeterminate--large:0.875rem;--checkbox-border-width:0.125rem;--checkbox-border-width--hover:0.125rem;--checkbox-color-gfx-on:#000;--checkbox-color-gfx-off:#fff;--checkbox-color-background-on:#fff;--checkbox-color-background-off:#fff;--checkbox-color-border-on:#000;--checkbox-color-border-off:#000;--checkbox-color-gfx--disabled:grey;--checkbox-color-background-on--disabled:#d3d3d3;--checkbox-color-background-off--disabled:#d3d3d3;--checkbox-color-border-on--disabled:grey;--checkbox-color-border-off--disabled:grey;--checkbox-color-gfx__indeterminate--disabled:grey;--checkbox-color-background--active:#d3d3d3;--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:grey;--checkbox-color-background--hover:#fff;--checkbox-color-border-on--hover:grey;--checkbox-color-border-off--hover:grey;--checkbox-color-gfx--focus:grey;--checkbox-color-background--focus:#d3d3d3;--checkbox-color-gfx--error:#fff0f5;--checkbox-color-gfx--error-contrast:red;--checkbox-color-background-on--error:red;--checkbox-color-background--error-contrast:#fff0f5;--checkbox-color-border--error:red;--checkbox-color-gfx-indeterminate--error:red;--checkbox-color-gfx--error--hover:red;--checkbox-color-background--error--hover:#fff0f5;--checkbox-color-border--error--hover:red;--checkbox-color-background-indeterminate:grey;--checkbox-color-gfx-indeterminate:#a9a9a9;--checkbox-color-background-indeterminate--active:grey;--checkbox-color-border-indeterminate--active:#fff;--checkbox-color-gfx-indeterminate--active:#fff;--checkbox-bounding--medium:1.75,1.75;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-checkbox__button,.dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--checkbox-bounding--medium));width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);transform:scale(1);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox__input:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.dnb-checkbox__input:checked~.dnb-checkbox__button,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border-color:var(--checkbox-color-border-off);transition:background-color .1s ease-out}.dnb-checkbox__input~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate);border-radius:var(--checkbox-gfx-border-radius__indeterminate);height:var(--checkbox-gfx-height__indeterminate);opacity:0;position:absolute;transform:scale(.85);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--checkbox-gfx-width__indeterminate);z-index:5}.dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{opacity:1;transform:scale(1)}.dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__button{background-color:transparent;border-color:var(--checkbox-color-border-off)}.dnb-checkbox__input:indeterminate:checked:hover~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate:hover~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox--large .dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{height:var(--checkbox-gfx-height__indeterminate--large);width:var(--checkbox-gfx-width__indeterminate--large)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--disabled);border-color:var(--checkbox-color-border-on--disabled)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--disabled);border-color:var(--checkbox-color-border-off--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background--active);border-color:var(--checkbox-color-border--active)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__button{background-color:var(--checkbox-color-background-indeterminate--active);border-color:var(--checkbox-color-border-indeterminate--active)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--active)}.dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--hover);border-color:var(--checkbox-color-border-off--hover)}.dnb-checkbox__input:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.dnb-checkbox__input:not([disabled]):checked:hover~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled])[data-checked=true]:hover~.dnb-checkbox__button{border:var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button .dnb-checkbox__focus{display:block}.dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button{border:none}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus{--border-color:var(--checkbox-color-border--error);--border-width:var(--checkbox-border-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button[data-checked=true]{border-color:var(--checkbox-color-border--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{--border-color:var(--checkbox-color-border--error);--border-width:calc(var(--checkbox-border-width--hover));background-color:var(--checkbox-color-background--error-contrast);border:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked~.dnb-checkbox__button,.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{background-color:var(--checkbox-color-gfx--error-contrast);border-radius:var(--checkbox-border-radius);color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__indeterminate{background-color:var(--skeleton-color)}
1	+ :root{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.dnb-checkbox{--checkbox-border-radius:0.25rem;--checkbox-gfx-border-radius__indeterminate:0.125rem;--checkbox-width--large:2rem;--checkbox-height--large:2rem;--checkbox-gfx-height__indeterminate:0.625rem;--checkbox-gfx-width__indeterminate:0.625rem;--checkbox-gfx-height__indeterminate--large:0.875rem;--checkbox-gfx-width__indeterminate--large:0.875rem;--checkbox-border-width:0.09375rem;--checkbox-color-gfx-on:#000;--checkbox-color-gfx-off:#fff;--checkbox-color-background-on:#fff;--checkbox-color-background-off:#fff;--checkbox-color-border-on:#000;--checkbox-color-border-off:#000;--checkbox-border-width--disabled:0.125rem;--checkbox-color-gfx--disabled:grey;--checkbox-color-background-on--disabled:#d3d3d3;--checkbox-color-background-off--disabled:#d3d3d3;--checkbox-color-border-on--disabled:grey;--checkbox-color-border-off--disabled:grey;--checkbox-color-gfx__indeterminate--disabled:grey;--checkbox-color-background--active:#d3d3d3;--checkbox-color-border--active:transparent;--checkbox-border-width--hover:0.125rem;--checkbox-color-gfx--hover:grey;--checkbox-color-background--hover:#fff;--checkbox-color-border-on--hover:grey;--checkbox-color-border-off--hover:grey;--checkbox-color-gfx--focus:grey;--checkbox-color-background--focus:#d3d3d3;--checkbox-border-width--error:0.125rem;--checkbox-color-gfx--error:#fff0f5;--checkbox-color-gfx--error-contrast:red;--checkbox-color-background-on--error:red;--checkbox-color-background--error-contrast:#fff0f5;--checkbox-color-border--error:red;--checkbox-color-gfx-indeterminate--error:red;--checkbox-color-gfx--error--hover:red;--checkbox-color-background--error--hover:#fff0f5;--checkbox-color-border--error--hover:red;--checkbox-color-background-indeterminate:grey;--checkbox-color-gfx-indeterminate:#a9a9a9;--checkbox-color-background-indeterminate--active:grey;--checkbox-color-border-indeterminate--active:#fff;--checkbox-color-gfx-indeterminate--active:#fff;--checkbox-bounding--medium:1.75,1.75;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-checkbox__button,.dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--checkbox-bounding--medium));width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);transform:scale(1);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox__input:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.dnb-checkbox__input:checked~.dnb-checkbox__button,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border-color:var(--checkbox-color-border-off);transition:background-color .1s ease-out}.dnb-checkbox__input~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate);border-radius:var(--checkbox-gfx-border-radius__indeterminate);height:var(--checkbox-gfx-height__indeterminate);opacity:0;position:absolute;transform:scale(.85);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--checkbox-gfx-width__indeterminate);z-index:5}.dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{opacity:1;transform:scale(1)}.dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__button{background-color:transparent;border-color:var(--checkbox-color-border-off)}.dnb-checkbox__input:indeterminate:checked:hover~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate:hover~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox--large .dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{height:var(--checkbox-gfx-height__indeterminate--large);width:var(--checkbox-gfx-width__indeterminate--large)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button{border-width:var(--checkbox-border-width--disabled)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--disabled);border-color:var(--checkbox-color-border-on--disabled)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--disabled);border-color:var(--checkbox-color-border-off--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background--active);border-color:var(--checkbox-color-border--active)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__button{background-color:var(--checkbox-color-background-indeterminate--active);border-color:var(--checkbox-color-border-indeterminate--active)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--active)}.dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--hover);border-color:var(--checkbox-color-border-off--hover);border-width:var(--checkbox-border-width--hover)}.dnb-checkbox__input:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.dnb-checkbox__input:not([disabled]):checked:hover~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled])[data-checked=true]:hover~.dnb-checkbox__button{border:var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button .dnb-checkbox__focus{display:block}.dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button{border:none}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus{--border-color:var(--checkbox-color-border--error);--border-width:var(--checkbox-border-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button[data-checked=true]{border-color:var(--checkbox-color-border--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{--border-color:var(--checkbox-color-border--error);--border-width:calc(var(--checkbox-border-width--hover));background-color:var(--checkbox-color-background--error-contrast);border:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked~.dnb-checkbox__button,.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{background-color:var(--checkbox-color-gfx--error-contrast);border-radius:var(--checkbox-border-radius);color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__indeterminate{background-color:var(--skeleton-color)}

package/components/checkbox/style/dnb-checkbox.scss CHANGED Viewed

@@ -19,9 +19,8 @@
   --checkbox-gfx-width__indeterminate: 0.625rem;
   --checkbox-gfx-height__indeterminate--large: 0.875rem;
   --checkbox-gfx-width__indeterminate--large: 0.875rem;
-  --checkbox-border-width: 0.125rem;
-  --checkbox-border-width--hover: 0.125rem;
   // Normal state
+  --checkbox-border-width: 0.09375rem;
   --checkbox-color-gfx-on: black;
   --checkbox-color-gfx-off: white;
   --checkbox-color-background-on: white;
@@ -29,6 +28,7 @@
   --checkbox-color-border-on: black;
   --checkbox-color-border-off: black;
   // Disabled state
+  --checkbox-border-width--disabled: 0.125rem;
   --checkbox-color-gfx--disabled: grey;
   --checkbox-color-background-on--disabled: lightgrey;
   --checkbox-color-background-off--disabled: lightgrey;
@@ -39,6 +39,7 @@
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
   // Hover state
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx--hover: grey;
   --checkbox-color-background--hover: white;
   --checkbox-color-border-on--hover: grey;
@@ -47,6 +48,7 @@
   --checkbox-color-gfx--focus: grey;
   --checkbox-color-background--focus: lightgrey;
   // Error state
+  --checkbox-border-width--error: 0.125rem;
   --checkbox-color-gfx--error: lavenderblush;
   --checkbox-color-gfx--error-contrast: red;
   --checkbox-color-background-on--error: red;
@@ -315,6 +317,11 @@
   /** Disabled state **/
+  // General
+  &__input[disabled]:checked ~ &__button {
+    border-width: var(--checkbox-border-width--disabled);
+  }
   // On
   &__input[disabled]:checked ~ &__button,
   &__input[disabled][data-checked='true'] ~ &__button {
@@ -375,6 +382,7 @@
   &__input:not([disabled]):not(:active):hover ~ &__button {
     border-color: var(--checkbox-color-border-off--hover);
     background-color: var(--checkbox-color-background--hover);
+    border-width: var(--checkbox-border-width--hover);
   }
   &__input:hover ~ &__gfx {
@@ -427,7 +435,7 @@
     display: block;
     @include fakeBorder(
       var(--checkbox-color-border--error),
-      var(--checkbox-border-width)
+      var(--checkbox-border-width--error)
     );
   }

package/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.css CHANGED Viewed

@@ -3,14 +3,14 @@
 *
 */
 .dnb-checkbox {
-  --checkbox-border-width: 0.125rem;
-  --checkbox-border-width--hover: 0.125rem;
+  --checkbox-border-width: 0.0625rem;
   --checkbox-color-gfx-on: var(--sb-color-violet-light);
   --checkbox-color-gfx-off: var(--sb-color-white);
   --checkbox-color-background-on: var(--sb-color-white);
   --checkbox-color-background-off: var(--sb-color-white);
   --checkbox-color-border-on: var(--sb-color-violet);
   --checkbox-color-border-off: var(--sb-color-violet);
+  --checkbox-border-width--disabled: 0.0625rem;
   --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
   --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
   --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
@@ -19,12 +19,14 @@
   --checkbox-color-gfx__indeterminate--disabled: var(--sb-color-gray-dark);
   --checkbox-color-background--active: var(--sb-color-white);
   --checkbox-color-border--active: var(--sb-color-gray);
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx--hover: var(--sb-color-violet-light);
   --checkbox-color-background--hover: var(--sb-color-violet-light-3);
   --checkbox-color-border-on--hover: var(--sb-color-violet);
   --checkbox-color-border-off--hover: var(--sb-color-violet);
   --checkbox-color-gfx--focus: var(--focus-ring-color);
   --checkbox-color-background--focus: var(--sb-color-blue-light-3);
+  --checkbox-border-width--error: 0.0625rem;
   --checkbox-color-gfx--error: var(--sb-color-magenta);
   --checkbox-color-gfx--error-contrast: var(--sb-color-magenta);
   --checkbox-color-background-on--error: var(--sb-color-white);
@@ -47,6 +49,6 @@
   --checkbox-gfx-height__indeterminate: 0.125rem;
   --checkbox-gfx-height__indeterminate--large: 0.25rem;
   --checkbox-gfx-width__indeterminate--large: 1.5rem;
-  --checkbox-border-radius: 0.125rem;
+  --checkbox-border-radius: 0;
   --checkbox-gfx-border-radius__indeterminate: 0rem;
 }

package/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.min.css CHANGED Viewed

@@ -1,5 +1,5 @@
-.dnb-checkbox{--checkbox-border-width:0.125rem;--checkbox-border-width--hover:0.125rem;--checkbox-color-gfx-on:var(--sb-color-violet-light);--checkbox-color-gfx-off:var(--sb-color-white);--checkbox-color-background-on:var(--sb-color-white);--checkbox-color-background-off:var(--sb-color-white);--checkbox-color-border-on:var(--sb-color-violet);--checkbox-color-border-off:var(--sb-color-violet);--checkbox-color-gfx--disabled:var(--sb-color-gray-dark);--checkbox-color-background-off--disabled:var(--sb-color-gray-light);--checkbox-color-background-on--disabled:var(--sb-color-gray-light);--checkbox-color-border-on--disabled:var(--sb-color-gray-dark);--checkbox-color-border-off--disabled:var(--sb-color-gray-dark);--checkbox-color-gfx__indeterminate--disabled:var(--sb-color-gray-dark);--checkbox-color-background--active:var(--sb-color-white);--checkbox-color-border--active:var(--sb-color-gray);--checkbox-color-gfx--hover:var(--sb-color-violet-light);--checkbox-color-background--hover:var(--sb-color-violet-light-3);--checkbox-color-border-on--hover:var(--sb-color-violet);--checkbox-color-border-off--hover:var(--sb-color-violet);--checkbox-color-gfx--focus:var(--focus-ring-color);--checkbox-color-background--focus:var(--sb-color-blue-light-3);--checkbox-color-gfx--error:var(--sb-color-magenta);--checkbox-color-gfx--error-contrast:var(--sb-color-magenta);--checkbox-color-background-on--error:var(--sb-color-white);--checkbox-color-background--error-contrast:var(
+.dnb-checkbox{--checkbox-border-width:0.0625rem;--checkbox-color-gfx-on:var(--sb-color-violet-light);--checkbox-color-gfx-off:var(--sb-color-white);--checkbox-color-background-on:var(--sb-color-white);--checkbox-color-background-off:var(--sb-color-white);--checkbox-color-border-on:var(--sb-color-violet);--checkbox-color-border-off:var(--sb-color-violet);--checkbox-border-width--disabled:0.0625rem;--checkbox-color-gfx--disabled:var(--sb-color-gray-dark);--checkbox-color-background-off--disabled:var(--sb-color-gray-light);--checkbox-color-background-on--disabled:var(--sb-color-gray-light);--checkbox-color-border-on--disabled:var(--sb-color-gray-dark);--checkbox-color-border-off--disabled:var(--sb-color-gray-dark);--checkbox-color-gfx__indeterminate--disabled:var(--sb-color-gray-dark);--checkbox-color-background--active:var(--sb-color-white);--checkbox-color-border--active:var(--sb-color-gray);--checkbox-border-width--hover:0.125rem;--checkbox-color-gfx--hover:var(--sb-color-violet-light);--checkbox-color-background--hover:var(--sb-color-violet-light-3);--checkbox-color-border-on--hover:var(--sb-color-violet);--checkbox-color-border-off--hover:var(--sb-color-violet);--checkbox-color-gfx--focus:var(--focus-ring-color);--checkbox-color-background--focus:var(--sb-color-blue-light-3);--checkbox-border-width--error:0.0625rem;--checkbox-color-gfx--error:var(--sb-color-magenta);--checkbox-color-gfx--error-contrast:var(--sb-color-magenta);--checkbox-color-background-on--error:var(--sb-color-white);--checkbox-color-background--error-contrast:var(
     --sb-color-magenta-light-2
   );--checkbox-color-border--error:var(--sb-color-magenta);--checkbox-color-gfx--error--hover:var(--sb-color-magenta);--checkbox-color-background--error--hover:var(
     --sb-color-magenta-light-3
-  );--checkbox-color-border--error--hover:transparent;--checkbox-color-background-indeterminate:var(--sb-color-white);--checkbox-color-gfx-indeterminate:var(--sb-color-violet);--checkbox-color-background-indeterminate--active:var(--color-white);--checkbox-color-border-indeterminate--active:var(--sb-color-gray);--checkbox-color-gfx-indeterminate--active:var(--sb-color-violet);--checkbox-color-gfx-indeterminate--error:var(--sb-color-magenta);--checkbox-gfx-width__indeterminate:0.875rem;--checkbox-gfx-height__indeterminate:0.125rem;--checkbox-gfx-height__indeterminate--large:0.25rem;--checkbox-gfx-width__indeterminate--large:1.5rem;--checkbox-border-radius:0.125rem;--checkbox-gfx-border-radius__indeterminate:0rem}
+  );--checkbox-color-border--error--hover:transparent;--checkbox-color-background-indeterminate:var(--sb-color-white);--checkbox-color-gfx-indeterminate:var(--sb-color-violet);--checkbox-color-background-indeterminate--active:var(--color-white);--checkbox-color-border-indeterminate--active:var(--sb-color-gray);--checkbox-color-gfx-indeterminate--active:var(--sb-color-violet);--checkbox-color-gfx-indeterminate--error:var(--sb-color-magenta);--checkbox-gfx-width__indeterminate:0.875rem;--checkbox-gfx-height__indeterminate:0.125rem;--checkbox-gfx-height__indeterminate--large:0.25rem;--checkbox-gfx-width__indeterminate--large:1.5rem;--checkbox-border-radius:0;--checkbox-gfx-border-radius__indeterminate:0rem}

package/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.scss CHANGED Viewed

@@ -4,9 +4,8 @@
 */
 .dnb-checkbox {
-  --checkbox-border-width: 0.125rem;
-  --checkbox-border-width--hover: 0.125rem;
   // Normal state
+  --checkbox-border-width: 0.0625rem;
   --checkbox-color-gfx-on: var(--sb-color-violet-light);
   --checkbox-color-gfx-off: var(--sb-color-white);
   --checkbox-color-background-on: var(--sb-color-white);
@@ -14,6 +13,7 @@
   --checkbox-color-border-on: var(--sb-color-violet);
   --checkbox-color-border-off: var(--sb-color-violet);
   // Disabled state
+  --checkbox-border-width--disabled: 0.0625rem;
   --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
   --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
   --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
@@ -24,6 +24,7 @@
   --checkbox-color-background--active: var(--sb-color-white);
   --checkbox-color-border--active: var(--sb-color-gray);
   // Hover state
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx--hover: var(--sb-color-violet-light);
   --checkbox-color-background--hover: var(--sb-color-violet-light-3);
   --checkbox-color-border-on--hover: var(--sb-color-violet);
@@ -32,6 +33,7 @@
   --checkbox-color-gfx--focus: var(--focus-ring-color);
   --checkbox-color-background--focus: var(--sb-color-blue-light-3);
   // Error state
+  --checkbox-border-width--error: 0.0625rem;
   --checkbox-color-gfx--error: var(--sb-color-magenta);
   --checkbox-color-gfx--error-contrast: var(--sb-color-magenta);
   --checkbox-color-background-on--error: var(--sb-color-white);
@@ -60,6 +62,6 @@
   --checkbox-gfx-height__indeterminate: 0.125rem;
   --checkbox-gfx-height__indeterminate--large: 0.25rem;
   --checkbox-gfx-width__indeterminate--large: 1.5rem;
-  --checkbox-border-radius: 0.125rem;
+  --checkbox-border-radius: 0;
   --checkbox-gfx-border-radius__indeterminate: 0rem;
 }

package/components/flex/Container.js CHANGED Viewed

@@ -70,9 +70,9 @@ function FlexContainer(props) {
     const endSpacing = 0;
     let startSpacing = null;
     if (!isHeading && (divider === 'line' && !isFirst || divider === 'line-framed')) {
-      var _getSpaceValue, _ref3, _getSpaceValue2;
+      var _getSpaceValue, _getSpaceValue2;
       const spaceAboveLine = (_getSpaceValue = getSpaceValue(end, previousChild)) !== null && _getSpaceValue !== void 0 ? _getSpaceValue : spacing;
-      startSpacing = (_ref3 = (_getSpaceValue2 = getSpaceValue(start, child)) !== null && _getSpaceValue2 !== void 0 ? _getSpaceValue2 : gap) !== null && _ref3 !== void 0 ? _ref3 : spacing;
+      startSpacing = (_getSpaceValue2 = getSpaceValue(start, child)) !== null && _getSpaceValue2 !== void 0 ? _getSpaceValue2 : spacing;
       return React.createElement(React.Fragment, {
         key: `element-${i}`
       }, React.createElement(Hr, {
@@ -93,8 +93,8 @@ function FlexContainer(props) {
     if (isFirst && direction !== 'horizontal') {
       startSpacing = 0;
     } else {
-      var _ref4, _ref5, _getSpaceValue3;
-      startSpacing = (_ref4 = (_ref5 = (_getSpaceValue3 = getSpaceValue(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : getSpaceValue(end, previousChild)) !== null && _ref5 !== void 0 ? _ref5 : gap) !== null && _ref4 !== void 0 ? _ref4 : spacing;
+      var _ref3, _getSpaceValue3;
+      startSpacing = (_ref3 = (_getSpaceValue3 = getSpaceValue(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : getSpaceValue(end, previousChild)) !== null && _ref3 !== void 0 ? _ref3 : spacing;
     }
     if (React.isValidElement(previousChild) && (previousChild === null || previousChild === void 0 ? void 0 : (_previousChild$type = previousChild.type) === null || _previousChild$type === void 0 ? void 0 : _previousChild$type['_supportsSpacingProps']) === false) {
       startSpacing = 0;