npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.4 - Mend

@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.4

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 (2426) hide show

package/breadcrumb/breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { parsePxOrRemValue, useApplyStyle, useDesignToken } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n links,\n fadeColor,\n fadePosition = \"both\",\n id,\n separatorStyle = \"chevron\",\n className,\n ...otherProps\n}: BreadcrumbProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFade, setShowFade] = useState<boolean>(false);\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n const shouldShowFadeLeft =\n fadePosition === \"left\" \|\| fadePosition === \"both\";\n const shouldShowFadeRight =\n fadePosition === \"right\" \|\| fadePosition === \"both\";\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLUListElement>(null);\n const fadeLeftRef = useRef<HTMLDivElement>(null);\n const fadeRightRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const tabletBreakpointToken = useDesignToken(Breakpoint[\"lg-max\"]);\n const tabletBreakpoint = parsePxOrRemValue(\n tabletBreakpointToken \|\| \"1200px\"\n );\n\n // =============================================================================\n // FADE COLOR CALCULATION\n // =============================================================================\n let fadeColorSet: FadeColorSet;\n\n if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n fadeColorSet = {\n left: fadeColor,\n right: fadeColor,\n };\n } else if (fadeColor) {\n fadeColorSet = fadeColor as FadeColorSet;\n } else {\n fadeColorSet = {\n left: undefined,\n right: undefined,\n };\n }\n\n // =============================================================================\n // CSS VARIABLES\n // =============================================================================\n useApplyStyle(fadeLeftRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n });\n\n useApplyStyle(fadeRightRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n });\n\n const onResize = useEvent(() => {\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n\n if (\n content &&\n wrapper &&\n links &&\n links.length > 1 &&\n window.innerWidth <= tabletBreakpoint\n ) {\n content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n }\n });\n\n const handleShowFadeToggle = useEvent(() => {\n const nextShowFade = window.innerWidth <= tabletBreakpoint;\n setShowFade(nextShowFade);\n\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n if (content && wrapper && nextShowFade) {\n if (content.scrollWidth > wrapper.offsetWidth) {\n // set 1px margin of error to handle sub-pixel differences\n setShowFadeLeft(content.scrollLeft >= 1);\n setShowFadeRight(\n content.scrollWidth - content.scrollLeft - 1 >\n wrapper.offsetWidth\n );\n return;\n }\n }\n\n setShowFadeLeft(false);\n setShowFadeRight(false);\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEventListener(\"resize\", handleShowFadeToggle);\n useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n useIsomorphicLayoutEffect(() => {\n onResize();\n handleShowFadeToggle();\n }, [onResize, handleShowFadeToggle]);\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n skipOnMount: true,\n });\n\n // =========================================================================\n // RENDER\n // =========================================================================\n if (!links) return null;\n\n const renderLinks = () => {\n return links.map((link, index) => {\n let element: JSX.Element;\n if (!link.children) {\n return null;\n }\n\n if (index === links.length - 1 \|\| !link.href) {\n element = (\n <Typography.BodyMD\n weight=\"semibold\"\n as=\"span\"\n className={styles.currentLabel}\n >\n {link.children}\n </Typography.BodyMD>\n );\n } else {\n element = (\n <Typography.LinkMD\n {...link}\n weight=\"semibold\"\n underlineStyle=\"none\"\n className={styles.previousLink}\n />\n );\n }\n\n return (\n <li\n key={index}\n className={styles.item}\n {...(index === links.length - 1 && {\n \"aria-current\": \"page\",\n })}\n >\n {element}\n {index < links.length - 1 &&\n (separatorStyle === \"chevron\" ? (\n <ChevronRightIcon\n aria-hidden\n className={styles.caret}\n />\n ) : (\n <Typography.BodyMD\n inline\n aria-hidden\n className={styles.slash}\n >\n /\n </Typography.BodyMD>\n ))}\n </li>\n );\n });\n };\n\n const renderFade = () => {\n return (\n <>\n {showFadeLeft && shouldShowFadeLeft && (\n <div\n ref={fadeLeftRef}\n className={clsx(styles.fade, styles.fadeLeft)}\n />\n )}\n {showFadeRight && shouldShowFadeRight && (\n <div\n ref={fadeRightRef}\n className={clsx(styles.fade, styles.fadeRight)}\n />\n )}\n </>\n );\n };\n\n return (\n <div\n ref={wrapperRef}\n id={id \|\| \"breadcrumb\"}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <nav aria-label=\"Breadcrumb\">\n <ul ref={contentRef} className={styles.content}>\n {renderLinks()}\n </ul>\n </nav>\n {showFade && renderFade()}\n </div>\n );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpointToken","useDesignToken","Breakpoint","tabletBreakpoint","parsePxOrRemValue","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}
1	+ {"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n parsePxOrRemValue,\n useApplyStyle,\n useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\nexport const Breadcrumb = ({\n links,\n fadeColor,\n fadePosition = \"both\",\n id,\n separatorStyle = \"chevron\",\n className,\n ...otherProps\n}: BreadcrumbProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showFade, setShowFade] = useState<boolean>(false);\n const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n const shouldShowFadeLeft =\n fadePosition === \"left\" \|\| fadePosition === \"both\";\n const shouldShowFadeRight =\n fadePosition === \"right\" \|\| fadePosition === \"both\";\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLUListElement>(null);\n const fadeLeftRef = useRef<HTMLDivElement>(null);\n const fadeRightRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const tabletBreakpoint = parsePxOrRemValue(\n useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n );\n\n // =============================================================================\n // FADE COLOR CALCULATION\n // =============================================================================\n let fadeColorSet: FadeColorSet;\n\n if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n fadeColorSet = {\n left: fadeColor,\n right: fadeColor,\n };\n } else if (fadeColor) {\n fadeColorSet = fadeColor as FadeColorSet;\n } else {\n fadeColorSet = {\n left: undefined,\n right: undefined,\n };\n }\n\n // =============================================================================\n // CSS VARIABLES\n // =============================================================================\n useApplyStyle(fadeLeftRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n });\n\n useApplyStyle(fadeRightRef, {\n [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n });\n\n const onResize = useEvent(() => {\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n\n if (\n content &&\n wrapper &&\n links &&\n links.length > 1 &&\n window.innerWidth <= tabletBreakpoint\n ) {\n content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n }\n });\n\n const handleShowFadeToggle = useEvent(() => {\n const nextShowFade = window.innerWidth <= tabletBreakpoint;\n setShowFade(nextShowFade);\n\n const content = contentRef.current;\n const wrapper = wrapperRef.current;\n if (content && wrapper && nextShowFade) {\n if (content.scrollWidth > wrapper.offsetWidth) {\n // set 1px margin of error to handle sub-pixel differences\n setShowFadeLeft(content.scrollLeft >= 1);\n setShowFadeRight(\n content.scrollWidth - content.scrollLeft - 1 >\n wrapper.offsetWidth\n );\n return;\n }\n }\n\n setShowFadeLeft(false);\n setShowFadeRight(false);\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEventListener(\"resize\", handleShowFadeToggle);\n useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n useIsomorphicLayoutEffect(() => {\n onResize();\n handleShowFadeToggle();\n }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n // To scroll left when wrapper resizes\n useResizeDetector({\n onResize,\n targetRef: wrapperRef,\n refreshMode: \"debounce\",\n refreshRate: 50,\n skipOnMount: true,\n });\n\n // =========================================================================\n // RENDER\n // =========================================================================\n if (!links) return null;\n\n const renderLinks = () => {\n return links.map((link, index) => {\n let element: JSX.Element;\n if (!link.children) {\n return null;\n }\n\n if (index === links.length - 1 \|\| !link.href) {\n element = (\n <Typography.BodyMD\n weight=\"semibold\"\n as=\"span\"\n className={styles.currentLabel}\n >\n {link.children}\n </Typography.BodyMD>\n );\n } else {\n element = (\n <Typography.LinkMD\n {...link}\n weight=\"semibold\"\n underlineStyle=\"none\"\n className={styles.previousLink}\n />\n );\n }\n\n return (\n <li\n key={index}\n className={styles.item}\n {...(index === links.length - 1 && {\n \"aria-current\": \"page\",\n })}\n >\n {element}\n {index < links.length - 1 &&\n (separatorStyle === \"chevron\" ? (\n <ChevronRightIcon\n aria-hidden\n className={styles.caret}\n />\n ) : (\n <Typography.BodyMD\n inline\n aria-hidden\n className={styles.slash}\n >\n /\n </Typography.BodyMD>\n ))}\n </li>\n );\n });\n };\n\n const renderFade = () => {\n return (\n <>\n {showFadeLeft && shouldShowFadeLeft && (\n <div\n ref={fadeLeftRef}\n className={clsx(styles.fade, styles.fadeLeft)}\n />\n )}\n {showFadeRight && shouldShowFadeRight && (\n <div\n ref={fadeRightRef}\n className={clsx(styles.fade, styles.fadeRight)}\n />\n )}\n </>\n );\n };\n\n return (\n <div\n ref={wrapperRef}\n id={id \|\| \"breadcrumb\"}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <nav aria-label=\"Breadcrumb\">\n <ul ref={contentRef} className={styles.content}>\n {renderLinks()}\n </ul>\n </nav>\n {showFade && renderFade()}\n </div>\n );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}

package/button/button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as n}from"react/jsx-runtime";import i from"clsx";import s from"react";import{ComponentLoadingSpinner as l}from"../shared/component-loading-spinner/component-loading-spinner.js";import{main as o,mainIconPositionRight as t,mainHasMinWidth as r,spinnerHasChildren as d,mainStyleLinkDanger as c,mainStyleLink as b,mainStyleLightDanger as u,mainStyleLight as m,mainStyleSecondaryDanger as f,mainStyleSecondary as p,mainStyleDefaultDanger as g,mainStyleDefault as y,mainStyleDisabled as v,mainSizeLargeIconOnly as h,mainSizeLarge as j,mainSizeSmallIconOnly as O,mainSizeSmall as N,mainSizeDefaultIconOnly as T,mainSizeDefault as z}from"./button.styles.js";import{hasValidChildren as k}from"./button-helper.js";const w={disabled:{base:v,danger:v},default:{base:y,danger:g},secondary:{base:p,danger:f},light:{base:m,danger:u},link:{base:b,danger:c}},B={default:{base:z,iconOnly:T},small:{base:N,iconOnly:O},large:{base:j,iconOnly:h}},D=(e,a)=>{var n,i;return a?null===(n=w[e])||void 0===n?void 0:n.danger:null===(i=w[e])||void 0===i?void 0:i.base},R=(e,a)=>{var n,s,l;return a?i(null===(n=B[e])||void 0===n?void 0:n.base,null===(s=B[e])||void 0===s?void 0:s.iconOnly):null===(l=B[e])||void 0===l?void 0:l.base},x=(c,b)=>{const{children:u,className:m,disabled:f=!1,loading:p=!1,styleType:g="default",sizeType:y="default",danger:v=!1,focusableWhenDisabled:h=!1,icon:j,iconPosition:O="left",onClick:N}=c,T=e(c,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),z=k(u),w=!!j&&!z,B=f?"disabled":g;return a("button",Object.assign({ref:b,"data-testid":T["data-testid"]||"button",disabled:f&&!h,"aria-disabled":f,"aria-busy":p,onClick:f?void 0:N,className:i(o,j&&"right"===O&&t,!w&&r,D(B,v),R(y,w),m)},T,{children:[p?n(l,{className:i(z&&d)}):j?s.cloneElement(j,{"aria-hidden":!0}):null,z&&n("span",{children:u})]}))};x.displayName="Button";const C=s.forwardRef(x),L=(e,a)=>{var i;return n(C,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:a}))};L.displayName="Button.Default";const P=(e,a)=>n(C,Object.assign({},e,{sizeType:"small",ref:a}));P.displayName="Button.Small";const S=(e,a)=>n(C,Object.assign({},e,{sizeType:"large",ref:a}));S.displayName="Button.Large";const W=Object.assign(C,{Default:s.forwardRef(L),Small:s.forwardRef(P),Large:s.forwardRef(S)});export{W as Button};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as n}from"react/jsx-runtime";import i from"clsx";import s from"react";import{ComponentLoadingSpinner as l}from"../shared/component-loading-spinner/component-loading-spinner.js";import{main as o,mainIconPositionRight as t,mainHasMinWidth as r,spinner as d,spinnerHasChildren as c,mainStyleLinkDanger as b,mainStyleLink as u,mainStyleLightDanger as m,mainStyleLight as f,mainStyleSecondaryDanger as p,mainStyleSecondary as g,mainStyleDefaultDanger as y,mainStyleDefault as v,mainStyleDisabled as h,mainSizeLargeIconOnly as j,mainSizeLarge as O,mainSizeSmallIconOnly as N,mainSizeSmall as T,mainSizeDefaultIconOnly as z,mainSizeDefault as k}from"./button.styles.js";import{hasValidChildren as w}from"./button-helper.js";const B={disabled:{base:h,danger:h},default:{base:v,danger:y},secondary:{base:g,danger:p},light:{base:f,danger:m},link:{base:u,danger:b}},D={default:{base:k,iconOnly:z},small:{base:T,iconOnly:N},large:{base:O,iconOnly:j}},R=(e,a)=>{var n,i;return a?null===(n=B[e])||void 0===n?void 0:n.danger:null===(i=B[e])||void 0===i?void 0:i.base},x=(e,a)=>{var n,s,l;return a?i(null===(n=D[e])||void 0===n?void 0:n.base,null===(s=D[e])||void 0===s?void 0:s.iconOnly):null===(l=D[e])||void 0===l?void 0:l.base},C=(b,u)=>{const{children:m,className:f,disabled:p=!1,loading:g=!1,styleType:y="default",sizeType:v="default",danger:h=!1,focusableWhenDisabled:j=!1,icon:O,iconPosition:N="left",onClick:T}=b,z=e(b,["children","className","disabled","loading","styleType","sizeType","danger","focusableWhenDisabled","icon","iconPosition","onClick"]),k=w(m),B=!!O&&!k,D=p?"disabled":y;return a("button",Object.assign({ref:u,"data-testid":z["data-testid"]||"button",disabled:p&&!j,"aria-disabled":p,"aria-busy":g,onClick:p?void 0:T,className:i(o,O&&"right"===N&&t,!B&&r,R(D,h),x(v,B),f)},z,{children:[g?n(l,{className:i(d,k&&c)}):O?s.cloneElement(O,{"aria-hidden":!0}):null,k&&n("span",{children:m})]}))};C.displayName="Button";const L=s.forwardRef(C),P=(e,a)=>{var i;return n(L,Object.assign({},e,{sizeType:null!==(i=e.sizeType)&&void 0!==i?i:"default",ref:a}))};P.displayName="Button.Default";const S=(e,a)=>n(L,Object.assign({},e,{sizeType:"small",ref:a}));S.displayName="Button.Small";const W=(e,a)=>n(L,Object.assign({},e,{sizeType:"large",ref:a}));W.displayName="Button.Large";const _=Object.assign(L,{Default:s.forwardRef(P),Small:s.forwardRef(S),Large:s.forwardRef(W)});export{_ as Button};
 //# sourceMappingURL=button.js.map

package/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n disabled: {\n base: styles.mainStyleDisabled,\n danger: styles.mainStyleDisabled,\n },\n default: {\n base: styles.mainStyleDefault,\n danger: styles.mainStyleDefaultDanger,\n },\n secondary: {\n base: styles.mainStyleSecondary,\n danger: styles.mainStyleSecondaryDanger,\n },\n light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n default: {\n base: styles.mainSizeDefault,\n iconOnly: styles.mainSizeDefaultIconOnly,\n },\n small: {\n base: styles.mainSizeSmall,\n iconOnly: styles.mainSizeSmallIconOnly,\n },\n large: {\n base: styles.mainSizeLarge,\n iconOnly: styles.mainSizeLargeIconOnly,\n },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n danger\n ? styleClassMap[effectiveStyle]?.danger\n : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n iconOnly\n ? clsx(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\n : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n const {\n children,\n className,\n disabled = false,\n loading = false,\n styleType = \"default\",\n sizeType = \"default\",\n danger = false,\n focusableWhenDisabled = false,\n icon,\n iconPosition = \"left\",\n onClick,\n ...otherProps\n } = props;\n\n const hasChildren = hasValidChildren(children);\n const iconOnly = !!icon && !hasChildren;\n const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n return (\n <button\n ref={ref}\n data-testid={otherProps[\"data-testid\"] \|\| \"button\"}\n disabled={disabled && !focusableWhenDisabled}\n aria-disabled={disabled}\n aria-busy={loading}\n onClick={disabled ? undefined : onClick}\n className={clsx(\n styles.main,\n icon &&\n iconPosition === \"right\" &&\n styles.mainIconPositionRight,\n !iconOnly && styles.mainHasMinWidth,\n getStyleClass(effectiveStyle, danger),\n getSizeClass(sizeType, iconOnly),\n className\n )}\n {...otherProps}\n >\n {loading ? (\n <ComponentLoadingSpinner\n className={clsx(hasChildren && styles.spinnerHasChildren)}\n />\n ) : icon ? (\n React.cloneElement(icon, { \"aria-hidden\": true })\n ) : null}\n {hasChildren && <span>{children}</span>}\n </button>\n );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\nexport const Button = Object.assign(BaseButton, {\n /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` /\n Default: React.forwardRef(DefaultButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` /\n Small: React.forwardRef(SmallButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"~~owBAQA~~,MAAMA,EAAwD,CAC1DC,SAAU,CACNC,KAAMC,EACNC,OAAQD,GAEZE,QAAS,CACLH,KAAMI,EACNF,OAAQG,GAEZC,UAAW,CACPN,KAAMO,EACNL,OAAQM,GAEZC,MAAO,CAAET,KAAMU,EAAuBR,OAAQS,GAC9CC,KAAM,CAAEZ,KAAMa,EAAsBX,OAAQY,IAG1CC,EAAmE,CACrEZ,QAAS,CACLH,KAAMgB,EACNC,SAAUC,GAEdC,MAAO,CACHnB,KAAMoB,EACNH,SAAUI,GAEdC,MAAO,CACHtB,KAAMuB,EACNN,SAAUO,IAIZC,EAAgB,CAACC,EAAwBxB,aAC3C,OAAAA,UACMyB,EAAA7B,EAAc4B,yBAAiBxB,OACF,UAA7BJ,EAAc4B,UAAe,IAAAE,OAAA,EAAAA,EAAE5B,IAAI,EAEvC6B,EAAe,CAACC,EAAkBb,eACpC,OAAAA,EACMc,EAA2B,UAAtBhB,EAAae,UAAS,IAAAH,OAAA,EAAAA,EAAE3B,KAA4B,UAAtBe,EAAae,UAAS,IAAAF,OAAA,EAAAA,EAAEX,UACrC,UAAtBF,EAAae,UAAS,IAAAE,OAAA,EAAAA,EAAEhC,IAAI,EAEhCiC,EAAY,CAACC,EAAoBC,KACnC,MAAMC,SACFA,EAAQC,UACRA,EAAStC,SACTA,GAAW,EAAKuC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAAST,SACrBA,EAAW,UAAS5B,OACpBA,GAAS,EAAKsC,sBACdA,GAAwB,EAAKC,KAC7BA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAEAT,EADGU,IACHV,EAbE,CAAA,WAAA,YAAA,WAAA,UAAA,YAAA,WAAA,SAAA,wBAAA,OAAA,eAAA,YAeAW,EAAcC,EAAiBV,GAC/BnB,IAAawB,IAASI,EACtBnB,EAAiB3B,EAAW,WAAawC,EAE/C,OACIQ,0BACIZ,IAAKA,EAAG,cACKS,EAAW,gBAAkB,SAC1C7C,SAAUA,IAAayC,kBACRzC,EAAQ,YACZuC,EACXK,QAAS5C,OAAWiD,EAAYL,EAChCN,UAAWN,EACPkB,EACAR,GACqB,UAAjBC,GACAQ,GACHjC,GAAYkC,EACb1B,EAAcC,EAAgBxB,GAC9B2B,EAAaC,EAAUb,GACvBoB,IAEAO,~~EAAU~~,~~CAAAR,SAAA,CAEbE,~~EACGc,EAACC,EAAuB,CACpBhB,UAAWN,~~EAAKc~~,~~GAAeS~~,~~KAEnCb~~,~~EACAc~~,EAAMC,~~aAAaf~~,EAAM,CAAE,eAAe,IAC1C,KACHI,GAAeO,EAAA,OAAA,CAAAhB,SAAOA,OAClB,EAIjBH,~~EAAUwB~~,YAAc,SAExB,MAAMC,EAAaH,EAAMI,~~WAAW1B~~,~~GAE9B2B~~,EAAyB,~~CAAC1B~~,EAAoBC,WAAmB,OACnEiB,~~EAACM~~,EAAUG,OAAAC,OAAA,CAAA,~~EAAK5B~~,EAAK,CAAEJ,SAAwB,QAAdH,EAAAO,EAAMJ,gBAAQ,IAAAH,EAAAA,EAAI,UAAWQ,IAAKA,IAAO,~~EAE9EyB~~,EAAuBH,YAAc,iBAErC,MAAMM,EAAuB,~~CAAC7B~~,EAAoBC,IAC9CiB,~~EAACM~~,~~mBAAexB~~,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,~~KAEjD4B~~,EAAqBN,YAAc,eAEnC,MAAMO,EAAuB,~~CAAC9B~~,EAAoBC,IAC9CiB,~~EAACM~~,~~mBAAexB~~,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,~~KAEjD6B~~,EAAqBP,YAAc,qBAEtBQ,EAASJ,OAAOC,OAAOJ,EAAY,CAE5CQ,QAASX,EAAMI,WAAWC,GAE1BO,MAAOZ,EAAMI,WAAWI,GAExBK,MAAOb,EAAMI,WAAWK"}
1	+ {"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport * as styles from \"./button.styles\";\nimport { hasValidChildren } from \"./button-helper\";\nimport type { ButtonProps, ButtonRef } from \"./types\";\n\nconst styleClassMap: Record<string, Record<string, string>> = {\n disabled: {\n base: styles.mainStyleDisabled,\n danger: styles.mainStyleDisabled,\n },\n default: {\n base: styles.mainStyleDefault,\n danger: styles.mainStyleDefaultDanger,\n },\n secondary: {\n base: styles.mainStyleSecondary,\n danger: styles.mainStyleSecondaryDanger,\n },\n light: { base: styles.mainStyleLight, danger: styles.mainStyleLightDanger },\n link: { base: styles.mainStyleLink, danger: styles.mainStyleLinkDanger },\n};\n\nconst sizeClassMap: Record<string, { base: string; iconOnly: string }> = {\n default: {\n base: styles.mainSizeDefault,\n iconOnly: styles.mainSizeDefaultIconOnly,\n },\n small: {\n base: styles.mainSizeSmall,\n iconOnly: styles.mainSizeSmallIconOnly,\n },\n large: {\n base: styles.mainSizeLarge,\n iconOnly: styles.mainSizeLargeIconOnly,\n },\n};\n\nconst getStyleClass = (effectiveStyle: string, danger: boolean) =>\n danger\n ? styleClassMap[effectiveStyle]?.danger\n : styleClassMap[effectiveStyle]?.base;\n\nconst getSizeClass = (sizeType: string, iconOnly: boolean) =>\n iconOnly\n ? clsx(sizeClassMap[sizeType]?.base, sizeClassMap[sizeType]?.iconOnly)\n : sizeClassMap[sizeType]?.base;\n\nconst Component = (props: ButtonProps, ref: ButtonRef) => {\n const {\n children,\n className,\n disabled = false,\n loading = false,\n styleType = \"default\",\n sizeType = \"default\",\n danger = false,\n focusableWhenDisabled = false,\n icon,\n iconPosition = \"left\",\n onClick,\n ...otherProps\n } = props;\n\n const hasChildren = hasValidChildren(children);\n const iconOnly = !!icon && !hasChildren;\n const effectiveStyle = disabled ? \"disabled\" : styleType;\n\n return (\n <button\n ref={ref}\n data-testid={otherProps[\"data-testid\"] \|\| \"button\"}\n disabled={disabled && !focusableWhenDisabled}\n aria-disabled={disabled}\n aria-busy={loading}\n onClick={disabled ? undefined : onClick}\n className={clsx(\n styles.main,\n icon &&\n iconPosition === \"right\" &&\n styles.mainIconPositionRight,\n !iconOnly && styles.mainHasMinWidth,\n getStyleClass(effectiveStyle, danger),\n getSizeClass(sizeType, iconOnly),\n className\n )}\n {...otherProps}\n >\n {loading ? (\n <ComponentLoadingSpinner\n className={clsx(\n styles.spinner,\n hasChildren && styles.spinnerHasChildren\n )}\n />\n ) : icon ? (\n React.cloneElement(icon, { \"aria-hidden\": true })\n ) : null}\n {hasChildren && <span>{children}</span>}\n </button>\n );\n};\n\nComponent.displayName = \"Button\";\n\nconst BaseButton = React.forwardRef(Component);\n\nconst DefaultButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType={props.sizeType ?? \"default\"} ref={ref} />\n);\nDefaultButtonComponent.displayName = \"Button.Default\";\n\nconst SmallButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"small\" ref={ref} />\n);\nSmallButtonComponent.displayName = \"Button.Small\";\n\nconst LargeButtonComponent = (props: ButtonProps, ref: ButtonRef) => (\n <BaseButton {...props} sizeType=\"large\" ref={ref} />\n);\nLargeButtonComponent.displayName = \"Button.Large\";\n\nexport const Button = Object.assign(BaseButton, {\n /** @deprecated Use the `sizeType` prop instead: `<Button>` or `<Button sizeType=\"default\">` /\n Default: React.forwardRef(DefaultButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"small\">` /\n Small: React.forwardRef(SmallButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<Button sizeType=\"large\">` */\n Large: React.forwardRef(LargeButtonComponent),\n});\n"],"names":["styleClassMap","disabled","base","styles.mainStyleDisabled","danger","default","styles.mainStyleDefault","styles.mainStyleDefaultDanger","secondary","styles.mainStyleSecondary","styles.mainStyleSecondaryDanger","light","styles.mainStyleLight","styles.mainStyleLightDanger","link","styles.mainStyleLink","styles.mainStyleLinkDanger","sizeClassMap","styles.mainSizeDefault","iconOnly","styles.mainSizeDefaultIconOnly","small","styles.mainSizeSmall","styles.mainSizeSmallIconOnly","large","styles.mainSizeLarge","styles.mainSizeLargeIconOnly","getStyleClass","effectiveStyle","_a","_b","getSizeClass","sizeType","clsx","_c","Component","props","ref","children","className","loading","styleType","focusableWhenDisabled","icon","iconPosition","onClick","otherProps","hasChildren","hasValidChildren","_jsxs","undefined","styles.main","styles.mainIconPositionRight","styles.mainHasMinWidth","_jsx","ComponentLoadingSpinner","styles.spinner","styles.spinnerHasChildren","React","cloneElement","displayName","BaseButton","forwardRef","DefaultButtonComponent","Object","assign","SmallButtonComponent","LargeButtonComponent","Button","Default","Small","Large"],"mappings":"ixBAQA,MAAMA,EAAwD,CAC1DC,SAAU,CACNC,KAAMC,EACNC,OAAQD,GAEZE,QAAS,CACLH,KAAMI,EACNF,OAAQG,GAEZC,UAAW,CACPN,KAAMO,EACNL,OAAQM,GAEZC,MAAO,CAAET,KAAMU,EAAuBR,OAAQS,GAC9CC,KAAM,CAAEZ,KAAMa,EAAsBX,OAAQY,IAG1CC,EAAmE,CACrEZ,QAAS,CACLH,KAAMgB,EACNC,SAAUC,GAEdC,MAAO,CACHnB,KAAMoB,EACNH,SAAUI,GAEdC,MAAO,CACHtB,KAAMuB,EACNN,SAAUO,IAIZC,EAAgB,CAACC,EAAwBxB,aAC3C,OAAAA,UACMyB,EAAA7B,EAAc4B,yBAAiBxB,OACF,UAA7BJ,EAAc4B,UAAe,IAAAE,OAAA,EAAAA,EAAE5B,IAAI,EAEvC6B,EAAe,CAACC,EAAkBb,eACpC,OAAAA,EACMc,EAA2B,UAAtBhB,EAAae,UAAS,IAAAH,OAAA,EAAAA,EAAE3B,KAA4B,UAAtBe,EAAae,UAAS,IAAAF,OAAA,EAAAA,EAAEX,UACrC,UAAtBF,EAAae,UAAS,IAAAE,OAAA,EAAAA,EAAEhC,IAAI,EAEhCiC,EAAY,CAACC,EAAoBC,KACnC,MAAMC,SACFA,EAAQC,UACRA,EAAStC,SACTA,GAAW,EAAKuC,QAChBA,GAAU,EAAKC,UACfA,EAAY,UAAST,SACrBA,EAAW,UAAS5B,OACpBA,GAAS,EAAKsC,sBACdA,GAAwB,EAAKC,KAC7BA,EAAIC,aACJA,EAAe,OAAMC,QACrBA,GAEAT,EADGU,IACHV,EAbE,CAAA,WAAA,YAAA,WAAA,UAAA,YAAA,WAAA,SAAA,wBAAA,OAAA,eAAA,YAeAW,EAAcC,EAAiBV,GAC/BnB,IAAawB,IAASI,EACtBnB,EAAiB3B,EAAW,WAAawC,EAE/C,OACIQ,0BACIZ,IAAKA,EAAG,cACKS,EAAW,gBAAkB,SAC1C7C,SAAUA,IAAayC,kBACRzC,EAAQ,YACZuC,EACXK,QAAS5C,OAAWiD,EAAYL,EAChCN,UAAWN,EACPkB,EACAR,GACqB,UAAjBC,GACAQ,GACHjC,GAAYkC,EACb1B,EAAcC,EAAgBxB,GAC9B2B,EAAaC,EAAUb,GACvBoB,IAEAO,aAEHN,EACGc,EAACC,EAAuB,CACpBhB,UAAWN,EACPuB,EACAT,GAAeU,KAGvBd,EACAe,EAAMC,aAAahB,EAAM,CAAE,eAAe,IAC1C,KACHI,GAAeO,EAAA,OAAA,CAAAhB,SAAOA,OAClB,EAIjBH,EAAUyB,YAAc,SAExB,MAAMC,EAAaH,EAAMI,WAAW3B,GAE9B4B,EAAyB,CAAC3B,EAAoBC,WAAmB,OACnEiB,EAACO,EAAUG,OAAAC,OAAA,CAAA,EAAK7B,EAAK,CAAEJ,SAAwB,QAAdH,EAAAO,EAAMJ,gBAAQ,IAAAH,EAAAA,EAAI,UAAWQ,IAAKA,IAAO,EAE9E0B,EAAuBH,YAAc,iBAErC,MAAMM,EAAuB,CAAC9B,EAAoBC,IAC9CiB,EAACO,mBAAezB,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,KAEjD6B,EAAqBN,YAAc,eAEnC,MAAMO,EAAuB,CAAC/B,EAAoBC,IAC9CiB,EAACO,mBAAezB,EAAK,CAAEJ,SAAS,QAAQK,IAAKA,KAEjD8B,EAAqBP,YAAc,qBAEtBQ,EAASJ,OAAOC,OAAOJ,EAAY,CAE5CQ,QAASX,EAAMI,WAAWC,GAE1BO,MAAOZ,EAAMI,WAAWI,GAExBK,MAAOb,EAAMI,WAAWK"}

package/button/button.styles.d.ts CHANGED Viewed

@@ -16,4 +16,5 @@ export declare const mainSizeSmall: import("@linaria/core").LinariaClassName;
 export declare const mainSizeSmallIconOnly: import("@linaria/core").LinariaClassName;
 export declare const mainSizeLarge: import("@linaria/core").LinariaClassName;
 export declare const mainSizeLargeIconOnly: import("@linaria/core").LinariaClassName;
+export declare const spinner: import("@linaria/core").LinariaClassName;
 export declare const spinnerHasChildren: import("@linaria/core").LinariaClassName;

package/button/button.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./button.styles_142m6cx.css";const m="mf6do54",t="moaxzdy",n="m1en642a",o="m1jxbf2q",s="mharb8i",c="mbs4ndg",a="m1taerhv",b="m8hnmz5",e="m53fwwa",x="m1557ko0",r="m70z5yw",y="mc532iy",f="m1knftbn",h="m18n5exw",i="m3n7mqo",w="m1ytkx3r",_="m1c1mlhm",d="me78sau",k="s17i3scc";export{m as main,n as mainHasMinWidth,t as mainIconPositionRight,f as mainSizeDefault,h as mainSizeDefaultIconOnly,_ as mainSizeLarge,d as mainSizeLargeIconOnly,i as mainSizeSmall,w as mainSizeSmallIconOnly,o as mainStyleDefault,s as mainStyleDefaultDanger,y as mainStyleDisabled,b as mainStyleLight,e as mainStyleLightDanger,x as mainStyleLink,r as mainStyleLinkDanger,c as mainStyleSecondary,a as mainStyleSecondaryDanger,k as spinnerHasChildren};
+import"./button.styles_1pxy0co.css";const m="mf6do54",n="moaxzdy",o="m1en642a",t="m1jxbf2q",s="mharb8i",c="mbs4ndg",a="m1taerhv",b="m8hnmz5",e="m53fwwa",x="m1557ko0",y="m70z5yw",r="mc532iy",f="m1knftbn",h="m18n5exw",i="m3n7mqo",k="m1ytkx3r",w="m1c1mlhm",z="me78sau",_="s17i3scc",d="s1joklnz";export{m as main,o as mainHasMinWidth,n as mainIconPositionRight,f as mainSizeDefault,h as mainSizeDefaultIconOnly,w as mainSizeLarge,z as mainSizeLargeIconOnly,i as mainSizeSmall,k as mainSizeSmallIconOnly,t as mainStyleDefault,s as mainStyleDefaultDanger,r as mainStyleDisabled,b as mainStyleLight,e as mainStyleLightDanger,x as mainStyleLink,y as mainStyleLinkDanger,c as mainStyleSecondary,a as mainStyleSecondaryDanger,_ as spinner,d as spinnerHasChildren};
 //# sourceMappingURL=button.styles.js.map

package/button/button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.styles.js","sources":["../../src/button/button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\nexport const main = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n gap: 0.5rem;\n border-radius: ${Radius.sm};\n\n svg,\n img {\n flex-shrink: 0;\n height: 1em;\n width: 1em;\n }\n`;\n\nexport const mainIconPositionRight = css`\n flex-direction: row-reverse;\n`;\n\nexport const mainHasMinWidth = css`\n min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n background-color: ${Colour[\"bg-primary\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-primary-hover\"]};\n }\n }\n`;\n\nexport const mainStyleDefaultDanger = css`\n background-color: ${Colour[\"bg-error-strong\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-error-strong-hover\"]};\n }\n }\n`;\n\nexport const mainStyleSecondary = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-primary\"]};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-error-strong\"]};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLight = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLightDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLink = css`\n background-color: transparent;\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLinkDanger = css`\n background-color: transparent;\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleDisabled = css`\n background-color: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n color: ${Colour[\"text-disabled\"]};\n &:hover {\n box-shadow: none;\n }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n height: 3rem;\n ${Font[\"heading-xs-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n height: 3rem;\n width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n height: 2.5rem;\n ${Font[\"body-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n height: 2.5rem;\n width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n height: 4rem;\n ${Font[\"heading-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n height: 4rem;\n width: 4rem;\n`;\n\nexport const spinnerHasChildren = css`\n margin-right: 0.5rem;\n`;\n"],"names":["main","mainIconPositionRight","mainHasMinWidth","mainStyleDefault","mainStyleDefaultDanger","mainStyleSecondary","mainStyleSecondaryDanger","mainStyleLight","mainStyleLightDanger","mainStyleLink","mainStyleLinkDanger","mainStyleDisabled","mainSizeDefault","mainSizeDefaultIconOnly","mainSizeSmall","mainSizeSmallIconOnly","mainSizeLarge","mainSizeLargeIconOnly","spinnerHasChildren"],"mappings":"0DAYO,MAAMA,EAAI,UAmBJC,EAAqB,UAIrBC,EAAe,WAOfC,EAAgB,WAWhBC,EAAsB,UAWtBC,EAAkB,UAYlBC,EAAwB,WAYxBC,EAAc,UAYdC,EAAoB,UAYpBC,EAAa,WAWbC,EAAmB,UAWnBC,EAAiB,UAYjBC,EAAe,WAQfC,EAAuB,WAKvBC,EAAa,UAQbC,EAAqB,WAKrBC,EAAa,WAQbC,EAAqB,UAKrBC,EAAkB"}
1	+ {"version":3,"file":"button.styles.js","sources":["../../src/button/button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\nexport const main = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} transparent;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n gap: 0.5rem;\n border-radius: ${Radius.sm};\n\n svg,\n img {\n flex-shrink: 0;\n height: 1em;\n width: 1em;\n }\n`;\n\nexport const mainIconPositionRight = css`\n flex-direction: row-reverse;\n`;\n\nexport const mainHasMinWidth = css`\n min-width: 4rem;\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON STYLE + TEXT COLOR\n// -------------------------------------------------------------------------\nexport const mainStyleDefault = css`\n background-color: ${Colour[\"bg-primary\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-primary-hover\"]};\n }\n }\n`;\n\nexport const mainStyleDefaultDanger = css`\n background-color: ${Colour[\"bg-error-strong\"]};\n color: ${Colour[\"text-inverse\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-error-strong-hover\"]};\n }\n }\n`;\n\nexport const mainStyleSecondary = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-primary\"]};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleSecondaryDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour[\"border-error-strong\"]};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLight = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLightDanger = css`\n background-color: ${Colour.bg};\n border-color: ${Colour.border};\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLink = css`\n background-color: transparent;\n color: ${Colour[\"text-primary\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleLinkDanger = css`\n background-color: transparent;\n color: ${Colour[\"text-error\"]};\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: ${Colour[\"bg-hover-neutral\"]};\n }\n }\n`;\n\nexport const mainStyleDisabled = css`\n background-color: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n color: ${Colour[\"text-disabled\"]};\n &:hover {\n box-shadow: none;\n }\n`;\n\n// -------------------------------------------------------------------------\n// BUTTON SIZE\n// -------------------------------------------------------------------------\nexport const mainSizeDefault = css`\n height: 3rem;\n ${Font[\"heading-xs-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeDefaultIconOnly = css`\n height: 3rem;\n width: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n height: 2.5rem;\n ${Font[\"body-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeSmallIconOnly = css`\n height: 2.5rem;\n width: 2.5rem;\n`;\n\nexport const mainSizeLarge = css`\n height: 4rem;\n ${Font[\"heading-md-semibold\"]}\n ${MediaQuery.MaxWidth.xxs} {\n height: auto;\n }\n`;\n\nexport const mainSizeLargeIconOnly = css`\n height: 4rem;\n width: 4rem;\n`;\n\nexport const spinner = css`\n flex-shrink: 0;\n`;\n\nexport const spinnerHasChildren = css`\n margin-right: 0.5rem;\n`;\n"],"names":["main","mainIconPositionRight","mainHasMinWidth","mainStyleDefault","mainStyleDefaultDanger","mainStyleSecondary","mainStyleSecondaryDanger","mainStyleLight","mainStyleLightDanger","mainStyleLink","mainStyleLinkDanger","mainStyleDisabled","mainSizeDefault","mainSizeDefaultIconOnly","mainSizeSmall","mainSizeSmallIconOnly","mainSizeLarge","mainSizeLargeIconOnly","spinner","spinnerHasChildren"],"mappings":"0DAYO,MAAMA,EAAI,UAmBJC,EAAqB,UAIrBC,EAAe,WAOfC,EAAgB,WAWhBC,EAAsB,UAWtBC,EAAkB,UAYlBC,EAAwB,WAYxBC,EAAc,UAYdC,EAAoB,UAYpBC,EAAa,WAWbC,EAAmB,UAWnBC,EAAiB,UAYjBC,EAAe,WAQfC,EAAuB,WAKvBC,EAAa,UAQbC,EAAqB,WAKrBC,EAAa,WAQbC,EAAqB,UAKrBC,EAAO,WAIPC,EAAkB"}

package/button/button.styles_1pxy0co.css ADDED Viewed

@@ -0,0 +1,20 @@
+.mf6do54{border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);gap:0.5rem;border-radius:var(--fds-radius-sm);}.mf6do54 svg,.mf6do54 img{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1em;width:1em;}
+.moaxzdy{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.m1en642a{min-width:4rem;}
+.m1jxbf2q{background-color:var(--fds-colour-bg-primary);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.m1jxbf2q:hover,.m1jxbf2q:active{background-color:var(--fds-colour-bg-primary-hover);}}
+.mharb8i{background-color:var(--fds-colour-bg-error-strong);color:var(--fds-colour-text-inverse);}@media (pointer: fine){.mharb8i:hover,.mharb8i:active{background-color:var(--fds-colour-bg-error-strong-hover);}}
+.mbs4ndg{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border-primary);color:var(--fds-colour-text-primary);}@media (pointer: fine){.mbs4ndg:hover,.mbs4ndg:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1taerhv{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border-error-strong);color:var(--fds-colour-text-error);}@media (pointer: fine){.m1taerhv:hover,.m1taerhv:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m8hnmz5{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text-primary);}@media (pointer: fine){.m8hnmz5:hover,.m8hnmz5:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m53fwwa{background-color:var(--fds-colour-bg);border-color:var(--fds-colour-border);color:var(--fds-colour-text-error);}@media (pointer: fine){.m53fwwa:hover,.m53fwwa:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m1557ko0{background-color:transparent;color:var(--fds-colour-text-primary);}@media (pointer: fine){.m1557ko0:hover,.m1557ko0:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.m70z5yw{background-color:transparent;color:var(--fds-colour-text-error);}@media (pointer: fine){.m70z5yw:hover,.m70z5yw:active{background-color:var(--fds-colour-bg-hover-neutral);}}
+.mc532iy{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;color:var(--fds-colour-text-disabled);}.mc532iy:hover{box-shadow:none;}
+.m1knftbn{height:3rem;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}:where(body.fds-breakpoint-xxs-max) .m1knftbn{height:auto;}
+.m18n5exw{height:3rem;width:3rem;}
+.m3n7mqo{height:2.5rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}:where(body.fds-breakpoint-xxs-max) .m3n7mqo{height:auto;}
+.m1ytkx3r{height:2.5rem;width:2.5rem;}
+.m1c1mlhm{height:4rem;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}:where(body.fds-breakpoint-xxs-max) .m1c1mlhm{height:auto;}
+.me78sau{height:4rem;width:4rem;}
+.s17i3scc{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.s1joklnz{margin-right:0.5rem;}

package/calendar/calendar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import e from"clsx";import{useState as l,useEffect as t}from"react";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as i}from"../shared/internal-calendar/internal-calendar.js";import{wrapper as n,wrapperBordered as o}from"./calendar.styles.js";const r=r=>{const{className:d,styleType:s="bordered",variant:c,id:v,minDate:m,maxDate:h,disabledDates:u,allowDisabledSelection:D,showActiveMonthDaysOnly:b,onHover:p,onYearMonthDisplayChange:y,"data-testid":S}=r,x="multi"===r.variant,C=x?void 0:r.value,f=x?r.values:void 0,g=x?r.minSelectable:void 0,w=x?r.maxSelectable:void 0,[j,M]=l((()=>void 0!==f?f:void 0!==C?[C]:[]));t((()=>{M(void 0===f?void 0===C?[]:[C]:f)}),[C,f]);return a("div",{className:e(n,"bordered"===s&&o,d),id:v,"data-testid":S,children:a(i,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:c,minDate:m,maxDate:h,disabledDates:u,allowDisabledSelection:D,showActiveMonthDaysOnly:b,onHover:p,onYearMonthDisplayChange:y,onSelect:a=>{var e,l;M([a]),"multi"!==r.variant&&(null===(e=r.onChange)||void 0===e||e.call(r,a),null===(l=r.onSelect)||void 0===l||l.call(r,a))},onChange:a=>{var e;M(a),"multi"===r.variant&&(null===(e=r.onChange)||void 0===e||e.call(r,a))},minSelectable:g,maxSelectable:w})})};export{r as Calendar};
+import{jsx as a}from"react/jsx-runtime";import e from"clsx";import{useState as l,useEffect as i}from"react";import"../shared/internal-calendar/calendar-dropdown.js";import{InternalCalendar as n}from"../shared/internal-calendar/internal-calendar.js";import{wrapper as t,wrapperBordered as o}from"./calendar.styles.js";const r=r=>{const{className:d,styleType:s="bordered",variant:c="single",id:v,minDate:m,maxDate:h,disabledDates:u,allowDisabledSelection:D,showActiveMonthDaysOnly:b,onHover:p,onYearMonthDisplayChange:y,"data-testid":S}=r,x="multi"===r.variant,g=x?void 0:r.value,C=x?r.values:void 0,f=x?r.minSelectable:void 0,w=x?r.maxSelectable:void 0,[j,M]=l((()=>void 0!==C?C:void 0!==g?[g]:[]));i((()=>{M(void 0===C?void 0===g?[]:[g]:C)}),[g,C]);return a("div",{className:e(t,"bordered"===s&&o,d),id:v,"data-testid":S,children:a(n,{value:j[0],values:j,initialCalendarDate:j[0],isFocusable:!0,variant:c,minDate:m,maxDate:h,disabledDates:u,allowDisabledSelection:D,showActiveMonthDaysOnly:b,onHover:p,onYearMonthDisplayChange:y,onSelect:a=>{var e,l;M([a]),"multi"!==r.variant&&(null===(e=r.onChange)||void 0===e||e.call(r,a),null===(l=r.onSelect)||void 0===l||l.call(r,a))},onChange:a=>{var e;M(a),"multi"===r.variant&&(null===(e=r.onChange)||void 0===e||e.call(r,a))},minSelectable:f,maxSelectable:w})})};export{r as Calendar};
 //# sourceMappingURL=calendar.js.map

package/calendar/calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = (props: CalendarProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n styleType = \"bordered\",\n variant,\n id,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onHover,\n onYearMonthDisplayChange,\n \"data-testid\": dataTestId,\n } = props;\n\n const isMultiVariant = props.variant === \"multi\";\n const controlledValue = isMultiVariant ? undefined : props.value;\n const controlledValues = isMultiVariant ? props.values : undefined;\n const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n const resolveValues = (): string[] => {\n if (controlledValues !== undefined) return controlledValues;\n if (controlledValue !== undefined) return [controlledValue];\n return [];\n };\n\n const [selectedValues, setSelectedValues] =\n useState<string[]>(resolveValues);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (controlledValues !== undefined) {\n setSelectedValues(controlledValues);\n return;\n }\n\n if (controlledValue !== undefined) {\n setSelectedValues([controlledValue]);\n return;\n }\n\n setSelectedValues([]);\n }, [controlledValue, controlledValues]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelect = (date: string) => {\n setSelectedValues([date]);\n if (props.variant === \"multi\") {\n return;\n }\n\n props.onChange?.(date);\n props.onSelect?.(date);\n };\n\n const handleMultiSelect = (nextValues: string[]) => {\n setSelectedValues(nextValues);\n if (props.variant === \"multi\") {\n props.onChange?.(nextValues);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n return (\n <div\n className={clsx(\n styles.wrapper,\n styleType === \"bordered\" && styles.wrapperBordered,\n className\n )}\n id={id}\n data-testid={dataTestId}\n >\n <InternalCalendar\n value={selectedValues[0]}\n values={selectedValues}\n initialCalendarDate={selectedValues[0]}\n isFocusable={true}\n variant={variant}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n onHover={onHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n onSelect={handleSelect}\n onChange={handleMultiSelect}\n minSelectable={minSelectable}\n maxSelectable={maxSelectable}\n />\n </div>\n );\n};\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"6TAOO,MAAMA,EAAYC,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,~~EAAOC~~,~~GACPA~~,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,GAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,GAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,SACIxB,UAAWyB,EACPC,EACc,aAAdzB,GAA4B0B,EAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAACK,EAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}
1	+ {"version":3,"file":"calendar.js","sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useState } from \"react\";\n\nimport { InternalCalendar } from \"../shared/internal-calendar\";\nimport * as styles from \"./calendar.styles\";\nimport type { CalendarProps } from \"./types\";\n\nexport const Calendar = (props: CalendarProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n styleType = \"bordered\",\n variant = \"single\",\n id,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onHover,\n onYearMonthDisplayChange,\n \"data-testid\": dataTestId,\n } = props;\n\n const isMultiVariant = props.variant === \"multi\";\n const controlledValue = isMultiVariant ? undefined : props.value;\n const controlledValues = isMultiVariant ? props.values : undefined;\n const minSelectable = isMultiVariant ? props.minSelectable : undefined;\n const maxSelectable = isMultiVariant ? props.maxSelectable : undefined;\n\n const resolveValues = (): string[] => {\n if (controlledValues !== undefined) return controlledValues;\n if (controlledValue !== undefined) return [controlledValue];\n return [];\n };\n\n const [selectedValues, setSelectedValues] =\n useState<string[]>(resolveValues);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n if (controlledValues !== undefined) {\n setSelectedValues(controlledValues);\n return;\n }\n\n if (controlledValue !== undefined) {\n setSelectedValues([controlledValue]);\n return;\n }\n\n setSelectedValues([]);\n }, [controlledValue, controlledValues]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelect = (date: string) => {\n setSelectedValues([date]);\n if (props.variant === \"multi\") {\n return;\n }\n\n props.onChange?.(date);\n props.onSelect?.(date);\n };\n\n const handleMultiSelect = (nextValues: string[]) => {\n setSelectedValues(nextValues);\n if (props.variant === \"multi\") {\n props.onChange?.(nextValues);\n }\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n return (\n <div\n className={clsx(\n styles.wrapper,\n styleType === \"bordered\" && styles.wrapperBordered,\n className\n )}\n id={id}\n data-testid={dataTestId}\n >\n <InternalCalendar\n value={selectedValues[0]}\n values={selectedValues}\n initialCalendarDate={selectedValues[0]}\n isFocusable={true}\n variant={variant}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n showActiveMonthDaysOnly={showActiveMonthDaysOnly}\n onHover={onHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n onSelect={handleSelect}\n onChange={handleMultiSelect}\n minSelectable={minSelectable}\n maxSelectable={maxSelectable}\n />\n </div>\n );\n};\n"],"names":["Calendar","props","className","styleType","variant","id","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onHover","onYearMonthDisplayChange","dataTestId","isMultiVariant","controlledValue","undefined","value","controlledValues","values","minSelectable","maxSelectable","selectedValues","setSelectedValues","useState","useEffect","_jsx","clsx","styles.wrapper","styles.wrapperBordered","children","InternalCalendar","initialCalendarDate","isFocusable","onSelect","date","_a","onChange","call","_b","nextValues"],"mappings":"6TAOO,MAAMA,EAAYC,IAIrB,MAAMC,UACFA,EAASC,UACTA,EAAY,WAAUC,QACtBA,EAAU,SAAQC,GAClBA,EAAEC,QACFA,EAAOC,QACPA,EAAOC,cACPA,EAAaC,uBACbA,EAAsBC,wBACtBA,EAAuBC,QACvBA,EAAOC,yBACPA,EACA,cAAeC,GACfZ,EAEEa,EAAmC,UAAlBb,EAAMG,QACvBW,EAAkBD,OAAiBE,EAAYf,EAAMgB,MACrDC,EAAmBJ,EAAiBb,EAAMkB,YAASH,EACnDI,EAAgBN,EAAiBb,EAAMmB,mBAAgBJ,EACvDK,EAAgBP,EAAiBb,EAAMoB,mBAAgBL,GAQtDM,EAAgBC,GACnBC,GAPkB,SACOR,IAArBE,EAAuCA,OACnBF,IAApBD,EAAsC,CAACA,GACpC,KASXU,GAAU,KAWNF,OAVyBP,IAArBE,OAKoBF,IAApBD,EAKc,GAJI,CAACA,GALDG,EASD,GACtB,CAACH,EAAiBG,IAyBrB,OACIQ,SACIxB,UAAWyB,EACPC,EACc,aAAdzB,GAA4B0B,EAC5B3B,GAEJG,GAAIA,gBACSQ,EAAUiB,SAEvBJ,EAACK,EAAgB,CACbd,MAAOK,EAAe,GACtBH,OAAQG,EACRU,oBAAqBV,EAAe,GACpCW,aAAa,EACb7B,QAASA,EACTE,QAASA,EACTC,QAASA,EACTC,cAAeA,EACfC,uBAAwBA,EACxBC,wBAAyBA,EACzBC,QAASA,EACTC,yBAA0BA,EAC1BsB,SA3CUC,YAClBZ,EAAkB,CAACY,IACG,UAAlBlC,EAAMG,UAII,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGkC,GACH,QAAdI,EAAAtC,EAAMiC,gBAAQ,IAAAK,GAAAA,EAAAD,KAAArC,EAAGkC,GAAK,EAqCdE,SAlCeG,UACvBjB,EAAkBiB,GACI,UAAlBvC,EAAMG,UACQ,QAAdgC,EAAAnC,EAAMoC,gBAAQ,IAAAD,GAAAA,EAAAE,KAAArC,EAAGuC,GACrB,EA+BQpB,cAAeA,EACfC,cAAeA,KAEjB"}

package/cjs/_virtual/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";exports.__module={exports:{}};
+"use strict";exports.__exports={};
 //# sourceMappingURL=index.js.map

package/cjs/_virtual/index3.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";exports.__exports={};
+"use strict";exports.__module={exports:{}};
 //# sourceMappingURL=index3.js.map

package/cjs/accordion/accordion-item.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./accordion-item.styles_kchcad.css");exports.chevronIcon="c15k7llx",exports.container="c1l63f33",exports.containerExpanded="c4kcze2",exports.contentContainer="caja2xa",exports.expandCollapseButton="e1cbnvn7",exports.expandCollapseButtonCollapsible="e1vcwm5y",exports.expandCollapseButtonExpanded="e7t4rdi",exports.expandable="ecqtwmd",exports.iconContainer="ixofgdc",exports.iconContainerExpanded="i1ifv2g7",exports.title="t145i3ve",exports.titleSmall="t1a4gj3";
+"use strict";require("./accordion-item.styles_1j4eb32.css");exports.chevronIcon="c15k7llx",exports.container="c1l63f33",exports.containerExpanded="c4kcze2",exports.contentContainer="caja2xa",exports.expandCollapseButton="e1cbnvn7",exports.expandCollapseButtonCollapsible="e1vcwm5y",exports.expandCollapseButtonExpanded="e7t4rdi",exports.expandable="ecqtwmd",exports.iconContainer="ixofgdc",exports.iconContainerExpanded="i1ifv2g7",exports.title="t145i3ve",exports.titleSmall="t1a4gj3";
 //# sourceMappingURL=accordion-item.styles.js.map

package/cjs/accordion/accordion-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion-item.styles.js","sources":["../../../src/accordion/accordion-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n background-color: ${Colour.bg};\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const containerExpanded = css`\n padding-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const expandCollapseButton = css`\n background: transparent;\n border: none;\n border-radius: ${Radius[\"sm\"]};\n outline: none;\n text-align: left;\n user-select: text;\n\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[\"spacing-48\"]};\n padding: ${Spacing[\"spacing-16\"]} 0;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const expandCollapseButtonExpanded = css`\n padding-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const expandCollapseButtonCollapsible = css`\n cursor: pointer;\n`;\n\nexport const title = css`\n flex: 1;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-standard\"]};\n color: ${Colour[\"text\"]};\n ${Font[\"heading-sm-bold\"]}\n`;\n\nexport const titleSmall = css`\n ${Font[\"heading-xs-bold\"]}\n`;\n\nexport const iconContainer = css`\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-250\"]}${Motion[\"ease-default\"]};\n`;\n\nexport const iconContainerExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const contentContainer = css`\n display: inline-block;\n padding-right: ${Spacing[\"spacing-64\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding-right: 0;\n }\n`;\n"],"names":[],"mappings":"~~wGA0EwB~~,6BA3DF,qCAKQ,mCAgED,uCA5DI,mDA0BW,gDAJH,6BAkClB,gCAfG,wCAKQ,yBAhBhB,8BAOK"}
1	+ {"version":3,"file":"accordion-item.styles.js","sources":["../../../src/accordion/accordion-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n background-color: ${Colour.bg};\n border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const containerExpanded = css`\n padding-bottom: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const expandCollapseButton = css`\n background: transparent;\n border: none;\n border-radius: ${Radius[\"sm\"]};\n outline: none;\n text-align: left;\n user-select: text;\n\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing[\"spacing-48\"]};\n padding: ${Spacing[\"spacing-16\"]} 0;\n\n &:focus-visible {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const expandCollapseButtonExpanded = css`\n padding-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const expandCollapseButtonCollapsible = css`\n cursor: pointer;\n`;\n\nexport const title = css`\n flex: 1;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-standard\"]};\n color: ${Colour[\"text\"]};\n ${Font[\"heading-sm-bold\"]}\n`;\n\nexport const titleSmall = css`\n ${Font[\"heading-xs-bold\"]}\n`;\n\nexport const iconContainer = css`\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-250\"]}${Motion[\"ease-default\"]};\n`;\n\nexport const iconContainerExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const chevronIcon = css`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const expandable = css`\n overflow: hidden;\n`;\n\nexport const contentContainer = css`\n display: inline-block;\n padding-right: ${Spacing[\"spacing-64\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n padding-right: 0;\n }\n`;\n"],"names":[],"mappings":"yGA0EwB,6BA3DF,qCAKQ,mCAgED,uCA5DI,mDA0BW,gDAJH,6BAkClB,gCAfG,wCAKQ,yBAhBhB,8BAOK"}

package/cjs/accordion/accordion-item.styles_1j4eb32.css ADDED Viewed

@@ -0,0 +1,12 @@
+.c1l63f33{background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c4kcze2{padding-bottom:var(--fds-spacing-16);}
+.e1cbnvn7{background:transparent;border:none;border-radius:var(--fds-radius-sm);outline:none;text-align:left;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-48);padding:var(--fds-spacing-16) 0;}.e1cbnvn7:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+.e7t4rdi{padding-bottom:var(--fds-spacing-8);}
+.e1vcwm5y{cursor:pointer;}
+.t145i3ve{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-standard);color:var(--fds-colour-text);font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
+.t1a4gj3{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.ixofgdc{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-250)var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250)var(--fds-motion-timing-ease-default);}
+.i1ifv2g7{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.c15k7llx{height:1.25rem;width:1.25rem;color:var(--fds-colour-icon-primary);}
+.ecqtwmd{overflow:hidden;}
+.caja2xa{display:inline-block;padding-right:var(--fds-spacing-64);}:where(body.fds-breakpoint-lg-max) .caja2xa{padding-right:0;}

package/cjs/accordion/accordion.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./accordion.styles_ijglff.css");exports.accordionWrapper="a1tkz57u",exports.expandCollapseLink="e1e1ok07",exports.title="texr0v4",exports.titleHidden="t8054ua",exports.titleWrapper="txz4s1p",exports.titleWrapperHidden="t1pllc04";
+"use strict";require("./accordion.styles_bzrfrs.css");exports.accordionWrapper="a1tkz57u",exports.expandCollapseLink="e1e1ok07",exports.title="texr0v4",exports.titleHidden="t8054ua",exports.titleWrapper="txz4s1p",exports.titleWrapperHidden="t1pllc04";
 //# sourceMappingURL=accordion.styles.js.map

package/cjs/accordion/accordion.styles_bzrfrs.css ADDED Viewed

@@ -0,0 +1,6 @@
+.a1tkz57u{width:100%;border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.txz4s1p{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;padding-bottom:var(--fds-spacing-16);}
+:where(body.fds-breakpoint-sm-max) .t1pllc04{display:none;}
+.texr0v4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-flex:1;-ms-flex:1;flex:1;font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-md);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .texr0v4{text-align:left;}
+:where(body.fds-breakpoint-sm-max) .t8054ua{display:none;visibility:hidden;}
+.e1e1ok07{margin:calc(var(--fds-spacing-16) * -1);margin-left:0px;white-space:nowrap;}

package/cjs/alert/alert.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),i=require("@lifesg/react-icons/arrow-right"),s=require("@lifesg/react-icons/exclamation-circle-fill"),n=require("@lifesg/react-icons/exclamation-triangle-fill"),t=require("@lifesg/react-icons/i-circle-fill"),l=require("@lifesg/react-icons/tick-circle-fill"),o=require("clsx"),c=require("react"),u=require("../external/react-resize-detector/build/index.esm.js"),p=require("../markup/markup.js"),d=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js"),m=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var f=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var x=require("./alert.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=j(o);const I={error:{wrapperTypeClass:x.wrapperError,iconColorClass:x.alertIconError},success:{wrapperTypeClass:x.wrapperSuccess,iconColorClass:x.alertIconSuccess},warning:{wrapperTypeClass:x.wrapperWarning,iconColorClass:x.alertIconWarning},info:{wrapperTypeClass:x.wrapperInfo,iconColorClass:x.alertIconInfo},description:{wrapperTypeClass:x.wrapperDescription,iconColorClass:x.alertIconDescription}};exports.Alert=o=>{var{type:j,className:q,children:w,actionLink:y,actionLinkIcon:g,sizeType:k="default",showIcon:v=!1,customIcon:T,maxCollapsedHeight:S,role:b}=o,W=e.__rest(o,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[N,L]=c.useState(!1),[D,E]=c.useState(!1),{height:M,ref:z}=u.useResizeDetector(),A=f.useId(),F=c.useRef(null),_=H(),B=c.useCallback((()=>{L(!S),E(H())}),[S,M]);function H(){return!(!M||!S)&&M>S}c.useEffect((()=>{B()}),[S,M,B]),h.useApplyStyle(F,{[x.tokens.maxCollapsedHeight]:!N&&_&&S?`${S}px`:null});const{wrapperTypeClass:R=x.wrapperWarning,iconColorClass:$=x.alertIconWarning}=I[j]||{};return r.jsxs("div",{className:C.default(x.wrapper,R,q),"aria-label":`${(()=>{switch(j){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":W["data-testid"],role:b,children:[v&&r.jsx("div",{className:C.default(x.alertIconWrapper,"small"===k?x.alertIconWrapperSmall:x.alertIconWrapperDefault,$),children:(()=>{if(j&&T)return T;switch(j){case"success":return r.jsx(l.TickCircleFillIcon,{"aria-hidden":!0});case"warning":return r.jsx(n.ExclamationTriangleFillIcon,{"aria-hidden":!0});case"error":return r.jsx(s.ExclamationCircleFillIcon,{"aria-hidden":!0});case"info":case"description":return r.jsx(t.ICircleFillIcon,{"aria-hidden":!0});default:return null}})()}),r.jsxs("div",{className:x.contentContainer,children:[D&&r.jsxs("button",{className:C.default(x.showMoreButton,"small"===k?x.showMoreButtonSmall:x.showMoreButtonDefault),type:"button","aria-expanded":N,"aria-controls":A,onClick:()=>L(!N),children:["Show ",N?"less":"more",r.jsx(a.ChevronDownIcon,{className:C.default(x.chevronIcon,N?x.chevronIconExpanded:x.chevronIconCollapsed)})]}),r.jsxs("div",{id:A,className:C.default(x.textWrapperContainer,N&&y&&x.textWrapperContainerShowMoreWithLink,!N&&_&&x.textWrapperContainerCollapsed),inert:d.inertValue(!!S&&!N),ref:F,children:[r.jsx(p.Markup,{ref:z,className:x.textWrapper,baseTextSize:"small"===k?"body-sm":"body-md",children:w}),y?r.jsxs(m.Typography.LinkSM,Object.assign({"data-testid":"action-link",className:C.default(x.actionLinkText,"small"===k?x.actionLinkTextSmall:x.actionLinkTextDefault),underlineStyle:"none"},y,{children:[y.children,g||r.jsx(i.ArrowRightIcon,{})]})):null]})]})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),i=require("@lifesg/react-icons/arrow-right"),s=require("@lifesg/react-icons/exclamation-circle-fill"),t=require("@lifesg/react-icons/exclamation-triangle-fill"),n=require("@lifesg/react-icons/i-circle-fill"),l=require("@lifesg/react-icons/tick-circle-fill"),o=require("clsx"),c=require("react"),u=require("../external/react-resize-detector/build/index.esm.js"),p=require("../markup/markup.js"),d=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var m=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var f=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var x=require("./alert.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=j(o);const q={error:{wrapperTypeClass:x.wrapperError,iconColorClass:x.alertIconError},success:{wrapperTypeClass:x.wrapperSuccess,iconColorClass:x.alertIconSuccess},warning:{wrapperTypeClass:x.wrapperWarning,iconColorClass:x.alertIconWarning},info:{wrapperTypeClass:x.wrapperInfo,iconColorClass:x.alertIconInfo},description:{wrapperTypeClass:x.wrapperDescription,iconColorClass:x.alertIconDescription}};exports.Alert=o=>{var{type:j,className:y,children:I,actionLink:w,actionLinkIcon:g,sizeType:k="default",showIcon:v=!1,customIcon:T,maxCollapsedHeight:S,role:b}=o,W=e.__rest(o,["type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role"]);const[N,L]=c.useState(!1),[D,E]=c.useState(!1),{height:M,ref:z}=u.useResizeDetector(),A=f.useId(),F=c.useRef(null),_=H(),B=c.useCallback((()=>{L(!S),E(H())}),[S,M]);function H(){return!(!M||!S)&&M>S}c.useEffect((()=>{B()}),[S,M,B]),h.useApplyStyle(F,{[x.tokens.maxCollapsedHeight]:!N&&_&&S?`${S}px`:null});const{wrapperTypeClass:R=x.wrapperWarning,iconColorClass:$=x.alertIconWarning}=q[j]||{};return r.jsxs("div",{className:C.default(x.wrapper,R,y),"aria-label":`${(()=>{switch(j){case"success":return"Success";case"warning":return"Warning";case"error":return"Error";case"info":return"Information";case"description":return"Description";default:return"Alert"}})()}`,"data-testid":W["data-testid"],role:b,children:[v&&r.jsx("div",{className:C.default(x.alertIconWrapper,"small"===k?x.alertIconWrapperSmall:x.alertIconWrapperDefault,$),children:(()=>{if(j&&T)return T;switch(j){case"success":return r.jsx(l.TickCircleFillIcon,{"aria-hidden":!0});case"warning":return r.jsx(t.ExclamationTriangleFillIcon,{"aria-hidden":!0});case"error":return r.jsx(s.ExclamationCircleFillIcon,{"aria-hidden":!0});case"info":case"description":return r.jsx(n.ICircleFillIcon,{"aria-hidden":!0});default:return null}})()}),r.jsxs("div",{className:x.contentContainer,children:[D&&r.jsxs("button",{className:C.default(x.showMoreButton,"small"===k?x.showMoreButtonSmall:x.showMoreButtonDefault),type:"button","aria-expanded":N,"aria-controls":A,onClick:()=>L(!N),children:["Show ",N?"less":"more",r.jsx(a.ChevronDownIcon,{className:C.default(x.chevronIcon,N?x.chevronIconExpanded:x.chevronIconCollapsed)})]}),r.jsxs("div",{id:A,className:C.default(x.textWrapperContainer,N&&w&&x.textWrapperContainerShowMoreWithLink,!N&&_&&x.textWrapperContainerCollapsed),inert:d.inertValue(!!S&&!N),ref:F,children:[r.jsx(p.Markup,{ref:z,className:x.textWrapper,baseTextSize:"small"===k?"body-sm":"body-md",children:I}),w?r.jsxs(m.Typography.LinkSM,Object.assign({"data-testid":"action-link",className:C.default(x.actionLinkText,"small"===k?x.actionLinkTextSmall:x.actionLinkTextDefault),underlineStyle:"none"},w,{children:[w.children,g||r.jsx(i.ArrowRightIcon,{})]})):null]})]})]})};
 //# sourceMappingURL=alert.js.map

package/cjs/alert/alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.js","sources":["../../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n error: {\n wrapperTypeClass: styles.wrapperError,\n iconColorClass: styles.alertIconError,\n },\n success: {\n wrapperTypeClass: styles.wrapperSuccess,\n iconColorClass: styles.alertIconSuccess,\n },\n warning: {\n wrapperTypeClass: styles.wrapperWarning,\n iconColorClass: styles.alertIconWarning,\n },\n info: {\n wrapperTypeClass: styles.wrapperInfo,\n iconColorClass: styles.alertIconInfo,\n },\n description: {\n wrapperTypeClass: styles.wrapperDescription,\n iconColorClass: styles.alertIconDescription,\n },\n};\n\nexport const Alert = ({\n type,\n className,\n children,\n actionLink,\n actionLinkIcon,\n sizeType = \"default\",\n showIcon = false,\n customIcon,\n maxCollapsedHeight,\n role,\n ...otherProps\n}: AlertProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n const { height: contentHeight, ref: contentRef } =\n useResizeDetector<HTMLDivElement>();\n const contentId = useId();\n const containerRef = useRef<HTMLDivElement>(null);\n const isCollapsed = isContentOutsideCollapsibleZone();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n\n const getAlertLabel = () => {\n switch (type) {\n case \"success\":\n return \"Success\";\n case \"warning\":\n return \"Warning\";\n case \"error\":\n return \"Error\";\n case \"info\":\n return \"Information\";\n case \"description\":\n return \"Description\";\n default:\n return \"Alert\";\n }\n };\n\n const setCollapsedState = useCallback(() => {\n setShowHiddenContent(!maxCollapsedHeight);\n setRenderShowMore(isContentOutsideCollapsibleZone());\n }, [maxCollapsedHeight, contentHeight]);\n\n function isContentOutsideCollapsibleZone() {\n if (contentHeight && maxCollapsedHeight) {\n return contentHeight > maxCollapsedHeight;\n }\n return false;\n }\n\n const isInert = () => {\n return !!maxCollapsedHeight && !showHiddenContent;\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n setCollapsedState();\n }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n useApplyStyle(containerRef, {\n [styles.tokens.maxCollapsedHeight]:\n !showHiddenContent && isCollapsed && maxCollapsedHeight\n ? `${maxCollapsedHeight}px`\n : null,\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderShowMoreButton = () => (\n <button\n className={clsx(\n styles.showMoreButton,\n sizeType === \"small\"\n ? styles.showMoreButtonSmall\n : styles.showMoreButtonDefault\n )}\n type=\"button\"\n aria-expanded={showHiddenContent}\n aria-controls={contentId}\n onClick={() => setShowHiddenContent(!showHiddenContent)}\n >\n Show {showHiddenContent ? \"less\" : \"more\"}\n <ChevronDownIcon\n className={clsx(\n styles.chevronIcon,\n showHiddenContent\n ? styles.chevronIconExpanded\n : styles.chevronIconCollapsed\n )}\n />\n </button>\n );\n\n const renderLinkType = () => {\n if (actionLinkIcon) return actionLinkIcon;\n return <ArrowRightIcon />;\n };\n\n const renderLink = () => {\n if (!actionLink) return null;\n\n return (\n <Typography.LinkSM\n data-testid=\"action-link\"\n className={clsx(\n styles.actionLinkText,\n sizeType === \"small\"\n ? styles.actionLinkTextSmall\n : styles.actionLinkTextDefault\n )}\n underlineStyle=\"none\"\n {...actionLink}\n >\n {actionLink.children}\n {renderLinkType()}\n </Typography.LinkSM>\n );\n };\n\n const renderIcon = () => {\n if (type && customIcon) return customIcon;\n switch (type) {\n case \"success\":\n return <TickCircleFillIcon aria-hidden />;\n case \"warning\":\n return <ExclamationTriangleFillIcon aria-hidden />;\n case \"error\":\n return <ExclamationCircleFillIcon aria-hidden />;\n case \"info\":\n return <ICircleFillIcon aria-hidden />;\n case \"description\":\n return <ICircleFillIcon aria-hidden />;\n default:\n return null;\n }\n };\n\n const renderContent = () => {\n return (\n <div\n id={contentId}\n className={clsx(\n styles.textWrapperContainer,\n showHiddenContent &&\n actionLink &&\n styles.textWrapperContainerShowMoreWithLink,\n !showHiddenContent &&\n isCollapsed &&\n styles.textWrapperContainerCollapsed\n )}\n inert={inertValue(isInert())}\n ref={containerRef}\n >\n <Markup\n ref={contentRef}\n className={styles.textWrapper}\n baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n >\n {children}\n </Markup>\n {renderLink()}\n </div>\n );\n };\n\n const {\n wrapperTypeClass = styles.wrapperWarning,\n iconColorClass = styles.alertIconWarning,\n } = TYPE_CLASS_MAP[type] \|\| {};\n\n return (\n <div\n className={clsx(styles.wrapper, wrapperTypeClass, className)}\n aria-label={`${getAlertLabel()}`}\n data-testid={otherProps[\"data-testid\"]}\n role={role}\n >\n {showIcon && (\n <div\n className={clsx(\n styles.alertIconWrapper,\n sizeType === \"small\"\n ? styles.alertIconWrapperSmall\n : styles.alertIconWrapperDefault,\n iconColorClass\n )}\n >\n {renderIcon()}\n </div>\n )}\n {/* \n CSS-BASED TAB ORDER IMPLEMENTATION:\n - DOM order: button → link → content (natural tab order)\n - Visual order: content → button (via CSS order property)\n */}\n <div className={styles.contentContainer}>\n {renderShowMore && renderShowMoreButton()}\n {renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"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"}
1	+ {"version":3,"file":"alert.js","sources":["../../../src/alert/alert.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons\";\nimport { ArrowRightIcon } from \"@lifesg/react-icons/arrow-right\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport { ExclamationTriangleFillIcon } from \"@lifesg/react-icons/exclamation-triangle-fill\";\nimport { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport { TickCircleFillIcon } from \"@lifesg/react-icons/tick-circle-fill\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Markup } from \"../markup\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./alert.styles\";\nimport type { AlertProps } from \"./types\";\n\nconst TYPE_CLASS_MAP = {\n error: {\n wrapperTypeClass: styles.wrapperError,\n iconColorClass: styles.alertIconError,\n },\n success: {\n wrapperTypeClass: styles.wrapperSuccess,\n iconColorClass: styles.alertIconSuccess,\n },\n warning: {\n wrapperTypeClass: styles.wrapperWarning,\n iconColorClass: styles.alertIconWarning,\n },\n info: {\n wrapperTypeClass: styles.wrapperInfo,\n iconColorClass: styles.alertIconInfo,\n },\n description: {\n wrapperTypeClass: styles.wrapperDescription,\n iconColorClass: styles.alertIconDescription,\n },\n};\n\nexport const Alert = ({\n type,\n className,\n children,\n actionLink,\n actionLinkIcon,\n sizeType = \"default\",\n showIcon = false,\n customIcon,\n maxCollapsedHeight,\n role,\n ...otherProps\n}: AlertProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [showHiddenContent, setShowHiddenContent] = useState<boolean>(false);\n const [renderShowMore, setRenderShowMore] = useState<boolean>(false);\n const { height: contentHeight, ref: contentRef } =\n useResizeDetector<HTMLDivElement>();\n const contentId = useId();\n const containerRef = useRef<HTMLDivElement>(null);\n const isCollapsed = isContentOutsideCollapsibleZone();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n\n const getAlertLabel = () => {\n switch (type) {\n case \"success\":\n return \"Success\";\n case \"warning\":\n return \"Warning\";\n case \"error\":\n return \"Error\";\n case \"info\":\n return \"Information\";\n case \"description\":\n return \"Description\";\n default:\n return \"Alert\";\n }\n };\n\n const setCollapsedState = useCallback(() => {\n setShowHiddenContent(!maxCollapsedHeight);\n setRenderShowMore(isContentOutsideCollapsibleZone());\n }, [maxCollapsedHeight, contentHeight]);\n\n function isContentOutsideCollapsibleZone() {\n if (contentHeight && maxCollapsedHeight) {\n return contentHeight > maxCollapsedHeight;\n }\n return false;\n }\n\n const isInert = () => {\n return !!maxCollapsedHeight && !showHiddenContent;\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useEffect(() => {\n setCollapsedState();\n }, [maxCollapsedHeight, contentHeight, setCollapsedState]);\n\n useApplyStyle(containerRef, {\n [styles.tokens.maxCollapsedHeight]:\n !showHiddenContent && isCollapsed && maxCollapsedHeight\n ? `${maxCollapsedHeight}px`\n : null,\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderShowMoreButton = () => (\n <button\n className={clsx(\n styles.showMoreButton,\n sizeType === \"small\"\n ? styles.showMoreButtonSmall\n : styles.showMoreButtonDefault\n )}\n type=\"button\"\n aria-expanded={showHiddenContent}\n aria-controls={contentId}\n onClick={() => setShowHiddenContent(!showHiddenContent)}\n >\n Show {showHiddenContent ? \"less\" : \"more\"}\n <ChevronDownIcon\n className={clsx(\n styles.chevronIcon,\n showHiddenContent\n ? styles.chevronIconExpanded\n : styles.chevronIconCollapsed\n )}\n />\n </button>\n );\n\n const renderLinkType = () => {\n if (actionLinkIcon) return actionLinkIcon;\n return <ArrowRightIcon />;\n };\n\n const renderLink = () => {\n if (!actionLink) return null;\n\n return (\n <Typography.LinkSM\n data-testid=\"action-link\"\n className={clsx(\n styles.actionLinkText,\n sizeType === \"small\"\n ? styles.actionLinkTextSmall\n : styles.actionLinkTextDefault\n )}\n underlineStyle=\"none\"\n {...actionLink}\n >\n {actionLink.children}\n {renderLinkType()}\n </Typography.LinkSM>\n );\n };\n\n const renderIcon = () => {\n if (type && customIcon) return customIcon;\n switch (type) {\n case \"success\":\n return <TickCircleFillIcon aria-hidden />;\n case \"warning\":\n return <ExclamationTriangleFillIcon aria-hidden />;\n case \"error\":\n return <ExclamationCircleFillIcon aria-hidden />;\n case \"info\":\n return <ICircleFillIcon aria-hidden />;\n case \"description\":\n return <ICircleFillIcon aria-hidden />;\n default:\n return null;\n }\n };\n\n const renderContent = () => {\n return (\n <div\n id={contentId}\n className={clsx(\n styles.textWrapperContainer,\n showHiddenContent &&\n actionLink &&\n styles.textWrapperContainerShowMoreWithLink,\n !showHiddenContent &&\n isCollapsed &&\n styles.textWrapperContainerCollapsed\n )}\n inert={inertValue(isInert())}\n ref={containerRef}\n >\n <Markup\n ref={contentRef}\n className={styles.textWrapper}\n baseTextSize={sizeType === \"small\" ? \"body-sm\" : \"body-md\"}\n >\n {children}\n </Markup>\n {renderLink()}\n </div>\n );\n };\n\n const {\n wrapperTypeClass = styles.wrapperWarning,\n iconColorClass = styles.alertIconWarning,\n } = TYPE_CLASS_MAP[type] \|\| {};\n\n return (\n <div\n className={clsx(styles.wrapper, wrapperTypeClass, className)}\n aria-label={`${getAlertLabel()}`}\n data-testid={otherProps[\"data-testid\"]}\n role={role}\n >\n {showIcon && (\n <div\n className={clsx(\n styles.alertIconWrapper,\n sizeType === \"small\"\n ? styles.alertIconWrapperSmall\n : styles.alertIconWrapperDefault,\n iconColorClass\n )}\n >\n {renderIcon()}\n </div>\n )}\n {/* \n CSS-BASED TAB ORDER IMPLEMENTATION:\n - DOM order: button → link → content (natural tab order)\n - Visual order: content → button (via CSS order property)\n */}\n <div className={styles.contentContainer}>\n {renderShowMore && renderShowMoreButton()}\n {renderContent()}\n </div>\n </div>\n );\n};\n"],"names":["TYPE_CLASS_MAP","error","wrapperTypeClass","styles.wrapperError","iconColorClass","styles.alertIconError","success","styles.wrapperSuccess","styles.alertIconSuccess","warning","styles.wrapperWarning","styles.alertIconWarning","info","styles.wrapperInfo","styles.alertIconInfo","description","styles.wrapperDescription","styles.alertIconDescription","_a","type","className","children","actionLink","actionLinkIcon","sizeType","showIcon","customIcon","maxCollapsedHeight","role","otherProps","__rest","showHiddenContent","setShowHiddenContent","useState","renderShowMore","setRenderShowMore","height","contentHeight","ref","contentRef","useResizeDetector","contentId","useId","containerRef","useRef","isCollapsed","isContentOutsideCollapsibleZone","setCollapsedState","useCallback","useEffect","useApplyStyle","styles.tokens","_jsxs","clsx","styles.wrapper","getAlertLabel","_jsx","styles.alertIconWrapper","styles.alertIconWrapperSmall","styles.alertIconWrapperDefault","TickCircleFillIcon","ExclamationTriangleFillIcon","ExclamationCircleFillIcon","ICircleFillIcon","renderIcon","styles.contentContainer","styles.showMoreButton","styles.showMoreButtonSmall","styles.showMoreButtonDefault","onClick","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","styles.chevronIconCollapsed","id","styles.textWrapperContainer","styles.textWrapperContainerShowMoreWithLink","styles.textWrapperContainerCollapsed","inert","inertValue","Markup","styles.textWrapper","baseTextSize","Typography","LinkSM","Object","assign","styles.actionLinkText","styles.actionLinkTextSmall","styles.actionLinkTextDefault","underlineStyle","ArrowRightIcon"],"mappings":"suCAkBA,MAAMA,EAAiB,CACnBC,MAAO,CACHC,iBAAkBC,EAAAA,aAClBC,eAAgBC,EAAAA,gBAEpBC,QAAS,CACLJ,iBAAkBK,EAAAA,eAClBH,eAAgBI,EAAAA,kBAEpBC,QAAS,CACLP,iBAAkBQ,EAAAA,eAClBN,eAAgBO,EAAAA,kBAEpBC,KAAM,CACFV,iBAAkBW,EAAAA,YAClBT,eAAgBU,EAAAA,eAEpBC,YAAa,CACTb,iBAAkBc,EAAAA,mBAClBZ,eAAgBa,EAAAA,qCAIFC,IAAA,IAAAC,KAClBA,EAAIC,UACJA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,SACdA,EAAW,UAASC,SACpBA,GAAW,EAAKC,WAChBA,EAAUC,mBACVA,EAAkBC,KAClBA,GAAIV,EACDW,EAAUC,EAAAA,OAAAZ,EAXK,CAAA,OAAA,YAAA,WAAA,aAAA,iBAAA,WAAA,WAAA,aAAA,qBAAA,SAgBlB,MAAOa,EAAmBC,GAAwBC,EAAAA,UAAkB,IAC7DC,EAAgBC,GAAqBF,EAAAA,UAAkB,IACtDG,OAAQC,EAAeC,IAAKC,GAChCC,EAAAA,oBACEC,EAAYC,EAAAA,QACZC,EAAeC,EAAAA,OAAuB,MACtCC,EAAcC,IAuBdC,EAAoBC,EAAAA,aAAY,KAClChB,GAAsBL,GACtBQ,EAAkBW,IAAkC,GACrD,CAACnB,EAAoBU,IAExB,SAASS,IACL,SAAIT,IAAiBV,IACVU,EAAgBV,CAG/B,CAUAsB,EAAAA,WAAU,KACNF,GAAmB,GACpB,CAACpB,EAAoBU,EAAeU,IAEvCG,EAAAA,cAAcP,EAAc,CACxB,CAACQ,SAAcxB,qBACVI,GAAqBc,GAAelB,EAC/B,GAAGA,MACH,OAOd,MAiGMzB,iBACFA,EAAmBQ,EAAAA,eAAqBN,eACxCA,EAAiBO,EAAAA,kBACjBX,EAAemB,IAAS,CAAA,EAE5B,OACIiC,EAAAA,KAAA,MAAA,CACIhC,UAAWiC,EAAAA,QAAKC,EAAAA,QAAgBpD,EAAkBkB,GAAU,aAChD,GA7JE,MAClB,OAAQD,GACJ,IAAK,UACD,MAAO,UACX,IAAK,UACD,MAAO,UACX,IAAK,QACD,MAAO,QACX,IAAK,OACD,MAAO,cACX,IAAK,cACD,MAAO,cACX,QACI,MAAO,UAgJIoC,KAAiB,cACnB1B,EAAW,eACxBD,KAAMA,EAAIP,SAAA,CAETI,GACG+B,EAAAA,IAAA,MAAA,CACIpC,UAAWiC,EAAAA,QACPI,EAAAA,iBACa,UAAbjC,EACMkC,EAAAA,sBACAC,0BACNvD,GACHiB,SAlEE,MACf,GAAIF,GAAQO,EAAY,OAAOA,EAC/B,OAAQP,GACJ,IAAK,UACD,OAAOqC,EAAAA,IAACI,EAAAA,mBAAkB,CAAA,eAAA,IAC9B,IAAK,UACD,OAAOJ,EAAAA,IAACK,EAAAA,4BAA2B,CAAA,eAAA,IACvC,IAAK,QACD,OAAOL,EAAAA,IAACM,EAAAA,0BAAyB,CAAA,eAAA,IACrC,IAAK,OAEL,IAAK,cACD,OAAON,EAAAA,IAACO,EAAAA,gBAAe,CAAA,eAAA,IAC3B,QACI,OAAO,OAsDFC,KAQTZ,EAAAA,KAAA,MAAA,CAAKhC,UAAW6C,mBAAuB5C,SAAA,CAClCa,GA/HTkB,EAAAA,KAAA,SAAA,CACIhC,UAAWiC,EAAAA,QACPa,EAAAA,eACa,UAAb1C,EACM2C,EAAAA,oBACAC,EAAAA,uBAEVjD,KAAK,SAAQ,gBACEY,EAAiB,gBACjBU,EACf4B,QAAS,IAAMrC,GAAsBD,GAAkBV,SAAA,CAAA,QAEjDU,EAAoB,OAAS,OACnCyB,EAAAA,IAACc,kBAAe,CACZlD,UAAWiC,EAAAA,QACPkB,EAAAA,YACAxC,EACMyC,EAAAA,oBACAC,6BAoDdrB,EAAAA,KAAA,MAAA,CACIsB,GAAIjC,EACJrB,UAAWiC,EAAAA,QACPsB,EAAAA,qBACA5C,GACIT,GACAsD,EAAAA,sCACH7C,GACGc,GACAgC,EAAAA,+BAERC,MAAOC,EAAAA,aAxGNpD,IAAuBI,GAyGxBO,IAAKK,EAAYtB,SAAA,CAEjBmC,MAACwB,EAAAA,QACG1C,IAAKC,EACLnB,UAAW6D,EAAAA,YACXC,aAA2B,UAAb1D,EAAuB,UAAY,UAASH,SAEzDA,IA3DRC,EAGD8B,OAAC+B,EAAAA,WAAWC,OAAMC,OAAAC,OAAA,CAAA,cACF,cACZlE,UAAWiC,UACPkC,EAAAA,eACa,UAAb/D,EACMgE,EAAAA,oBACAC,EAAAA,uBAEVC,eAAe,QACXpE,EAAU,CAAAD,SAAA,CAEbC,EAAWD,SAnBhBE,GACGiC,EAAAA,IAACmC,EAAAA,eAAc,QAIE,aAoGlB"}

package/cjs/alert/alert.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./alert.styles_1ygel36.css");exports.actionLinkText="aesypwo",exports.actionLinkTextDefault="a1a9q3y5",exports.actionLinkTextSmall="a10b5gf8",exports.alertIconDescription="amvh5gt",exports.alertIconError="a1v4ljri",exports.alertIconInfo="a1tifh24",exports.alertIconSuccess="a1vwvhsw",exports.alertIconWarning="a1l988e7",exports.alertIconWrapper="a2kejy0",exports.alertIconWrapperDefault="a1u5ns39",exports.alertIconWrapperSmall="a1p0o35j",exports.chevronIcon="c19cf4gt",exports.chevronIconCollapsed="c1u44bt8",exports.chevronIconExpanded="cnxzujv",exports.contentContainer="cg7mawv",exports.showMoreButton="swmwiyq",exports.showMoreButtonDefault="s1ypbatn",exports.showMoreButtonSmall="sxtdaq0",exports.textWrapper="t1myaiqw",exports.textWrapperContainer="t1npk24x",exports.textWrapperContainerCollapsed="t1fvdgaj",exports.textWrapperContainerShowMoreWithLink="t11jn0l3",exports.tokens={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},exports.wrapper="wa04j5f",exports.wrapperDescription="w3tklvf",exports.wrapperError="we966c0",exports.wrapperInfo="w1xcaq6x",exports.wrapperSuccess="wiv49ur",exports.wrapperWarning="w1rjxx7d";
+"use strict";require("./alert.styles_patwo2.css");exports.actionLinkText="aesypwo",exports.actionLinkTextDefault="a1a9q3y5",exports.actionLinkTextSmall="a10b5gf8",exports.alertIconDescription="amvh5gt",exports.alertIconError="a1v4ljri",exports.alertIconInfo="a1tifh24",exports.alertIconSuccess="a1vwvhsw",exports.alertIconWarning="a1l988e7",exports.alertIconWrapper="a2kejy0",exports.alertIconWrapperDefault="a1u5ns39",exports.alertIconWrapperSmall="a1p0o35j",exports.chevronIcon="c19cf4gt",exports.chevronIconCollapsed="c1u44bt8",exports.chevronIconExpanded="cnxzujv",exports.contentContainer="cg7mawv",exports.showMoreButton="swmwiyq",exports.showMoreButtonDefault="s1ypbatn",exports.showMoreButtonSmall="sxtdaq0",exports.textWrapper="t1myaiqw",exports.textWrapperContainer="t1npk24x",exports.textWrapperContainerCollapsed="t1fvdgaj",exports.textWrapperContainerShowMoreWithLink="t11jn0l3",exports.tokens={maxCollapsedHeight:"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight"},exports.wrapper="wa04j5f",exports.wrapperDescription="w3tklvf",exports.wrapperError="we966c0",exports.wrapperInfo="w1xcaq6x",exports.wrapperSuccess="wiv49ur",exports.wrapperWarning="w1rjxx7d";
 //# sourceMappingURL=alert.styles.js.map

package/cjs/alert/alert.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.styles.js","sources":["../../../src/alert/alert.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Spacing } from \"../theme/tokens\";\n\nexport const tokens = {\n maxCollapsedHeight:\n \"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight\",\n};\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const wrapper = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n display: flex;\n border-left: ${Border[\"width-020\"]} ${Border[\"solid\"]};\n`;\n\nexport const wrapperError = css`\n background: ${Colour[\"bg-error\"]};\n border-left-color: ${Colour[\"border-error\"]};\n`;\n\nexport const wrapperSuccess = css`\n background: ${Colour[\"bg-success\"]};\n border-left-color: ${Colour[\"border-success\"]};\n`;\n\nexport const wrapperWarning = css`\n background: ${Colour[\"bg-warning\"]};\n border-left-color: ${Colour[\"border-warning\"]};\n`;\n\nexport const wrapperInfo = css`\n background: ${Colour[\"bg-info\"]};\n border-left-color: ${Colour[\"border-info\"]};\n`;\n\nexport const wrapperDescription = css`\n background: ${Colour[\"bg-strong\"]};\n border-left-color: ${Colour[\"border-strong\"]};\n`;\n\n// =============================================================================\n// ALERT ICON WRAPPER\n// =============================================================================\nexport const alertIconWrapper = css`\n display: flex;\n align-items: center;\n height: 1lh;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const alertIconWrapperSmall = css`\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n`;\n\nexport const alertIconWrapperDefault = css`\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n`;\n\nexport const alertIconError = css`\n svg {\n color: ${Colour[\"icon-error\"]};\n }\n`;\n\nexport const alertIconSuccess = css`\n svg {\n color: ${Colour[\"icon-success\"]};\n }\n`;\n\nexport const alertIconWarning = css`\n svg {\n color: ${Colour[\"icon-warning\"]};\n }\n`;\n\nexport const alertIconInfo = css`\n svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const alertIconDescription = css`\n svg {\n color: ${Colour[\"icon-subtle\"]};\n }\n`;\n\n// =============================================================================\n// ACTION LINK TEXT\n// =============================================================================\nexport const actionLinkText = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n\n svg {\n height: 1rem;\n width: 1rem;\n margin-left: ${Spacing[\"spacing-4\"]};\n }\n`;\n\nexport const actionLinkTextDefault = css`\n ${Font[\"body-md-semibold\"]}\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const actionLinkTextSmall = css`\n ${Font[\"body-sm-semibold\"]}\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\n// =============================================================================\n// CONTENT CONTAINER\n// =============================================================================\nexport const contentContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-wrap: anywhere;\n`;\n\n// =============================================================================\n// TEXT WRAPPER CONTAINER\n// =============================================================================\nexport const textWrapperContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n order: 1;\n`;\n\nexport const textWrapperContainerShowMoreWithLink = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const textWrapperContainerCollapsed = css`\n ${tokens.maxCollapsedHeight}: initial;\n max-height: var(${tokens.maxCollapsedHeight});\n overflow: hidden;\n -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\n// =============================================================================\n// TEXT WRAPPER\n// =============================================================================\nexport const textWrapper = css`\n color: ${Colour.text};\n`;\n\n// =============================================================================\n// SHOW MORE BUTTON\n// =============================================================================\nexport const showMoreButton = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n order: 2;\n\n cursor: pointer;\n user-select: none;\n border: none;\n background: transparent;\n\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const showMoreButtonDefault = css`\n ${Font[\"body-md-semibold\"]}\n`;\n\nexport const showMoreButtonSmall = css`\n ${Font[\"body-sm-semibold\"]}\n`;\n\n// =============================================================================\n// CHEVRON ICON\n// =============================================================================\nexport const chevronIcon = css`\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const chevronIconCollapsed = css`\n transform: rotate(0deg);\n`;\n"],"names":["maxCollapsedHeight"],"mappings":"~~+FAoG2B~~,wCAYO,uCAKF,wCA1BC,iCAxBN,iCAkBD,oCAZG,oCAMA,oCAjCA,0CAcO,yCAPF,+BA0IV,wCAQS,uCAJD,mCAtEH,iCAuCF,wCAgBO,uCAIF,8BA3BR,wCAtBS,iDAWS,wDAJO,0BA1I3B,CAClBA,mBACI,gFAMY,qCA0BW,+BApBN,8BAeD,kCAVG,iCAKA"}
1	+ {"version":3,"file":"alert.styles.js","sources":["../../../src/alert/alert.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Motion, Spacing } from \"../theme/tokens\";\n\nexport const tokens = {\n maxCollapsedHeight:\n \"--fds-internal-alert-textWrapperContainer-maxCollapsedHeight\",\n};\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\nexport const wrapper = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n display: flex;\n border-left: ${Border[\"width-020\"]} ${Border[\"solid\"]};\n`;\n\nexport const wrapperError = css`\n background: ${Colour[\"bg-error\"]};\n border-left-color: ${Colour[\"border-error\"]};\n`;\n\nexport const wrapperSuccess = css`\n background: ${Colour[\"bg-success\"]};\n border-left-color: ${Colour[\"border-success\"]};\n`;\n\nexport const wrapperWarning = css`\n background: ${Colour[\"bg-warning\"]};\n border-left-color: ${Colour[\"border-warning\"]};\n`;\n\nexport const wrapperInfo = css`\n background: ${Colour[\"bg-info\"]};\n border-left-color: ${Colour[\"border-info\"]};\n`;\n\nexport const wrapperDescription = css`\n background: ${Colour[\"bg-strong\"]};\n border-left-color: ${Colour[\"border-strong\"]};\n`;\n\n// =============================================================================\n// ALERT ICON WRAPPER\n// =============================================================================\nexport const alertIconWrapper = css`\n display: flex;\n align-items: center;\n height: 1lh;\n margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const alertIconWrapperSmall = css`\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n`;\n\nexport const alertIconWrapperDefault = css`\n svg {\n width: 1.5rem;\n height: 1.5rem;\n }\n`;\n\nexport const alertIconError = css`\n svg {\n color: ${Colour[\"icon-error\"]};\n }\n`;\n\nexport const alertIconSuccess = css`\n svg {\n color: ${Colour[\"icon-success\"]};\n }\n`;\n\nexport const alertIconWarning = css`\n svg {\n color: ${Colour[\"icon-warning\"]};\n }\n`;\n\nexport const alertIconInfo = css`\n svg {\n color: ${Colour[\"icon-info\"]};\n }\n`;\n\nexport const alertIconDescription = css`\n svg {\n color: ${Colour[\"icon-subtle\"]};\n }\n`;\n\n// =============================================================================\n// ACTION LINK TEXT\n// =============================================================================\nexport const actionLinkText = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n\n svg {\n height: 1rem;\n width: 1rem;\n margin-left: ${Spacing[\"spacing-4\"]};\n }\n`;\n\nexport const actionLinkTextDefault = css`\n ${Font[\"body-md-semibold\"]}\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const actionLinkTextSmall = css`\n ${Font[\"body-sm-semibold\"]}\n margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\n// =============================================================================\n// CONTENT CONTAINER\n// =============================================================================\nexport const contentContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-wrap: anywhere;\n`;\n\n// =============================================================================\n// TEXT WRAPPER CONTAINER\n// =============================================================================\nexport const textWrapperContainer = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n order: 1;\n`;\n\nexport const textWrapperContainerShowMoreWithLink = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const textWrapperContainerCollapsed = css`\n ${tokens.maxCollapsedHeight}: initial;\n max-height: var(${tokens.maxCollapsedHeight});\n overflow: hidden;\n -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n mask-image: linear-gradient(to bottom, black 50%, transparent 100%);\n`;\n\n// =============================================================================\n// TEXT WRAPPER\n// =============================================================================\nexport const textWrapper = css`\n color: ${Colour.text};\n`;\n\n// =============================================================================\n// SHOW MORE BUTTON\n// =============================================================================\nexport const showMoreButton = css`\n display: flex;\n align-items: center;\n align-self: flex-start;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n order: 2;\n\n cursor: pointer;\n user-select: none;\n border: none;\n background: transparent;\n\n color: ${Colour[\"text-primary\"]};\n`;\n\nexport const showMoreButtonDefault = css`\n ${Font[\"body-md-semibold\"]}\n`;\n\nexport const showMoreButtonSmall = css`\n ${Font[\"body-sm-semibold\"]}\n`;\n\n// =============================================================================\n// CHEVRON ICON\n// =============================================================================\nexport const chevronIcon = css`\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const chevronIconCollapsed = css`\n transform: rotate(0deg);\n`;\n"],"names":["maxCollapsedHeight"],"mappings":"8FAoG2B,wCAYO,uCAKF,wCA1BC,iCAxBN,iCAkBD,oCAZG,oCAMA,oCAjCA,0CAcO,yCAPF,+BA0IV,wCAQS,uCAJD,mCAtEH,iCAuCF,wCAgBO,uCAIF,8BA3BR,wCAtBS,iDAWS,wDAJO,0BA1I3B,CAClBA,mBACI,gFAMY,qCA0BW,+BApBN,8BAeD,kCAVG,iCAKA"}

package/cjs/alert/alert.styles_patwo2.css ADDED Viewed

@@ -0,0 +1,28 @@
+.wa04j5f{padding:var(--fds-spacing-8) var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left:var(--fds-border-width-020) var(--fds-border-style-solid);}
+.we966c0{background:var(--fds-colour-bg-error);border-left-color:var(--fds-colour-border-error);}
+.wiv49ur{background:var(--fds-colour-bg-success);border-left-color:var(--fds-colour-border-success);}
+.w1rjxx7d{background:var(--fds-colour-bg-warning);border-left-color:var(--fds-colour-border-warning);}
+.w1xcaq6x{background:var(--fds-colour-bg-info);border-left-color:var(--fds-colour-border-info);}
+.w3tklvf{background:var(--fds-colour-bg-strong);border-left-color:var(--fds-colour-border-strong);}
+.a2kejy0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1lh;margin-right:var(--fds-spacing-8);}
+.a1p0o35j svg{width:1.25rem;height:1.25rem;}
+.a1u5ns39 svg{width:1.5rem;height:1.5rem;}
+.a1v4ljri svg{color:var(--fds-colour-icon-error);}
+.a1vwvhsw svg{color:var(--fds-colour-icon-success);}
+.a1l988e7 svg{color:var(--fds-colour-icon-warning);}
+.a1tifh24 svg{color:var(--fds-colour-icon-info);}
+.amvh5gt svg{color:var(--fds-colour-icon-subtle);}
+.aesypwo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;}.aesypwo svg{height:1rem;width:1rem;margin-left:var(--fds-spacing-4);}
+.a1a9q3y5{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:var(--fds-spacing-8);}
+.a10b5gf8{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);margin-top:var(--fds-spacing-4);}
+.cg7mawv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;overflow-wrap:anywhere;}
+.t1npk24x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-order:1;-ms-flex-order:1;order:1;}
+.t11jn0l3{margin-bottom:var(--fds-spacing-8);}
+.t1fvdgaj{--fds-internal-alert-textWrapperContainer-maxCollapsedHeight:initial;max-height:var(--fds-internal-alert-textWrapperContainer-maxCollapsedHeight);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}
+.t1myaiqw{color:var(--fds-colour-text);}
+.swmwiyq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;gap:var(--fds-spacing-4);margin-top:var(--fds-spacing-8);-webkit-order:2;-ms-flex-order:2;order:2;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:transparent;color:var(--fds-colour-text-primary);}
+.s1ypbatn{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.sxtdaq0{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.c19cf4gt{-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
+.cnxzujv{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.c1u44bt8{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}

package/cjs/animations/loading-dots-spinner/loading-dots-spinner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),o=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js");var s=require("../../theme/tokens/component.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var n=require("../../theme/utils/use-apply-styles.js"),i=require("./loading-dots-spinner.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=u(t);const l=o.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./lottie-animation.js")}))).LottieLoadingDotsSpinner}})))),c=()=>r.jsx("div",{className:i.placeholder});exports.LoadingDotsSpinner=t=>{var{className:u,color:d}=t,m=e.__rest(t,["className","color"]);const j=o.useRef(null),[p,v]=o.useState(void 0);return n.useApplyStyle(j,{[i.tokens.containerColor]:d||s.ComponentToken.Animation["loading-dots-spinner-colour"]}),o.useEffect((()=>{const e=j.current;if(!e)return;const r=getComputedStyle(e).getPropertyValue(i.tokens.containerColor).trim();v(r||void 0)}),[d]),r.jsx("div",Object.assign({ref:j},m,{className:a.default(i.container,u),children:r.jsx(o.Suspense,{fallback:r.jsx(c,{}),children:r.jsx(l,{color:p})})}))};
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),s=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js");var o=require("../../theme/tokens/component.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var i=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var n=require("./loading-dots-spinner.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=u(t);const l=s.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./lottie-animation.js")}))).LottieLoadingDotsSpinner}})))),c=()=>r.jsx("div",{className:n.placeholder});exports.LoadingDotsSpinner=t=>{var{className:u,color:d}=t,m=e.__rest(t,["className","color"]);const j=s.useRef(null),[p,q]=s.useState(void 0);return i.useApplyStyle(j,{[n.tokens.containerColor]:d||o.ComponentToken.Animation["loading-dots-spinner-colour"]}),s.useEffect((()=>{const e=j.current;if(!e)return;const r=getComputedStyle(e).getPropertyValue(n.tokens.containerColor).trim();q(r||void 0)}),[d]),r.jsx("div",Object.assign({ref:j},m,{className:a.default(n.container,u),children:r.jsx(s.Suspense,{fallback:r.jsx(c,{}),children:r.jsx(l,{color:p})})}))};
 //# sourceMappingURL=loading-dots-spinner.js.map

package/cjs/animations/loading-dots-spinner/loading-dots-spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"loading-dots-spinner.js","sources":["../../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n className,\n color,\n ...otherProps\n}: CustomisableAnimationProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [resolvedColor, setResolvedColor] = useState<string \| undefined>(\n undefined\n );\n\n useApplyStyle(containerRef, {\n [styles.tokens.containerColor]:\n color \|\| ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n });\n\n useEffect(() => {\n const element = containerRef.current;\n if (!element) return;\n\n const computedColor = getComputedStyle(element)\n .getPropertyValue(styles.tokens.containerColor)\n .trim();\n\n setResolvedColor(computedColor \|\| undefined);\n }, [color]);\n\n return (\n <div\n ref={containerRef}\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <Suspense fallback={<Placeholder />}>\n <LottieLoadingDotsSpinner color={resolvedColor} />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","Object","assign","ref","clsx","styles.container","children","Suspense","fallback"],"mappings":"~~umBAQA~~,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,MAyCIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,yCAxCQC,QAAAF,UAC/BA,EAASG,MACTA,GAAKD,EACFE,EAAUC,EAAAA,OAAAH,EAHkB,uBAK/B,MAAMI,EAAeC,EAAAA,OAAuB,OACrCC,EAAeC,GAAoBC,EAAAA,cACtCC,GAmBJ,OAhBAC,EAAAA,cAAcN,EAAc,CACxB,CAACO,EAAAA,OAAcC,gBACXX,GAASY,EAAAA,eAAeC,UAAU,iCAG1CC,EAAAA,WAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAAA,OAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAJ,EAAAA,IAAA,MAAAyB,OAAAC,OAAA,CACIC,IAAKpB,GACDF,EAAU,CACdJ,UAAW2B,EAAAA,QAAKC,EAAAA,UAAkB5B,GAAU6B,SAE5C9B,EAAAA,IAAC+B,EAAAA,UAASC,SAAUhC,EAAAA,IAACD,MAAc+B,SAC/B9B,EAAAA,IAACN,EAAwB,CAACU,MAAOK,QAEnC"}
1	+ {"version":3,"file":"loading-dots-spinner.js","sources":["../../../../src/animations/loading-dots-spinner/loading-dots-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ComponentToken, useApplyStyle } from \"../../theme\";\nimport type { CustomisableAnimationProps } from \"../types\";\nimport * as styles from \"./loading-dots-spinner.styles\";\n\n// lazy load to fix next.js SSR errors\nconst LottieLoadingDotsSpinner = lazy(async () => ({\n default: (await import(\"./lottie-animation\")).LottieLoadingDotsSpinner,\n}));\n\nexport const LoadingDotsSpinner = ({\n className,\n color,\n ...otherProps\n}: CustomisableAnimationProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [resolvedColor, setResolvedColor] = useState<string \| undefined>(\n undefined\n );\n\n useApplyStyle(containerRef, {\n [styles.tokens.containerColor]:\n color \|\| ComponentToken.Animation[\"loading-dots-spinner-colour\"],\n });\n\n useEffect(() => {\n const element = containerRef.current;\n if (!element) return;\n\n const computedColor = getComputedStyle(element)\n .getPropertyValue(styles.tokens.containerColor)\n .trim();\n\n setResolvedColor(computedColor \|\| undefined);\n }, [color]);\n\n return (\n <div\n ref={containerRef}\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <Suspense fallback={<Placeholder />}>\n <LottieLoadingDotsSpinner color={resolvedColor} />\n </Suspense>\n </div>\n );\n};\n\nconst Placeholder = () => {\n return <div className={styles.placeholder} />;\n};\n"],"names":["LottieLoadingDotsSpinner","lazy","__awaiter","default","Promise","Placeholder","_jsx","className","styles.placeholder","_a","color","otherProps","__rest","containerRef","useRef","resolvedColor","setResolvedColor","useState","undefined","useApplyStyle","styles.tokens","containerColor","ComponentToken","Animation","useEffect","element","current","computedColor","getComputedStyle","getPropertyValue","trim","Object","assign","ref","clsx","styles.container","children","Suspense","fallback"],"mappings":"2pBAQA,MAAMA,EAA2BC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CAC9CC,eAAgBC,kDAAO,wBAAoB,KAAGJ,yBAChD,MAyCIK,EAAc,IACTC,EAAAA,WAAKC,UAAWC,EAAAA,yCAxCQC,QAAAF,UAC/BA,EAASG,MACTA,GAAKD,EACFE,EAAUC,EAAAA,OAAAH,EAHkB,uBAK/B,MAAMI,EAAeC,EAAAA,OAAuB,OACrCC,EAAeC,GAAoBC,EAAAA,cACtCC,GAmBJ,OAhBAC,EAAAA,cAAcN,EAAc,CACxB,CAACO,EAAAA,OAAcC,gBACXX,GAASY,EAAAA,eAAeC,UAAU,iCAG1CC,EAAAA,WAAU,KACN,MAAMC,EAAUZ,EAAaa,QAC7B,IAAKD,EAAS,OAEd,MAAME,EAAgBC,iBAAiBH,GAClCI,iBAAiBT,EAAAA,OAAcC,gBAC/BS,OAELd,EAAiBW,QAAiBT,EAAU,GAC7C,CAACR,IAGAJ,EAAAA,IAAA,MAAAyB,OAAAC,OAAA,CACIC,IAAKpB,GACDF,EAAU,CACdJ,UAAW2B,EAAAA,QAAKC,EAAAA,UAAkB5B,GAAU6B,SAE5C9B,EAAAA,IAAC+B,EAAAA,UAASC,SAAUhC,EAAAA,IAACD,MAAc+B,SAC/B9B,EAAAA,IAACN,EAAwB,CAACU,MAAOK,QAEnC"}

package/cjs/badge/badge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),a=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var s=require("../theme/utils/use-apply-styles.js"),i=require("./badge.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(t);const n=new Set(["number","number-with-border","square-number"]);exports.Badge=t=>{var{badgeOffset:u,children:l,className:o,color:c="default",count:f=0,"data-testid":m="badge",variant:v="number"}=t,b=e.__rest(t,["badgeOffset","children","className","color","count","data-testid","variant"]);const h=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(f),p=n.has(v),j=a.useRef(null);return s.useApplyStyle(j,{[i.tokens.wrapper.offsetX]:null==u?void 0:u[0],[i.tokens.wrapper.offsetY]:null==u?void 0:u[1]}),r.jsxs("div",{className:d.default(void 0!==l&&i.badgeOverlay),children:[r.jsx("div",{ref:j,className:d.default(i.badgeWrapper,void 0!==l&&i.badgeWrapperIsOverlay),children:r.jsx("div",Object.assign({"data-testid":m,"data-variant":v,"data-color":c,className:d.default(i.badge,o)},b,{children:p?h:null}))}),l]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),a=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var s=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var u=require("./badge.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(t);const l=new Set(["number","number-with-border","square-number"]);exports.Badge=t=>{var{badgeOffset:i,children:d,className:o,color:c="default",count:m=0,"data-testid":f="badge",variant:p="number"}=t,b=e.__rest(t,["badgeOffset","children","className","color","count","data-testid","variant"]);const h=function(e){return e<=999?e.toString():1e3===e?"1K":"1K+"}(m),v=l.has(p),j=a.useRef(null);return s.useApplyStyle(j,{[u.tokens.wrapper.offsetX]:null==i?void 0:i[0],[u.tokens.wrapper.offsetY]:null==i?void 0:i[1]}),r.jsxs("span",{className:n.default(void 0!==d&&u.badgeOverlay),children:[r.jsx("span",{ref:j,className:n.default(u.badgeWrapper,void 0!==d&&u.badgeWrapperIsOverlay),children:r.jsx("span",Object.assign({"data-testid":f,"data-variant":p,"data-color":c,className:n.default(u.badge,o)},b,{children:v?h:null}))}),d]})};
 //# sourceMappingURL=badge.js.map

package/cjs/badge/badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n if (count <= 999) return count.toString();\n if (count === 1000) return \"1K\";\n return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n \"number\",\n \"number-with-border\",\n \"square-number\",\n]);\n\nexport const Badge = ({\n badgeOffset,\n children,\n className,\n color = \"default\",\n count = 0,\n \"data-testid\": testId = \"badge\",\n variant = \"number\",\n ...otherProps\n}: BadgeProps) => {\n // =============================================================================\n // CONST\n // =============================================================================\n const displayCount = getDisplayCount(count);\n const shouldShowCount = variantsToShowCount.has(variant);\n\n // =============================================================================\n // REFS\n // =============================================================================\n const wrapperRef = useRef<~~HTMLDivElement~~>(null);\n\n useApplyStyle(wrapperRef, {\n [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <~~div~~ className={clsx(children !== undefined && styles.badgeOverlay)}>\n <~~div~~\n ref={wrapperRef}\n className={clsx(\n styles.badgeWrapper,\n children !== undefined && styles.badgeWrapperIsOverlay\n )}\n >\n <~~div~~\n data-testid={testId}\n data-variant={variant}\n data-color={color}\n className={clsx(styles.badge, className)}\n {...otherProps}\n >\n {shouldShowCount ? displayCount : null}\n </~~div~~>\n </~~div~~>\n {children}\n </~~div~~>\n );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"~~+gBAYA~~,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAGkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAxBV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CAoByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,~~OAAuB~~,~~MAU1C~~,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,~~MAAA~~,~~CAAKnB~~,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,~~wBAC3CC~~,EAAAA,IAAA,~~MAAA~~,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,~~MAAAI~~,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,~~IACC~~"}
1	+ {"version":3,"file":"badge.js","sources":["../../../src/badge/badge.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./badge.styles\";\nimport type { BadgeProps, BadgeVariant } from \"./types\";\n\nfunction getDisplayCount(count: number) {\n if (count <= 999) return count.toString();\n if (count === 1000) return \"1K\";\n return \"1K+\";\n}\nconst variantsToShowCount: Set<BadgeVariant> = new Set([\n \"number\",\n \"number-with-border\",\n \"square-number\",\n]);\n\nexport const Badge = ({\n badgeOffset,\n children,\n className,\n color = \"default\",\n count = 0,\n \"data-testid\": testId = \"badge\",\n variant = \"number\",\n ...otherProps\n}: BadgeProps) => {\n // =============================================================================\n // CONST\n // =============================================================================\n const displayCount = getDisplayCount(count);\n const shouldShowCount = variantsToShowCount.has(variant);\n\n // =============================================================================\n // REFS\n // =============================================================================\n const wrapperRef = useRef<HTMLSpanElement>(null);\n\n useApplyStyle(wrapperRef, {\n [styles.tokens.wrapper.offsetX]: badgeOffset?.[0],\n [styles.tokens.wrapper.offsetY]: badgeOffset?.[1],\n });\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <span className={clsx(children !== undefined && styles.badgeOverlay)}>\n <span\n ref={wrapperRef}\n className={clsx(\n styles.badgeWrapper,\n children !== undefined && styles.badgeWrapperIsOverlay\n )}\n >\n <span\n data-testid={testId}\n data-variant={variant}\n data-color={color}\n className={clsx(styles.badge, className)}\n {...otherProps}\n >\n {shouldShowCount ? displayCount : null}\n </span>\n </span>\n {children}\n </span>\n );\n};\n"],"names":["variantsToShowCount","Set","_a","badgeOffset","children","className","color","count","testId","variant","otherProps","__rest","displayCount","toString","getDisplayCount","shouldShowCount","has","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","offsetX","offsetY","_jsxs","clsx","undefined","styles.badgeOverlay","_jsx","ref","styles.badgeWrapper","styles.badgeWrapperIsOverlay","Object","assign","styles.badge"],"mappings":"gkBAYA,MAAMA,EAAyC,IAAIC,IAAI,CACnD,SACA,qBACA,gCAGkBC,IAAA,IAAAC,YAClBA,EAAWC,SACXA,EAAQC,UACRA,EAASC,MACTA,EAAQ,UAASC,MACjBA,EAAQ,EACR,cAAeC,EAAS,QAAOC,QAC/BA,EAAU,UAAQP,EACfQ,EAAUC,SAAAT,EARK,CAAA,cAAA,WAAA,YAAA,QAAA,QAAA,cAAA,YAalB,MAAMU,EAxBV,SAAyBL,GACrB,OAAIA,GAAS,IAAYA,EAAMM,WACjB,MAAVN,EAAuB,KACpB,KACX,CAoByBO,CAAgBP,GAC/BQ,EAAkBf,EAAoBgB,IAAIP,GAK1CQ,EAAaC,EAAAA,OAAwB,MAU3C,OARAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,SAAcC,QAAQC,SAAUnB,aAAW,EAAXA,EAAc,GAC/C,CAACiB,SAAcC,QAAQE,SAAUpB,aAAW,EAAXA,EAAc,KAO/CqB,OAAA,OAAA,CAAMnB,UAAWoB,EAAAA,aAAkBC,IAAbtB,GAA0BuB,EAAAA,wBAC5CC,EAAAA,IAAA,OAAA,CACIC,IAAKZ,EACLZ,UAAWoB,UACPK,EAAAA,kBACaJ,IAAbtB,GAA0B2B,EAAAA,uBAC7B3B,SAEDwB,EAAAA,IAAA,OAAAI,OAAAC,OAAA,CAAA,cACiBzB,EAAM,eACLC,EAAO,aACTH,EACZD,UAAWoB,EAAAA,QAAKS,EAAAA,MAAc7B,IAC1BK,EAAU,CAAAN,SAEbW,EAAkBH,EAAe,UAGzCR,IACE"}