npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.6 → 4.0.0-alpha.8 - Mend

@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.8

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

package/shared/dropdown-wrapper/element-with-dropdown.d.ts CHANGED Viewed

@@ -10,9 +10,10 @@ export interface DropdownRenderProps {
 interface ElementWithDropdownProps {
     enabled: boolean;
     isOpen: boolean;
-    onOpen?: () => void | undefined;
-    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;
-    onDismiss?: () => void | undefined;
+    onOpen?: (() => void) | undefined;
+    onClose?: ((reason: OpenChangeReason | undefined) => void) | undefined;
+    onDismiss?: (() => void) | undefined;
+    onHide?: (() => void) | undefined;
     renderElement: () => React.ReactNode;
     renderDropdown: (props: DropdownRenderProps) => React.ReactNode;
     customZIndex?: number | undefined;
@@ -62,5 +63,5 @@ export declare const useDropdownRender: () => DropdownRenderProps;
  * })
  * ```
  */
-export declare const ElementWithDropdown: ({ enabled, isOpen, onOpen, onClose, onDismiss, renderElement, renderDropdown, customZIndex, clickToToggle, offset: dropdownOffset, alignment, fitAvailableHeight, rootNode, positionRef, }: ElementWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementWithDropdown: ({ enabled, isOpen, onOpen, onClose, onDismiss, onHide, renderElement, renderDropdown, customZIndex, clickToToggle, offset: dropdownOffset, alignment, fitAvailableHeight, rootNode, positionRef, }: ElementWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/shared/dropdown-wrapper/element-with-dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useFloating as o,autoUpdate as n,offset as r,flip as l,shift as s,limitShift as a,size as m,useTransitionStyles as d,useClick as p,useDismiss as c,useInteractions as g,FloatingPortal as h,FloatingFocusManager as f}from"@floating-ui/react";import{createContext as u,useContext as j,useRef as y}from"react";import{useResizeDetector as b}from"../../external/react-resize-detector/build/index.esm.js";import{useFloatingChild as x}from"../../overlay/use-floating-context.js";import"../../theme/theme-provider/index.js";import{useInheritedThemeScope as v}from"../../theme/theme-provider/hooks.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as w}from"../../theme/utils/use-media-query.js";import{tokens as k}from"./element-with-dropdown.styles.js";const F=e=>"right"===e?"bottom-end":"bottom-start",O=u({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})}),P=()=>j(O),H=({enabled:u,isOpen:j,onOpen:P,onClose:H,onDismiss:R,renderElement:W,renderDropdown:M,customZIndex:q,clickToToggle:z=!1,offset:C=0,alignment:D="left",fitAvailableHeight:E,rootNode:I,positionRef:S})=>{var T;const A=w("sm"),N=y(null),{width:Z=0}=b({targetRef:null!=S?S:N,handleHeight:!1}),$={name:"center",fn:({x:e,rects:t})=>({x:(0===e||e+t.floating.width===window.innerWidth)&&A?(window.innerWidth-t.floating.width)/2:e})},{refs:B,floatingStyles:G,context:J}=o({open:j,onOpenChange:(e,t,i)=>{"escape-key"===i?null==R||R():e&&!j?null==P||P():!e&&j&&(null==H||H(i))},whileElementsMounted:n,placement:F(D),middleware:[r(C),l(),s({limiter:a()}),m({apply({availableHeight:e,elements:t}){!E||e>=t.floating.scrollHeight?t.floating.style.setProperty(k.availableHeight,""):t.floating.style.setProperty(k.availableHeight,`${Math.max(0,e)}px`)}}),$]}),K=x(),{isMounted:L,styles:Q}=d(J,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:U,themeStyle:V}=v(L),X=p(J,{enabled:u,toggle:z,keyboardHandlers:z}),Y=c(J,{enabled:u}),{getReferenceProps:_,getFloatingProps:ee}=g([X,Y]),te={elementWidth:Z,styles:Object.assign(Object.assign(Object.assign({},Q),G),{zIndex:null!==(T=null!=q?q:K)&&void 0!==T?T:50}),setFloatingRef:B.setFloating,getFloatingProps:ee};return e(t,{children:[i("div",Object.assign({ref:e=>{N.current=e,B.setReference(e)}},_(),{children:W()})),L&&i(h,{root:I,children:i(f,{context:J,modal:!1,initialFocus:-1,returnFocus:!1,children:i(O.Provider,{value:te,children:i("div",Object.assign({},U,{style:V,children:M(te)}))})})})]})};export{O as DropdownRenderContext,H as ElementWithDropdown,P as useDropdownRender};
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useFloating as o,autoUpdate as n,offset as r,flip as l,shift as s,limitShift as a,size as m,useTransitionStyles as d,useClick as p,useDismiss as c,useInteractions as g,FloatingPortal as h,FloatingFocusManager as u}from"@floating-ui/react";import{createContext as f,useContext as j,useRef as y,useEffect as b}from"react";import{useResizeDetector as v}from"../../external/react-resize-detector/build/index.esm.js";import{useFloatingChild as x}from"../../overlay/use-floating-context.js";import"../../theme/theme-provider/index.js";import{useInheritedThemeScope as w}from"../../theme/theme-provider/hooks.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as k}from"../../util/use-event.js";import{usePrevious as F}from"../../util/use-previous.js";import{useMaxWidthMediaQuery as H}from"../../theme/utils/use-media-query.js";import{tokens as O}from"./element-with-dropdown.styles.js";const P=e=>"right"===e?"bottom-end":"bottom-start",R=f({elementWidth:0,styles:{},setFloatingRef:()=>{},getFloatingProps:()=>({})}),W=()=>j(R),M=({enabled:f,isOpen:j,onOpen:W,onClose:M,onDismiss:q,onHide:z,renderElement:C,renderDropdown:D,customZIndex:E,clickToToggle:I=!1,offset:S=0,alignment:T="left",fitAvailableHeight:A,rootNode:N,positionRef:Z})=>{var $;const B=H("sm"),G=y(null),{width:J=0}=v({targetRef:null!=Z?Z:G,handleHeight:!1}),K={name:"center",fn:({x:e,rects:t})=>({x:(0===e||e+t.floating.width===window.innerWidth)&&B?(window.innerWidth-t.floating.width)/2:e})},{refs:L,floatingStyles:Q,context:U}=o({open:j,onOpenChange:(e,t,i)=>{"escape-key"===i?null==q||q():e&&!j?null==W||W():!e&&j&&(null==M||M(i))},whileElementsMounted:n,placement:P(T),middleware:[r(S),l(),s({limiter:a()}),m({apply({availableHeight:e,elements:t}){!A||e>=t.floating.scrollHeight?t.floating.style.setProperty(O.availableHeight,""):t.floating.style.setProperty(O.availableHeight,`${Math.max(0,e)}px`)}}),K]}),V=x(),{isMounted:X,styles:Y}=d(U,{initial:{opacity:0},open:{opacity:1},duration:300}),{themeProps:_,themeStyle:ee}=w(X),te=p(U,{enabled:f,toggle:I,keyboardHandlers:I}),ie=c(U,{enabled:f}),{getReferenceProps:oe,getFloatingProps:ne}=g([te,ie]),re=F(X),le=k((()=>null==z?void 0:z()));b((()=>{re&&!X&&le()}),[re,X,le]);const se={elementWidth:J,styles:Object.assign(Object.assign(Object.assign({},Y),Q),{zIndex:null!==($=null!=E?E:V)&&void 0!==$?$:50}),setFloatingRef:L.setFloating,getFloatingProps:ne};return e(t,{children:[i("div",Object.assign({ref:e=>{G.current=e,L.setReference(e)}},oe(),{children:C()})),X&&i(h,{root:N,children:i(u,{context:U,modal:!1,initialFocus:-1,returnFocus:!1,children:i(R.Provider,{value:se,children:i("div",Object.assign({},_,{style:ee,children:D(se)}))})})})]})};export{R as DropdownRenderContext,M as ElementWithDropdown,W as useDropdownRender};
 //# sourceMappingURL=element-with-dropdown.js.map

package/shared/dropdown-wrapper/element-with-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element-with-dropdown.js","sources":["../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n Middleware,\n OpenChangeReason,\n Placement,\n} from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n limitShift,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../../theme\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n elementWidth: number;\n styles: CSSProperties;\n setFloatingRef: (node: HTMLElement \| null) => void;\n getFloatingProps: (\n userProps?: React.HTMLProps<HTMLElement>\n ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n enabled: boolean;\n isOpen: boolean;\n onOpen?: () => void \| undefined;\n onClose?: (reason: OpenChangeReason \| undefined) => void \| undefined;\n onDismiss?: () => void \| undefined;\n renderElement: () => React.ReactNode;\n renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n customZIndex?: number \| undefined;\n clickToToggle?: boolean \| undefined;\n /* the distance between the reference element and the dropdown /\n offset?: number \| undefined;\n / the alignment of the dropdown to the left or right of the reference element /\n alignment?: DropdownAlignmentType \| undefined;\n fitAvailableHeight?: boolean \| undefined;\n /\n The root element that contains the popover element. Defaults to the document body.\n \n If the parent that contains the trigger element has a higher z-index than the popover,\n * the popover may not be visible. Specify the parent element here instead\n /\n rootNode?: RefObject<HTMLElement> \| undefined;\n /* If set, the `elementWidth` refers to this instead of the reference element /\n positionRef?: RefObject<HTMLElement> \| undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n switch (alignment) {\n case \"right\":\n return \"bottom-end\";\n case \"left\":\n default:\n return \"bottom-start\";\n }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n elementWidth: 0,\n styles: {},\n setFloatingRef: () => {\n // noop\n },\n getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n return useContext(DropdownRenderContext);\n};\n\n/\n A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n \n Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n * `max-height: min(100px, var(--available-height, infinity * 1px))`\n \n Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n * ref={setFloatingRef}\n * style={styles}\n * {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n \n If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n * onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n enabled,\n isOpen,\n onOpen,\n onClose,\n onDismiss,\n renderElement,\n renderDropdown,\n customZIndex,\n clickToToggle = false,\n offset: dropdownOffset = 0,\n alignment = \"left\",\n fitAvailableHeight,\n rootNode,\n positionRef,\n}: ElementWithDropdownProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const elementRef = useRef<HTMLDivElement \| null>(null);\n const { width: referenceWidth = 0 } = useResizeDetector({\n targetRef: positionRef ?? elementRef,\n handleHeight: false,\n });\n const center: Middleware = {\n name: \"center\",\n fn: ({ x, rects }) => {\n const noGapInBetween =\n x === 0 \|\| x + rects.floating.width === window.innerWidth;\n return {\n x:\n noGapInBetween && isMobile\n ? (window.innerWidth - rects.floating.width) / 2\n : x,\n };\n },\n };\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: (open, _event, reason) => {\n if (reason === \"escape-key\") {\n onDismiss?.();\n } else if (open && !isOpen) {\n onOpen?.();\n } else if (!open && isOpen) {\n onClose?.(reason);\n }\n },\n whileElementsMounted: autoUpdate,\n placement: getFloatingPlacement(alignment),\n middleware: [\n offset(dropdownOffset),\n flip(),\n shift({\n limiter: limitShift(),\n }),\n size({\n // shrink to fit available vertical space\n apply({ availableHeight, elements }) {\n if (\n !fitAvailableHeight \|\|\n availableHeight >= elements.floating.scrollHeight\n ) {\n // reset this so that dropdown can expand as needed\n elements.floating.style.setProperty(\n elementWithDropdownStyles.tokens.availableHeight,\n \"\"\n );\n return;\n }\n\n elements.floating.style.setProperty(\n elementWithDropdownStyles.tokens.availableHeight,\n `${Math.max(0, availableHeight)}px`\n );\n },\n }),\n center,\n ],\n });\n const parentZIndex = useFloatingChild();\n\n const { isMounted, styles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n duration: 300,\n });\n const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n const click = useClick(context, {\n enabled,\n toggle: clickToToggle,\n keyboardHandlers: clickToToggle,\n });\n const dismiss = useDismiss(context, { enabled });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n click,\n dismiss,\n ]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const dropdownRenderProps = {\n elementWidth: referenceWidth,\n styles: {\n ...styles,\n ...floatingStyles,\n zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n },\n setFloatingRef: refs.setFloating,\n getFloatingProps,\n };\n\n return (\n <>\n <div\n ref={(node) => {\n elementRef.current = node;\n refs.setReference(node);\n }}\n {...getReferenceProps()}\n >\n {renderElement()}\n </div>\n {isMounted && (\n <FloatingPortal root={rootNode}>\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n returnFocus={false} // leads to focus trap. parent to handle the final focus state\n >\n <DropdownRenderContext.Provider\n value={dropdownRenderProps}\n >\n <div {...themeProps} style={themeStyle}>\n {renderDropdown(dropdownRenderProps)}\n </div>\n </DropdownRenderContext.Provider>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </>\n );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","useDropdownRender","useContext","ElementWithDropdown","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","isMobile","useMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"snCAgEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBpB,YAAY,OACZqB,qBACAC,WACAC,wBAKA,MAAMC,EAAWC,EAAsB,MACjCC,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,CACpDC,UAAWR,QAAAA,EAAeG,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YAGC,CACHD,GAFM,IAANA,GAAWA,EAAIC,EAAMC,SAASV,QAAUW,OAAOC,aAGzBhB,GACXe,OAAOC,WAAaH,EAAMC,SAASV,OAAS,EAC7CQ,MAIhBK,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAY,CAClDC,KAAMlC,EACNmC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAlC,SAAAA,IACO+B,IAASlC,EAChBC,SAAAA,KACQiC,GAAQlC,IAChBE,SAAAA,EAAUmC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWpD,EAAqBC,GAChCoD,WAAY,CACRjC,EAAOC,GACPiC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhBvC,GACDsC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,KAEfC,UAAEA,EAASjE,OAAEA,GAAWkE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAuBP,GAEpDQ,EAAQC,EAASnC,EAAS,CAC5BjC,UACAqE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,EAAUC,EAAWvC,EAAS,CAAEjC,aAEhCyE,kBAAEA,EAAiB7E,iBAAEA,IAAqB8E,EAAgB,CAC5DP,EACAI,IAMEI,GAAsB,CACxBlF,aAAc0B,EACdzB,oDACOA,GACAsC,GAAc,CACjB4C,OAAoC,QAA5BC,EAAAtE,QAAAA,EAAgBkD,SAAY,IAAAoB,EAAAA,EA3JxB,KA6JhBlF,eAAgBoC,EAAK+C,YACrBlF,qBAGJ,OACImF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFpE,EAAWqE,QAAUD,EACrBrD,EAAKuD,aAAaF,EAAK,GAEvBX,IAAmB,CAAAc,SAEtBlF,OAEJsD,GACGqB,EAACQ,EAAc,CAACC,KAAM7E,EAAQ2E,SAC1BP,EAACU,EAAoB,CACjBzD,QAASA,EACT0D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAACzF,EAAsBuG,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEZ,MAAOa,EAAUsB,SACjCjF,EAAeqE,eAMrC"}
1	+ {"version":3,"file":"element-with-dropdown.js","sources":["../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n Middleware,\n OpenChangeReason,\n Placement,\n} from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n limitShift,\n offset,\n shift,\n size,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useEffect, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../../theme\";\nimport { useEvent, usePrevious } from \"../../util\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n elementWidth: number;\n styles: CSSProperties;\n setFloatingRef: (node: HTMLElement \| null) => void;\n getFloatingProps: (\n userProps?: React.HTMLProps<HTMLElement>\n ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n enabled: boolean;\n isOpen: boolean;\n onOpen?: (() => void) \| undefined;\n onClose?: ((reason: OpenChangeReason \| undefined) => void) \| undefined;\n onDismiss?: (() => void) \| undefined;\n onHide?: (() => void) \| undefined;\n renderElement: () => React.ReactNode;\n renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n customZIndex?: number \| undefined;\n clickToToggle?: boolean \| undefined;\n /* the distance between the reference element and the dropdown /\n offset?: number \| undefined;\n / the alignment of the dropdown to the left or right of the reference element /\n alignment?: DropdownAlignmentType \| undefined;\n fitAvailableHeight?: boolean \| undefined;\n /\n The root element that contains the popover element. Defaults to the document body.\n \n If the parent that contains the trigger element has a higher z-index than the popover,\n * the popover may not be visible. Specify the parent element here instead\n /\n rootNode?: RefObject<HTMLElement> \| undefined;\n /* If set, the `elementWidth` refers to this instead of the reference element /\n positionRef?: RefObject<HTMLElement> \| undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n switch (alignment) {\n case \"right\":\n return \"bottom-end\";\n case \"left\":\n default:\n return \"bottom-start\";\n }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n elementWidth: 0,\n styles: {},\n setFloatingRef: () => {\n // noop\n },\n getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n return useContext(DropdownRenderContext);\n};\n\n/\n A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n \n Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n * `max-height: min(100px, var(--available-height, infinity * 1px))`\n \n Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n * ref={setFloatingRef}\n * style={styles}\n * {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n \n If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n * onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n enabled,\n isOpen,\n onOpen,\n onClose,\n onDismiss,\n onHide,\n renderElement,\n renderDropdown,\n customZIndex,\n clickToToggle = false,\n offset: dropdownOffset = 0,\n alignment = \"left\",\n fitAvailableHeight,\n rootNode,\n positionRef,\n}: ElementWithDropdownProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const elementRef = useRef<HTMLDivElement \| null>(null);\n const { width: referenceWidth = 0 } = useResizeDetector({\n targetRef: positionRef ?? elementRef,\n handleHeight: false,\n });\n const center: Middleware = {\n name: \"center\",\n fn: ({ x, rects }) => {\n const noGapInBetween =\n x === 0 \|\| x + rects.floating.width === window.innerWidth;\n return {\n x:\n noGapInBetween && isMobile\n ? (window.innerWidth - rects.floating.width) / 2\n : x,\n };\n },\n };\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: (open, _event, reason) => {\n if (reason === \"escape-key\") {\n onDismiss?.();\n } else if (open && !isOpen) {\n onOpen?.();\n } else if (!open && isOpen) {\n onClose?.(reason);\n }\n },\n whileElementsMounted: autoUpdate,\n placement: getFloatingPlacement(alignment),\n middleware: [\n offset(dropdownOffset),\n flip(),\n shift({\n limiter: limitShift(),\n }),\n size({\n // shrink to fit available vertical space\n apply({ availableHeight, elements }) {\n if (\n !fitAvailableHeight \|\|\n availableHeight >= elements.floating.scrollHeight\n ) {\n // reset this so that dropdown can expand as needed\n elements.floating.style.setProperty(\n elementWithDropdownStyles.tokens.availableHeight,\n \"\"\n );\n return;\n }\n\n elements.floating.style.setProperty(\n elementWithDropdownStyles.tokens.availableHeight,\n `${Math.max(0, availableHeight)}px`\n );\n },\n }),\n center,\n ],\n });\n const parentZIndex = useFloatingChild();\n\n const { isMounted, styles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n duration: 300,\n });\n const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n const click = useClick(context, {\n enabled,\n toggle: clickToToggle,\n keyboardHandlers: clickToToggle,\n });\n const dismiss = useDismiss(context, { enabled });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n click,\n dismiss,\n ]);\n\n // =========================================================================\n // ON HIDE EFFECT\n // =========================================================================\n const prevIsMounted = usePrevious(isMounted);\n const onHideEvent = useEvent(() => onHide?.());\n\n useEffect(() => {\n if (prevIsMounted && !isMounted) {\n onHideEvent();\n }\n }, [prevIsMounted, isMounted, onHideEvent]);\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const dropdownRenderProps = {\n elementWidth: referenceWidth,\n styles: {\n ...styles,\n ...floatingStyles,\n zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n },\n setFloatingRef: refs.setFloating,\n getFloatingProps,\n };\n\n return (\n <>\n <div\n ref={(node) => {\n elementRef.current = node;\n refs.setReference(node);\n }}\n {...getReferenceProps()}\n >\n {renderElement()}\n </div>\n {isMounted && (\n <FloatingPortal root={rootNode}>\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n returnFocus={false} // leads to focus trap. parent to handle the final focus state\n >\n <DropdownRenderContext.Provider\n value={dropdownRenderProps}\n >\n <div {...themeProps} style={themeStyle}>\n {renderDropdown(dropdownRenderProps)}\n </div>\n </DropdownRenderContext.Provider>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </>\n );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","useDropdownRender","useContext","ElementWithDropdown","enabled","isOpen","onOpen","onClose","onDismiss","onHide","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","isMobile","useMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","prevIsMounted","usePrevious","onHideEvent","useEvent","useEffect","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"ivCAkEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,SACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBrB,YAAY,OACZsB,qBACAC,WACAC,wBAKA,MAAMC,EAAWC,EAAsB,MACjCC,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,CACpDC,UAAWR,QAAAA,EAAeG,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YAGC,CACHD,GAFM,IAANA,GAAWA,EAAIC,EAAMC,SAASV,QAAUW,OAAOC,aAGzBhB,GACXe,OAAOC,WAAaH,EAAMC,SAASV,OAAS,EAC7CQ,MAIhBK,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAY,CAClDC,KAAMnC,EACNoC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAnC,SAAAA,IACOgC,IAASnC,EAChBC,SAAAA,KACQkC,GAAQnC,IAChBE,SAAAA,EAAUoC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWrD,EAAqBC,GAChCqD,WAAY,CACRjC,EAAOC,GACPiC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhBvC,GACDsC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,KAEfC,UAAEA,EAASlE,OAAEA,GAAWmE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,IAAeC,EAAuBP,GAEpDQ,GAAQC,EAASnC,EAAS,CAC5BlC,UACAsE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,GAAUC,EAAWvC,EAAS,CAAElC,aAEhC0E,kBAAEA,GAAiB9E,iBAAEA,IAAqB+E,EAAgB,CAC5DP,GACAI,KAMEI,GAAgBC,EAAYjB,GAC5BkB,GAAcC,GAAS,IAAM1E,aAAM,EAANA,MAEnC2E,GAAU,KACFJ,KAAkBhB,GAClBkB,IACJ,GACD,CAACF,GAAehB,EAAWkB,KAK9B,MAAMG,GAAsB,CACxBxF,aAAc2B,EACd1B,oDACOA,GACAuC,GAAc,CACjBiD,OAAoC,QAA5BC,EAAA3E,QAAAA,EAAgBkD,SAAY,IAAAyB,EAAAA,EAxKxB,KA0KhBxF,eAAgBqC,EAAKoD,YACrBxF,qBAGJ,OACIyF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFzE,EAAW0E,QAAUD,EACrB1D,EAAK4D,aAAaF,EAAK,GAEvBhB,KAAmB,CAAAmB,SAEtBvF,OAEJsD,GACG0B,EAACQ,EAAc,CAACC,KAAMlF,EAAQgF,SAC1BP,EAACU,EAAoB,CACjB9D,QAASA,EACT+D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAC/F,EAAsB6G,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASvB,EAAU,CAAEZ,MAAOa,GAAU2B,SACjCtF,EAAe0E,eAMrC"}

package/sidenav/sidenav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidenav.js","sources":["../../src/sidenav/sidenav.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n fixed = true,\n children,\n \"aria-label\": ariaLabel = \"Sidebar\",\n className,\n ...otherProps\n}: SidenavProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const wrapperRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n\n const [currentItem, setCurrentItem] = useState<\n SidenavContextItem \| undefined\n >(undefined);\n const [selectedItem, setSelectedItem] = useState<\n SidenavContextItem \| undefined\n >(undefined);\n const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n string \| undefined\n >(undefined);\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n return (\n <SidenavContext.Provider\n value={{\n internalId,\n menuRef,\n currentItem,\n selectedItem,\n previouslySelectedItemId,\n setCurrentItem,\n setSelectedItem,\n setPreviouslySelectedItemId,\n }}\n >\n <div\n ref={wrapperRef}\n {...otherProps}\n className={clsx(\n styles.wrapper,\n fixed && styles.wrapperFixed,\n className\n )}\n >\n <nav\n ref={menuRef}\n aria-label={ariaLabel}\n className={clsx(\n styles.containerBase,\n styles.desktopContainer\n )}\n >\n {children}\n </nav>\n {/** NOTE: Since mobile view not supported yet, children will not be rendered /}\n <nav\n className={clsx(\n styles.containerBase,\n styles.mobileContainer\n )}\n ></nav>\n </div>\n </SidenavContext.Provider>\n );\n};\n\n/\n A fixed sidebar navigation component for multi-level page navigation.\n \n Use `Sidenav` to present a persistent icon-based navigation rail with\n * optional menu drawers.\n /\nexport const Sidenav = Object.assign(SidenavBase, {\n /* Renders a group of navigation items, optionally separated by a divider. /\n Group: SidenavGroup,\n /* Renders a single icon-and-label navigation entry that can open a menu drawer. /\n Item: SidenavItem,\n /* Renders a menu item inside an item's drawer, with optional collapsible sub-items. /\n DrawerItem: SidenavDrawerItem,\n /* Renders a leaf-level navigation entry inside a `Sidenav.DrawerItem`. */\n DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","className","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","ref","clsx","styles.wrapper","styles.wrapperFixed","styles.containerBase","styles.desktopContainer","styles.mobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"6vBAaA,~~MA6EaA~~,EAAUC,OAAOC,~~QA7ETC~~,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAuB,MACpCC,EAAUD,EAAuB,MACjCE,EAAaC,KAEZC,EAAaC,GAAkBC,OAEpCC,IACKC,EAAcC,GAAmBH,OAEtCC,IACKG,EAA0BC,GAA+BL,OAE9DC,GAKF,OACIK,EAACC,EAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,EAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,EACPC,EACA1B,GAAS2B,EACTxB,GACHF,SAAA,CAEDkB,EAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EACPG,EACAC,GACH5B,SAEAA,IAGLkB,EAAA,MAAA,CACIhB,UAAWsB,EACPG,EACAE,UAIU,~~GAUgB~~,CAE9CC,MAAOC,EAEPC,KAAMC,EAENC,WAAYC,EAEZC,cAAeC"}
1	+ {"version":3,"file":"sidenav.js","sources":["../../src/sidenav/sidenav.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n fixed = true,\n children,\n \"aria-label\": ariaLabel = \"Sidebar\",\n className,\n ...otherProps\n}: SidenavProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const wrapperRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n\n const [currentItem, setCurrentItem] = useState<\n SidenavContextItem \| undefined\n >(undefined);\n const [selectedItem, setSelectedItem] = useState<\n SidenavContextItem \| undefined\n >(undefined);\n const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n string \| undefined\n >(undefined);\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n return (\n <SidenavContext.Provider\n value={{\n internalId,\n menuRef,\n currentItem,\n selectedItem,\n previouslySelectedItemId,\n setCurrentItem,\n setSelectedItem,\n setPreviouslySelectedItemId,\n }}\n >\n <div\n ref={wrapperRef}\n {...otherProps}\n className={clsx(\n styles.wrapper,\n fixed && styles.wrapperFixed,\n className\n )}\n >\n <nav\n ref={menuRef}\n aria-label={ariaLabel}\n className={clsx(\n styles.containerBase,\n styles.desktopContainer\n )}\n >\n {children}\n </nav>\n {/** NOTE: Since mobile view not supported yet, children will not be rendered /}\n <nav\n className={clsx(\n styles.containerBase,\n styles.mobileContainer\n )}\n ></nav>\n </div>\n </SidenavContext.Provider>\n );\n};\n\n// @catalog\n/\n A fixed sidebar navigation component for multi-level page navigation.\n \n Use `Sidenav` to present a persistent icon-based navigation rail with\n * optional menu drawers.\n /\nexport const Sidenav = Object.assign(SidenavBase, {\n /* Renders a group of navigation items, optionally separated by a divider. /\n Group: SidenavGroup,\n /* Renders a single icon-and-label navigation entry that can open a menu drawer. /\n Item: SidenavItem,\n /* Renders a menu item inside an item's drawer, with optional collapsible sub-items. /\n DrawerItem: SidenavDrawerItem,\n /* Renders a leaf-level navigation entry inside a `Sidenav.DrawerItem`. */\n DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","className","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","ref","clsx","styles.wrapper","styles.wrapperFixed","styles.containerBase","styles.desktopContainer","styles.mobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"6vBAaA,MA8EaA,EAAUC,OAAOC,QA9ETC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAuB,MACpCC,EAAUD,EAAuB,MACjCE,EAAaC,KAEZC,EAAaC,GAAkBC,OAEpCC,IACKC,EAAcC,GAAmBH,OAEtCC,IACKG,EAA0BC,GAA+BL,OAE9DC,GAKF,OACIK,EAACC,EAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,EAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,EACPC,EACA1B,GAAS2B,EACTxB,GACHF,SAAA,CAEDkB,EAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EACPG,EACAC,GACH5B,SAEAA,IAGLkB,EAAA,MAAA,CACIhB,UAAWsB,EACPG,EACAE,UAIU,GAWgB,CAE9CC,MAAOC,EAEPC,KAAMC,EAENC,WAAYC,EAEZC,cAAeC"}

package/sidenav/types.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ interface SidenavBaseProps {
 }
 /**
  * Props for the `Sidenav` component.
+ *
  */
 export interface SidenavProps extends SidenavBaseProps {
     /**

package/singpass-button/singpass-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"singpass-button.js","sources":["../../src/singpass-button/singpass-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { getSpLogo } from \"./singpass-assets\";\nimport * as styles from \"./singpass-button.styles\";\nimport type {\n SingpassButtonProps,\n SingpassButtonRef,\n SingpassButtonSizeType,\n SingpassButtonStyleType,\n} from \"./types\";\n\nconst styleClassMap: Record<SingpassButtonStyleType, string> = {\n \"red-filled\": styles.mainStyleRedFilled,\n \"white-filled\": styles.mainStyleWhiteFilled,\n};\n\nconst sizeClassMap: Record<SingpassButtonSizeType, string> = {\n small: styles.mainSizeSmall,\n large: styles.mainSizeLarge,\n default: \"\",\n};\n\nconst Component = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n const {\n styleType = \"white-filled\",\n sizeType = \"default\",\n className,\n \"data-testid\": testId = \"singpass-button\",\n ...otherProps\n } = props;\n\n return (\n <button\n ref={ref}\n data-testid={testId}\n {...otherProps}\n aria-label=\"Log in with Singpass\"\n className={clsx(\n styles.main,\n sizeClassMap[sizeType],\n styleClassMap[styleType],\n className\n )}\n >\n <span\n className={clsx(\n styles.svgContainer,\n sizeType === \"large\" && styles.svgContainerSizeLarge\n )}\n >\n <img src={getSpLogo(styleType)} alt=\"\" />\n </span>\n </button>\n );\n};\n\nconst BaseSingpassButton = forwardRef(Component);\n\nconst DefaultSingpassButtonComponent = (\n props: SingpassButtonProps,\n ref: SingpassButtonRef\n) => (\n <BaseSingpassButton\n {...props}\n sizeType={props.sizeType ?? \"default\"}\n ref={ref}\n />\n);\nDefaultSingpassButtonComponent.displayName = \"SingpassButton.Default\";\n\nconst SmallSingpassButtonComponent = (\n props: SingpassButtonProps,\n ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"small\" ref={ref} />;\nSmallSingpassButtonComponent.displayName = \"SingpassButton.Small\";\n\nconst LargeSingpassButtonComponent = (\n props: SingpassButtonProps,\n ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"large\" ref={ref} />;\nLargeSingpassButtonComponent.displayName = \"SingpassButton.Large\";\n\n/*\n Call-to-action for Singpass authentication,\n * following the brand [guidelines](https://docs.developer.singpass.gov.sg/docs/products/login/singpass-button-guidelines-for-developers-and-designers).\n \n Use `SingpassButton` to let users log in with their Singpass account.\n /\nexport const SingpassButton = Object.assign(BaseSingpassButton, {\n /* @deprecated Use the `sizeType` prop instead: `<SingpassButton>` or `<SingpassButton sizeType=\"default\">` /\n Default: forwardRef(DefaultSingpassButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType=\"small\">` /\n Small: forwardRef(SmallSingpassButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType=\"large\">` */\n Large: forwardRef(LargeSingpassButtonComponent),\n});\n"],"names":["styleClassMap","styles.mainStyleRedFilled","styles.mainStyleWhiteFilled","sizeClassMap","small","styles.mainSizeSmall","large","styles.mainSizeLarge","default","BaseSingpassButton","forwardRef","props","ref","styleType","sizeType","className","testId","otherProps","__rest","_jsx","Object","assign","clsx","styles.main","children","styles.svgContainer","styles.svgContainerSizeLarge","src","getSpLogo","alt","DefaultSingpassButtonComponent","_a","displayName","SmallSingpassButtonComponent","LargeSingpassButtonComponent","SingpassButton","Default","Small","Large"],"mappings":"uXAYA,MAAMA,EAAyD,CAC3D,aAAcC,EACd,eAAgBC,GAGdC,EAAuD,CACzDC,MAAOC,EACPC,MAAOC,EACPC,QAAS,IAqCPC,EAAqBC,GAlCT,CAACC,EAA4BC,KAC3C,MAAMC,UACFA,EAAY,eAAcC,SAC1BA,EAAW,UAASC,UACpBA,EACA,cAAeC,EAAS,mBAExBL,EADGM,EAAUC,EACbP,EANE,CAAA,YAAA,WAAA,YAAA,gBAQN,OACIQ,EAAA,SAAAC,OAAAC,OAAA,CACIT,IAAKA,EAAG,cACKI,GACTC,EAAU,CAAA,aACH,uBACXF,UAAWO,EACPC,EACApB,EAAaW,GACbd,EAAca,GACdE,GACHS,SAEDL,EAAA,OAAA,CACIJ,UAAWO,EACPG,EACa,UAAbX,GAAwBY,GAC3BF,SAEDL,EAAA,MAAA,CAAKQ,IAAKC,EAAUf,GAAYgB,IAAI,SAEnC,IAMXC,EAAiC,CACnCnB,EACAC,WACC,OACDO,EAACV,EAAkBW,OAAAC,OAAA,CAAA,EACXV,EAAK,CACTG,SAAwB,QAAdiB,EAAApB,EAAMG,gBAAQ,IAAAiB,EAAAA,EAAI,UAC5BnB,IAAKA,IACP,EAENkB,EAA+BE,YAAc,yBAE7C,MAAMC,EAA+B,CACjCtB,EACAC,IACCO,EAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DqB,EAA6BD,YAAc,uBAE3C,MAAME,EAA+B,CACjCvB,EACAC,IACCO,EAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DsB,EAA6BF,YAAc,~~6BAQ9BG~~,EAAiBf,OAAOC,OAAOZ,EAAoB,CAE5D2B,QAAS1B,EAAWoB,GAEpBO,MAAO3B,EAAWuB,GAElBK,MAAO5B,EAAWwB"}
1	+ {"version":3,"file":"singpass-button.js","sources":["../../src/singpass-button/singpass-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport { getSpLogo } from \"./singpass-assets\";\nimport * as styles from \"./singpass-button.styles\";\nimport type {\n SingpassButtonProps,\n SingpassButtonRef,\n SingpassButtonSizeType,\n SingpassButtonStyleType,\n} from \"./types\";\n\nconst styleClassMap: Record<SingpassButtonStyleType, string> = {\n \"red-filled\": styles.mainStyleRedFilled,\n \"white-filled\": styles.mainStyleWhiteFilled,\n};\n\nconst sizeClassMap: Record<SingpassButtonSizeType, string> = {\n small: styles.mainSizeSmall,\n large: styles.mainSizeLarge,\n default: \"\",\n};\n\nconst Component = (props: SingpassButtonProps, ref: SingpassButtonRef) => {\n const {\n styleType = \"white-filled\",\n sizeType = \"default\",\n className,\n \"data-testid\": testId = \"singpass-button\",\n ...otherProps\n } = props;\n\n return (\n <button\n ref={ref}\n data-testid={testId}\n {...otherProps}\n aria-label=\"Log in with Singpass\"\n className={clsx(\n styles.main,\n sizeClassMap[sizeType],\n styleClassMap[styleType],\n className\n )}\n >\n <span\n className={clsx(\n styles.svgContainer,\n sizeType === \"large\" && styles.svgContainerSizeLarge\n )}\n >\n <img src={getSpLogo(styleType)} alt=\"\" />\n </span>\n </button>\n );\n};\n\nconst BaseSingpassButton = forwardRef(Component);\n\nconst DefaultSingpassButtonComponent = (\n props: SingpassButtonProps,\n ref: SingpassButtonRef\n) => (\n <BaseSingpassButton\n {...props}\n sizeType={props.sizeType ?? \"default\"}\n ref={ref}\n />\n);\nDefaultSingpassButtonComponent.displayName = \"SingpassButton.Default\";\n\nconst SmallSingpassButtonComponent = (\n props: SingpassButtonProps,\n ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"small\" ref={ref} />;\nSmallSingpassButtonComponent.displayName = \"SingpassButton.Small\";\n\nconst LargeSingpassButtonComponent = (\n props: SingpassButtonProps,\n ref: SingpassButtonRef\n) => <BaseSingpassButton {...props} sizeType=\"large\" ref={ref} />;\nLargeSingpassButtonComponent.displayName = \"SingpassButton.Large\";\n\n// @catalog\n/*\n Call-to-action for Singpass authentication,\n * following the brand [guidelines](https://docs.developer.singpass.gov.sg/docs/products/login/singpass-button-guidelines-for-developers-and-designers).\n \n Use `SingpassButton` to let users log in with their Singpass account.\n /\nexport const SingpassButton = Object.assign(BaseSingpassButton, {\n /* @deprecated Use the `sizeType` prop instead: `<SingpassButton>` or `<SingpassButton sizeType=\"default\">` /\n Default: forwardRef(DefaultSingpassButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType=\"small\">` /\n Small: forwardRef(SmallSingpassButtonComponent),\n /* @deprecated Use the `sizeType` prop instead: `<SingpassButton sizeType=\"large\">` */\n Large: forwardRef(LargeSingpassButtonComponent),\n});\n"],"names":["styleClassMap","styles.mainStyleRedFilled","styles.mainStyleWhiteFilled","sizeClassMap","small","styles.mainSizeSmall","large","styles.mainSizeLarge","default","BaseSingpassButton","forwardRef","props","ref","styleType","sizeType","className","testId","otherProps","__rest","_jsx","Object","assign","clsx","styles.main","children","styles.svgContainer","styles.svgContainerSizeLarge","src","getSpLogo","alt","DefaultSingpassButtonComponent","_a","displayName","SmallSingpassButtonComponent","LargeSingpassButtonComponent","SingpassButton","Default","Small","Large"],"mappings":"uXAYA,MAAMA,EAAyD,CAC3D,aAAcC,EACd,eAAgBC,GAGdC,EAAuD,CACzDC,MAAOC,EACPC,MAAOC,EACPC,QAAS,IAqCPC,EAAqBC,GAlCT,CAACC,EAA4BC,KAC3C,MAAMC,UACFA,EAAY,eAAcC,SAC1BA,EAAW,UAASC,UACpBA,EACA,cAAeC,EAAS,mBAExBL,EADGM,EAAUC,EACbP,EANE,CAAA,YAAA,WAAA,YAAA,gBAQN,OACIQ,EAAA,SAAAC,OAAAC,OAAA,CACIT,IAAKA,EAAG,cACKI,GACTC,EAAU,CAAA,aACH,uBACXF,UAAWO,EACPC,EACApB,EAAaW,GACbd,EAAca,GACdE,GACHS,SAEDL,EAAA,OAAA,CACIJ,UAAWO,EACPG,EACa,UAAbX,GAAwBY,GAC3BF,SAEDL,EAAA,MAAA,CAAKQ,IAAKC,EAAUf,GAAYgB,IAAI,SAEnC,IAMXC,EAAiC,CACnCnB,EACAC,WACC,OACDO,EAACV,EAAkBW,OAAAC,OAAA,CAAA,EACXV,EAAK,CACTG,SAAwB,QAAdiB,EAAApB,EAAMG,gBAAQ,IAAAiB,EAAAA,EAAI,UAC5BnB,IAAKA,IACP,EAENkB,EAA+BE,YAAc,yBAE7C,MAAMC,EAA+B,CACjCtB,EACAC,IACCO,EAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DqB,EAA6BD,YAAc,uBAE3C,MAAME,EAA+B,CACjCvB,EACAC,IACCO,EAACV,mBAAuBE,EAAK,CAAEG,SAAS,QAAQF,IAAKA,KAC1DsB,EAA6BF,YAAc,6BAS9BG,EAAiBf,OAAOC,OAAOZ,EAAoB,CAE5D2B,QAAS1B,EAAWoB,GAEpBO,MAAO3B,EAAWuB,GAElBK,MAAO5B,EAAWwB"}

package/singpass-button/singpass-button.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./singpass-button.styles_1miyex3.css";const s="m18jjb1",m="m6wtgnj",t="mijymjd",n="m1y6qkg6",p="mmpvnp1",i="s1mju8fq",j="sreiq2p";export{s as main,t as mainSizeLarge,m as mainSizeSmall,n as mainStyleRedFilled,p as mainStyleWhiteFilled,i as svgContainer,j as svgContainerSizeLarge};
+import"./singpass-button.styles_1fj2lru.css";const s="m18jjb1",m="m6wtgnj",t="mijymjd",j="m1y6qkg6",n="mmpvnp1",p="s1mju8fq",i="sreiq2p";export{s as main,t as mainSizeLarge,m as mainSizeSmall,j as mainStyleRedFilled,n as mainStyleWhiteFilled,p as svgContainer,i as svgContainerSizeLarge};
 //# sourceMappingURL=singpass-button.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"singpass-button.styles.js","sources":["../../src/singpass-button/singpass-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { ComponentToken, Motion, Spacing } from \"../theme\";\n\n// =============================================================================\n// MAIN BUTTON\n// =============================================================================\nexport const main = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n border-radius: ${ComponentToken.Button[\"radius\"]};\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n height: 2.5rem;\n ~~min-height~~: ~~unset~~;\n`;\n\nexport const mainSizeLarge = css`\n min-height: 4rem;\n`;\n\nexport const mainStyleRedFilled = css`\n background-color: #f4333d;\n border: none;\n\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: #b0262d;\n }\n }\n`;\n\nexport const mainStyleWhiteFilled = css`\n background-color: #ffffff;\n border: 1px #c8c9cc solid;\n\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: #f5f5f7;\n }\n }\n`;\n\n// =============================================================================\n// SVG CONTAINER\n// =============================================================================\nexport const svgContainer = css`\n height: 1.5rem;\n\n img {\n height: 100%;\n }\n`;\n\nexport const svgContainerSizeLarge = css`\n height: 2.5rem;\n`;\n"],"names":["main","mainSizeSmall","mainSizeLarge","mainStyleRedFilled","mainStyleWhiteFilled","svgContainer","svgContainerSizeLarge"],"mappings":"4EAOO,MAAMA,EAAI,UAWJC,EAAa,~~UAKbC~~,EAAa,UAIbC,EAAkB,WAYlBC,EAAoB,UAepBC,EAAY,WAQZC,EAAqB"}
1	+ {"version":3,"file":"singpass-button.styles.js","sources":["../../src/singpass-button/singpass-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, ComponentToken, Motion, Spacing } from \"../theme\";\n\n// =============================================================================\n// MAIN BUTTON\n// =============================================================================\nexport const main = css`\n padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-16\"]};\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n border-radius: ${ComponentToken.Button[\"radius\"]};\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 3rem;\n`;\n\nexport const mainSizeSmall = css`\n min-height: 2.5rem;\n padding: calc(${Spacing[\"spacing-8\"]} - ${Border[\"width-010\"]})\n ${Spacing[\"spacing-16\"]};\n`;\n\nexport const mainSizeLarge = css`\n min-height: 4rem;\n`;\n\nexport const mainStyleRedFilled = css`\n background-color: #f4333d;\n border: none;\n\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: #b0262d;\n }\n }\n`;\n\nexport const mainStyleWhiteFilled = css`\n background-color: #ffffff;\n border: 1px #c8c9cc solid;\n\n &:hover,\n &:active {\n @media (pointer: fine) {\n background-color: #f5f5f7;\n }\n }\n`;\n\n// =============================================================================\n// SVG CONTAINER\n// =============================================================================\nexport const svgContainer = css`\n height: 1.5rem;\n\n img {\n height: 100%;\n }\n`;\n\nexport const svgContainerSizeLarge = css`\n height: 2.5rem;\n`;\n"],"names":["main","mainSizeSmall","mainSizeLarge","mainStyleRedFilled","mainStyleWhiteFilled","svgContainer","svgContainerSizeLarge"],"mappings":"4EAOO,MAAMA,EAAI,UAWJC,EAAa,UAMbC,EAAa,UAIbC,EAAkB,WAYlBC,EAAoB,UAepBC,EAAY,WAQZC,EAAqB"}

package/singpass-button/{singpass-button.styles_1miyex3.css → singpass-button.styles_1fj2lru.css} RENAMED Viewed

@@ -1,5 +1,5 @@
 @layer fds{.m18jjb1{padding:var(--fds-spacing-8) var(--fds-spacing-16);-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);border-radius:var(--fds-button-radius);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;min-height:3rem;}
-.m6wtgnj{height:2.5rem;min-height:unset;}
+.m6wtgnj{min-height:2.5rem;padding:calc(var(--fds-spacing-8) - var(--fds-border-width-010)) var(--fds-spacing-16);}
 .mijymjd{min-height:4rem;}
 .m1y6qkg6{background-color:#f4333d;border:none;}@media (pointer: fine){.m1y6qkg6:hover,.m1y6qkg6:active{background-color:#b0262d;}}
 .mmpvnp1{background-color:#ffffff;border:1px #c8c9cc solid;}@media (pointer: fine){.mmpvnp1:hover,.mmpvnp1:active{background-color:#f5f5f7;}}

package/smart-app-banner/smart-app-banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"smart-app-banner.js","sources":["../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport clsx from \"clsx\";\nimport React, { useContext, useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n props: SmartAppBannerProps,\n ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n show,\n href,\n content,\n offset = 0,\n icon = APP_ICON,\n animated = false,\n onDismiss,\n onClick,\n } = props;\n\n const {\n title,\n message,\n buttonLabel,\n iconAriaLabel,\n buttonAriaLabel,\n numberOfStars,\n } = content;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const theme = useContext(ThemeContext);\n const isDark = theme?.mode === \"dark\";\n\n useApplyStyle(containerRef, {\n [styles.tokens.container.top]: `${offset}px`,\n });\n\n const ariaLabels = {\n dismiss: \"Close banner\",\n icon: iconAriaLabel ?? \"\",\n cta: buttonAriaLabel ?? buttonLabel,\n };\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClick = (\n e: React.MouseEvent<HTMLDivElement \| HTMLButtonElement>\n ) => {\n e.stopPropagation();\n window.open(href, \"_blank\", \"noreferrer\");\n onClick?.();\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const generateStarRating = () => {\n if (isNaN(numberOfStars) \|\| numberOfStars < 0) {\n return;\n }\n\n const stars = [];\n const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n for (let i = 0; i < Math.floor(numberOfStars); i++) {\n stars.push(\n <StarFillIcon\n key={`star${i}`}\n aria-hidden\n className={styles.starIcon}\n />\n );\n }\n if (hasHalfStar) {\n stars.push(\n <StarHalfIcon\n key={`halfstar`}\n aria-hidden\n className={styles.starIcon}\n />\n );\n }\n if (stars.length < MAX_STARS) {\n const remaining = 5 - stars.length;\n for (let i = 0; i < remaining; i++) {\n stars.push(\n <StarIcon\n key={`emptystar${i}`}\n aria-hidden\n className={styles.starIcon}\n />\n );\n }\n }\n\n /* maximum of 5 stars /\n return (\n <div\n className={styles.ratingContainer}\n role=\"group\"\n aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n data-testid={`${ID}-star-rating`}\n >\n {stars.slice(0, MAX_STARS)}\n </div>\n );\n };\n\n return (\n <>\n {show && (\n <div\n ref={mergeRefs(containerRef, ref)}\n data-testid={ID}\n className={clsx(\n styles.smartAppBannerContainer,\n isDark\n ? styles.smartAppBannerContainerDark\n : styles.smartAppBannerContainerLight,\n animated && styles.smartAppBannerContainerAnimated,\n className\n )}\n >\n <div\n className={styles.proceedContainer}\n onClick={handleClick}\n id={`${ID}-proceed`}\n data-testid={`${ID}-proceed-container`}\n >\n <img\n className={styles.bannerIcon}\n src={icon}\n alt={ariaLabels.icon}\n />\n <div className={styles.textContainer}>\n <Typography.BodySM className={styles.title}>\n {title}\n </Typography.BodySM>\n <Typography.BodyXS className={styles.description}>\n {message}\n </Typography.BodyXS>\n {generateStarRating()}\n </div>\n <div className={styles.buttonContainer}>\n <Button\n className={styles.button}\n type=\"button\"\n onClick={handleClick}\n aria-label={ariaLabels.cta}\n sizeType=\"small\"\n >\n {buttonLabel}\n </Button>\n </div>\n </div>\n <div\n className={styles.dismissContainer}\n onClick={onDismiss}\n id={`${ID}-dismiss`}\n data-testid={`${ID}-dismiss-container`}\n >\n <ClickableIcon\n className={styles.dismissButton}\n aria-label={ariaLabels.dismiss}\n >\n <CrossIcon className={styles.cross} />\n </ClickableIcon>\n </div>\n </div>\n )}\n </>\n );\n}\n\n/\n A fixed top banner that promotes a mobile app and links to its store listing.\n \n Use `SmartAppBanner` to invite users to install or open the native app.\n */\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","containerRef","useRef","theme","useContext","ThemeContext","isDark","mode","useApplyStyle","styles.tokens","container","top","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","mergeRefs","clsx","styles.smartAppBannerContainer","styles.smartAppBannerContainerDark","styles.smartAppBannerContainerLight","styles.smartAppBannerContainerAnimated","styles.proceedContainer","id","styles.bannerIcon","src","alt","styles.textContainer","Typography","BodySM","styles.title","BodyXS","styles.description","isNaN","stars","hasHalfStar","Math","floor","i","push","StarFillIcon","styles.starIcon","StarHalfIcon","length","remaining","StarIcon","styles.ratingContainer","role","slice","generateStarRating","styles.buttonContainer","Button","styles.button","type","sizeType","styles.dismissContainer","ClickableIcon","styles.dismissButton","CrossIcon","styles.cross"],"mappings":"w+CAgBA,MAAMA,EACF,2EAEEC,EAAK,mBAsLJ,MAAMC,EAAiBC,EAAMC,YAnLpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAeC,EAAuB,MACtCC,EAAQC,EAAWC,GACnBC,GAAyB,UAAhBH,aAAK,EAALA,EAAOI,MAEtBC,EAAcP,EAAc,CACxB,CAACQ,EAAcC,UAAUC,KAAM,GAAGrB,QAGtC,MAAMsB,GAAa,CACfC,QAAS,eACTtB,KAAMO,QAAAA,EAAiB,GACvBgB,IAAKf,QAAAA,EAAmBF,GAKtBkB,GACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAK/B,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EA2Df,OACI0B,EAAAC,EAAA,CAAAC,SACKnC,GACGoC,SACItC,IAAKuC,EAAUvB,EAAchB,GAAI,cACpBL,EACbM,UAAWuC,EACPC,EACApB,GACMqB,EACAC,EACNpC,GAAYqC,EACZ3C,GACHoC,SAAA,CAEDC,SACIrC,UAAW4C,EACXpC,QAASqB,GACTgB,GAAI,GAAGnD,YAAY,cACN,GAAGA,gCAEhBwC,EAAA,MAAA,CACIlC,UAAW8C,EACXC,IAAK1C,EACL2C,IAAKtB,GAAWrB,OAEpBgC,EAAA,MAAA,CAAKrC,UAAWiD,EAAoBb,SAAA,CAChCF,EAACgB,EAAWC,OAAM,CAACnD,UAAWoD,EAAYhB,SACrC3B,IAELyB,EAACgB,EAAWG,OAAM,CAACrD,UAAWsD,EAAkBlB,SAC3C1B,IAnFF,MACvB,GAAI6C,MAAMzC,IAAkBA,EAAgB,EACxC,OAGJ,MAAM0C,EAAQ,GACRC,EAAc3C,EAAgB4C,KAAKC,MAAM7C,IAAkB,GAEjE,IAAK,IAAI8C,EAAI,EAAGA,EAAIF,KAAKC,MAAM7C,GAAgB8C,IAC3CJ,EAAMK,KACF3B,EAAC4B,oBAGG9D,UAAW+D,GAFN,OAAOH,MAexB,GATIH,GACAD,EAAMK,KACF3B,EAAC8B,EAAY,CAAA,eAAA,EAGThE,UAAW+D,GAFN,aAMbP,EAAMS,OApFA,EAoFoB,CAC1B,MAAMC,EAAY,EAAIV,EAAMS,OAC5B,IAAK,IAAIL,EAAI,EAAGA,EAAIM,EAAWN,IAC3BJ,EAAMK,KACF3B,EAACiC,oBAGGnE,UAAW+D,GAFN,YAAYH,KAMjC,CAGA,OACI1B,EAAA,MAAA,CACIlC,UAAWoE,EACXC,KAAK,QAAO,aACA,eAAevD,mBAAyC,cACvD,GAAGpB,gBAAgB0C,SAE/BoB,EAAMc,MAAM,EAzGX,IA0GA,EAqCWC,MAELrC,EAAA,MAAA,CAAKlC,UAAWwE,EAAsBpC,SAClCF,EAACuC,EAAM,CACHzE,UAAW0E,EACXC,KAAK,SACLnE,QAASqB,GAAW,aACRH,GAAWE,IACvBgD,SAAS,QAAOxC,SAEfzB,SAIbuB,EAAA,MAAA,CACIlC,UAAW6E,EACXrE,QAASD,EACTsC,GAAI,GAAGnD,0BACM,GAAGA,sBAAsB0C,SAEtCF,EAAC4C,EAAa,CACV9E,UAAW+E,EAAoB,aACnBrD,GAAWC,iBAEvBO,EAAC8C,GAAUhF,UAAWiF,YAOlD"}
1	+ {"version":3,"file":"smart-app-banner.js","sources":["../../src/smart-app-banner/smart-app-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { StarIcon } from \"@lifesg/react-icons/star\";\nimport { StarFillIcon } from \"@lifesg/react-icons/star-fill\";\nimport { StarHalfIcon } from \"@lifesg/react-icons/star-half\";\nimport clsx from \"clsx\";\nimport React, { useContext, useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./smart-app-banner.styles\";\nimport type { SmartAppBannerProps } from \"./types\";\n\nconst APP_ICON =\n \"https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png\";\n\nconst ID = \"smart-app-banner\";\nconst MAX_STARS = 5;\n\nfunction SmartAppBannerComponent(\n props: SmartAppBannerProps,\n ref: React.Ref<HTMLDivElement>\n): JSX.Element {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n className,\n show,\n href,\n content,\n offset = 0,\n icon = APP_ICON,\n animated = false,\n onDismiss,\n onClick,\n } = props;\n\n const {\n title,\n message,\n buttonLabel,\n iconAriaLabel,\n buttonAriaLabel,\n numberOfStars,\n } = content;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const theme = useContext(ThemeContext);\n const isDark = theme?.mode === \"dark\";\n\n useApplyStyle(containerRef, {\n [styles.tokens.container.top]: `${offset}px`,\n });\n\n const ariaLabels = {\n dismiss: \"Close banner\",\n icon: iconAriaLabel ?? \"\",\n cta: buttonAriaLabel ?? buttonLabel,\n };\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClick = (\n e: React.MouseEvent<HTMLDivElement \| HTMLButtonElement>\n ) => {\n e.stopPropagation();\n window.open(href, \"_blank\", \"noreferrer\");\n onClick?.();\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const generateStarRating = () => {\n if (isNaN(numberOfStars) \|\| numberOfStars < 0) {\n return;\n }\n\n const stars = [];\n const hasHalfStar = numberOfStars - Math.floor(numberOfStars) >= 0.4;\n\n for (let i = 0; i < Math.floor(numberOfStars); i++) {\n stars.push(\n <StarFillIcon\n key={`star${i}`}\n aria-hidden\n className={styles.starIcon}\n />\n );\n }\n if (hasHalfStar) {\n stars.push(\n <StarHalfIcon\n key={`halfstar`}\n aria-hidden\n className={styles.starIcon}\n />\n );\n }\n if (stars.length < MAX_STARS) {\n const remaining = 5 - stars.length;\n for (let i = 0; i < remaining; i++) {\n stars.push(\n <StarIcon\n key={`emptystar${i}`}\n aria-hidden\n className={styles.starIcon}\n />\n );\n }\n }\n\n /* maximum of 5 stars /\n return (\n <div\n className={styles.ratingContainer}\n role=\"group\"\n aria-label={`A rating of ${numberOfStars} out of ${MAX_STARS} stars`}\n data-testid={`${ID}-star-rating`}\n >\n {stars.slice(0, MAX_STARS)}\n </div>\n );\n };\n\n return (\n <>\n {show && (\n <div\n ref={mergeRefs(containerRef, ref)}\n data-testid={ID}\n className={clsx(\n styles.smartAppBannerContainer,\n isDark\n ? styles.smartAppBannerContainerDark\n : styles.smartAppBannerContainerLight,\n animated && styles.smartAppBannerContainerAnimated,\n className\n )}\n >\n <div\n className={styles.proceedContainer}\n onClick={handleClick}\n id={`${ID}-proceed`}\n data-testid={`${ID}-proceed-container`}\n >\n <img\n className={styles.bannerIcon}\n src={icon}\n alt={ariaLabels.icon}\n />\n <div className={styles.textContainer}>\n <Typography.BodySM className={styles.title}>\n {title}\n </Typography.BodySM>\n <Typography.BodyXS className={styles.description}>\n {message}\n </Typography.BodyXS>\n {generateStarRating()}\n </div>\n <div className={styles.buttonContainer}>\n <Button\n className={styles.button}\n type=\"button\"\n onClick={handleClick}\n aria-label={ariaLabels.cta}\n sizeType=\"small\"\n >\n {buttonLabel}\n </Button>\n </div>\n </div>\n <div\n className={styles.dismissContainer}\n onClick={onDismiss}\n id={`${ID}-dismiss`}\n data-testid={`${ID}-dismiss-container`}\n >\n <ClickableIcon\n className={styles.dismissButton}\n aria-label={ariaLabels.dismiss}\n >\n <CrossIcon className={styles.cross} />\n </ClickableIcon>\n </div>\n </div>\n )}\n </>\n );\n}\n\n// @catalog\n/\n A fixed top banner that promotes a mobile app and links to its store listing.\n \n Use `SmartAppBanner` to invite users to install or open the native app.\n */\nexport const SmartAppBanner = React.forwardRef(SmartAppBannerComponent);\n"],"names":["APP_ICON","ID","SmartAppBanner","React","forwardRef","props","ref","className","show","href","content","offset","icon","animated","onDismiss","onClick","title","message","buttonLabel","iconAriaLabel","buttonAriaLabel","numberOfStars","containerRef","useRef","theme","useContext","ThemeContext","isDark","mode","useApplyStyle","styles.tokens","container","top","ariaLabels","dismiss","cta","handleClick","e","stopPropagation","window","open","_jsx","_Fragment","children","_jsxs","mergeRefs","clsx","styles.smartAppBannerContainer","styles.smartAppBannerContainerDark","styles.smartAppBannerContainerLight","styles.smartAppBannerContainerAnimated","styles.proceedContainer","id","styles.bannerIcon","src","alt","styles.textContainer","Typography","BodySM","styles.title","BodyXS","styles.description","isNaN","stars","hasHalfStar","Math","floor","i","push","StarFillIcon","styles.starIcon","StarHalfIcon","length","remaining","StarIcon","styles.ratingContainer","role","slice","generateStarRating","styles.buttonContainer","Button","styles.button","type","sizeType","styles.dismissContainer","ClickableIcon","styles.dismissButton","CrossIcon","styles.cross"],"mappings":"w+CAgBA,MAAMA,EACF,2EAEEC,EAAK,mBAuLJ,MAAMC,EAAiBC,EAAMC,YApLpC,SACIC,EACAC,GAKA,MAAMC,UACFA,EAASC,KACTA,EAAIC,KACJA,EAAIC,QACJA,EAAOC,OACPA,EAAS,EAACC,KACVA,EAAOZ,EAAQa,SACfA,GAAW,EAAKC,UAChBA,EAASC,QACTA,GACAV,GAEEW,MACFA,EAAKC,QACLA,EAAOC,YACPA,EAAWC,cACXA,EAAaC,gBACbA,EAAeC,cACfA,GACAX,EAEEY,EAAeC,EAAuB,MACtCC,EAAQC,EAAWC,GACnBC,GAAyB,UAAhBH,aAAK,EAALA,EAAOI,MAEtBC,EAAcP,EAAc,CACxB,CAACQ,EAAcC,UAAUC,KAAM,GAAGrB,QAGtC,MAAMsB,GAAa,CACfC,QAAS,eACTtB,KAAMO,QAAAA,EAAiB,GACvBgB,IAAKf,QAAAA,EAAmBF,GAKtBkB,GACFC,IAEAA,EAAEC,kBACFC,OAAOC,KAAK/B,EAAM,SAAU,cAC5BM,SAAAA,GAAW,EA2Df,OACI0B,EAAAC,EAAA,CAAAC,SACKnC,GACGoC,SACItC,IAAKuC,EAAUvB,EAAchB,GAAI,cACpBL,EACbM,UAAWuC,EACPC,EACApB,GACMqB,EACAC,EACNpC,GAAYqC,EACZ3C,GACHoC,SAAA,CAEDC,SACIrC,UAAW4C,EACXpC,QAASqB,GACTgB,GAAI,GAAGnD,YAAY,cACN,GAAGA,gCAEhBwC,EAAA,MAAA,CACIlC,UAAW8C,EACXC,IAAK1C,EACL2C,IAAKtB,GAAWrB,OAEpBgC,EAAA,MAAA,CAAKrC,UAAWiD,EAAoBb,SAAA,CAChCF,EAACgB,EAAWC,OAAM,CAACnD,UAAWoD,EAAYhB,SACrC3B,IAELyB,EAACgB,EAAWG,OAAM,CAACrD,UAAWsD,EAAkBlB,SAC3C1B,IAnFF,MACvB,GAAI6C,MAAMzC,IAAkBA,EAAgB,EACxC,OAGJ,MAAM0C,EAAQ,GACRC,EAAc3C,EAAgB4C,KAAKC,MAAM7C,IAAkB,GAEjE,IAAK,IAAI8C,EAAI,EAAGA,EAAIF,KAAKC,MAAM7C,GAAgB8C,IAC3CJ,EAAMK,KACF3B,EAAC4B,oBAGG9D,UAAW+D,GAFN,OAAOH,MAexB,GATIH,GACAD,EAAMK,KACF3B,EAAC8B,EAAY,CAAA,eAAA,EAGThE,UAAW+D,GAFN,aAMbP,EAAMS,OApFA,EAoFoB,CAC1B,MAAMC,EAAY,EAAIV,EAAMS,OAC5B,IAAK,IAAIL,EAAI,EAAGA,EAAIM,EAAWN,IAC3BJ,EAAMK,KACF3B,EAACiC,oBAGGnE,UAAW+D,GAFN,YAAYH,KAMjC,CAGA,OACI1B,EAAA,MAAA,CACIlC,UAAWoE,EACXC,KAAK,QAAO,aACA,eAAevD,mBAAyC,cACvD,GAAGpB,gBAAgB0C,SAE/BoB,EAAMc,MAAM,EAzGX,IA0GA,EAqCWC,MAELrC,EAAA,MAAA,CAAKlC,UAAWwE,EAAsBpC,SAClCF,EAACuC,EAAM,CACHzE,UAAW0E,EACXC,KAAK,SACLnE,QAASqB,GAAW,aACRH,GAAWE,IACvBgD,SAAS,QAAOxC,SAEfzB,SAIbuB,EAAA,MAAA,CACIlC,UAAW6E,EACXrE,QAASD,EACTsC,GAAI,GAAGnD,0BACM,GAAGA,sBAAsB0C,SAEtCF,EAAC4C,EAAa,CACV9E,UAAW+E,EAAoB,aACnBrD,GAAWC,iBAEvBO,EAAC8C,GAAUhF,UAAWiF,YAOlD"}

package/smart-app-banner/smart-app-banner.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./smart-app-banner.styles_15u6yv4.css";const r={container:{top:"--fds-internal-smartAppBanner-container-top"}},s="s4qb553",t="s1yw94wd",n="s1gji45a",a="s9k7xr8",p="dmwiwc",e="d1cy2w47",c="cp9l7rn",m="pdjtkx9",o="t7s9qr2",d="bece00m",i="b1ti1r81",b="b1rqz1xr",g="tmo9z7m",w="dp7x5g3",x="r1gggq6r",q="sda01s1";export{d as bannerIcon,b as button,i as buttonContainer,c as cross,w as description,e as dismissButton,p as dismissContainer,m as proceedContainer,x as ratingContainer,s as smartAppBannerContainer,a as smartAppBannerContainerAnimated,n as smartAppBannerContainerDark,t as smartAppBannerContainerLight,q as starIcon,o as textContainer,g as title,r as tokens};
+import"./smart-app-banner.styles_r6yjq9.css";const r={container:{top:"--fds-internal-smartAppBanner-container-top"}},s="s4qb553",t="s1yw94wd",n="s1gji45a",a="s9k7xr8",p="dmwiwc",e="d1cy2w47",c="cp9l7rn",m="pdjtkx9",o="t7s9qr2",d="bece00m",i="b1ti1r81",b="b1rqz1xr",g="tmo9z7m",q="dp7x5g3",w="r1gggq6r",x="sda01s1";export{d as bannerIcon,b as button,i as buttonContainer,c as cross,q as description,e as dismissButton,p as dismissContainer,m as proceedContainer,w as ratingContainer,s as smartAppBannerContainer,a as smartAppBannerContainerAnimated,n as smartAppBannerContainerDark,t as smartAppBannerContainerLight,x as starIcon,o as textContainer,g as title,r as tokens};
 //# sourceMappingURL=smart-app-banner.styles.js.map

package/smart-app-banner/smart-app-banner.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"smart-app-banner.styles.js","sources":["../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Shadow } from \"../theme\";\n\nexport const tokens = {\n container: {\n top: \"--fds-internal-smartAppBanner-container-top\",\n },\n};\n\nexport const smartAppBannerContainer = css`\n display: flex;\n flex-direction: row-reverse;\n align-items: stretch;\n position: fixed;\n margin: 0.5rem 1.25rem;\n ${tokens.container.top}: initial;\n top: var(${tokens.container.top});\n left: 0;\n width: calc(100% - 2.5rem);\n min-height: 5.5rem;\n z-index: 9001;\n background: ${Colour.bg};\n border-radius: ${Radius.md};\n`;\n\nexport const smartAppBannerContainerLight = css`\n box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const smartAppBannerContainerDark = css`\n border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const smartAppBannerContainerAnimated = css`\n @keyframes smart-app-banner-slide-down {\n from {\n opacity: 0;\n transform: translateY(-20%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n animation: smart-app-banner-slide-down 0.3s;\n`;\n\nexport const dismissContainer = css`\n display: flex;\n align-items: center;\n padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const dismissButton = css`\n padding: 0;\n`;\n\nexport const cross = css`\n color: ${Colour.icon};\n height: 1.25rem;\n width: 1.25rem;\n`;\n\nexport const proceedContainer = css`\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0.5rem 1rem 0.5rem 0.25rem;\n cursor: pointer;\n`;\n\nexport const textContainer = css`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: left;\n margin: 0.5rem;\n ${MediaQuery.MaxWidth.xs} {\n margin: 0 0.5rem;\n }\n`;\n\nexport const bannerIcon = css`\n width: 2.65rem;\n height: auto;\n align-self: center;\n`;\n\nexport const buttonContainer = css`\n max-width: 30%;\n`;\n\nexport const button = css`\n padding: 0.5rem;\n ~~height: auto;\n~~ & > span {\n overflow-wrap: anywhere;\n ${Font[\"body-xs-semibold\"]}\n }\n`;\n\nexport const title = css`\n font-weight: ${Font.Spec[\"weight-bold\"]};\n overflow-wrap: anywhere;\n ${MediaQuery.MaxWidth.xs} {\n ${Font[\"body-xs-bold\"]}\n }\n`;\n\nexport const description = css`\n overflow-wrap: anywhere;\n`;\n\nexport const ratingContainer = css`\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n`;\n\nexport const starIcon = css`\n height: 2rem;\n width: 2rem;\n padding-right: 0.25rem;\n color: #ffc107;\n`;\n"],"names":["tokens","container","top","smartAppBannerContainer","smartAppBannerContainerLight","smartAppBannerContainerDark","smartAppBannerContainerAnimated","dismissContainer","dismissButton","cross","proceedContainer","textContainer","bannerIcon","buttonContainer","button","title","description","ratingContainer","starIcon"],"mappings":"~~8EAIO~~,MAAMA,EAAS,CAClBC,UAAW,CACPC,IAAK,gDAIAC,EAAuB,UAgBvBC,EAA4B,WAI5BC,EAA2B,WAI3BC,EAA+B,UAc/BC,EAAgB,SAMhBC,EAAa,WAIbC,EAAK,UAMLC,EAAgB,UAQhBC,EAAa,UAWbC,EAAU,UAMVC,EAAe,WAIfC,EAAM,~~WASNC~~,EAAK,UAQLC,EAAW,UAIXC,EAAe,WAMfC,EAAQ"}
1	+ {"version":3,"file":"smart-app-banner.styles.js","sources":["../../src/smart-app-banner/smart-app-banner.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Radius, Shadow } from \"../theme\";\n\nexport const tokens = {\n container: {\n top: \"--fds-internal-smartAppBanner-container-top\",\n },\n};\n\nexport const smartAppBannerContainer = css`\n display: flex;\n flex-direction: row-reverse;\n align-items: stretch;\n position: fixed;\n margin: 0.5rem 1.25rem;\n ${tokens.container.top}: initial;\n top: var(${tokens.container.top});\n left: 0;\n width: calc(100% - 2.5rem);\n min-height: 5.5rem;\n z-index: 9001;\n background: ${Colour.bg};\n border-radius: ${Radius.md};\n`;\n\nexport const smartAppBannerContainerLight = css`\n box-shadow: ${Shadow[\"md-subtle\"]};\n`;\n\nexport const smartAppBannerContainerDark = css`\n border: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const smartAppBannerContainerAnimated = css`\n @keyframes smart-app-banner-slide-down {\n from {\n opacity: 0;\n transform: translateY(-20%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n animation: smart-app-banner-slide-down 0.3s;\n`;\n\nexport const dismissContainer = css`\n display: flex;\n align-items: center;\n padding: 0.5rem 0.25rem 0.5rem 1rem;\n`;\n\nexport const dismissButton = css`\n padding: 0;\n`;\n\nexport const cross = css`\n color: ${Colour.icon};\n height: 1.25rem;\n width: 1.25rem;\n`;\n\nexport const proceedContainer = css`\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0.5rem 1rem 0.5rem 0.25rem;\n cursor: pointer;\n`;\n\nexport const textContainer = css`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: left;\n margin: 0.5rem;\n ${MediaQuery.MaxWidth.xs} {\n margin: 0 0.5rem;\n }\n`;\n\nexport const bannerIcon = css`\n width: 2.65rem;\n height: auto;\n align-self: center;\n`;\n\nexport const buttonContainer = css`\n max-width: 30%;\n`;\n\nexport const button = css`\n padding: 0.5rem;\n & > span {\n overflow-wrap: anywhere;\n ${Font[\"body-xs-semibold\"]}\n }\n`;\n\nexport const title = css`\n font-weight: ${Font.Spec[\"weight-bold\"]};\n overflow-wrap: anywhere;\n ${MediaQuery.MaxWidth.xs} {\n ${Font[\"body-xs-bold\"]}\n }\n`;\n\nexport const description = css`\n overflow-wrap: anywhere;\n`;\n\nexport const ratingContainer = css`\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n`;\n\nexport const starIcon = css`\n height: 2rem;\n width: 2rem;\n padding-right: 0.25rem;\n color: #ffc107;\n`;\n"],"names":["tokens","container","top","smartAppBannerContainer","smartAppBannerContainerLight","smartAppBannerContainerDark","smartAppBannerContainerAnimated","dismissContainer","dismissButton","cross","proceedContainer","textContainer","bannerIcon","buttonContainer","button","title","description","ratingContainer","starIcon"],"mappings":"6EAIO,MAAMA,EAAS,CAClBC,UAAW,CACPC,IAAK,gDAIAC,EAAuB,UAgBvBC,EAA4B,WAI5BC,EAA2B,WAI3BC,EAA+B,UAc/BC,EAAgB,SAMhBC,EAAa,WAIbC,EAAK,UAMLC,EAAgB,UAQhBC,EAAa,UAWbC,EAAU,UAMVC,EAAe,WAIfC,EAAM,WAQNC,EAAK,UAQLC,EAAW,UAIXC,EAAe,WAMfC,EAAQ"}

package/{cjs/smart-app-banner/smart-app-banner.styles_15u6yv4.css → smart-app-banner/smart-app-banner.styles_r6yjq9.css} RENAMED Viewed

@@ -9,7 +9,7 @@
 .t7s9qr2{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:left;-webkit-box-align:left;-ms-flex-align:left;align-items:left;margin:0.5rem;}:where(body.fds-breakpoint-xs-max) .t7s9qr2{margin:0 0.5rem;}
 .bece00m{width:2.65rem;height:auto;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
 .b1ti1r81{max-width:30%;}
-.b1rqz1xr{padding:0.5rem;height:auto;}.b1rqz1xr>span{overflow-wrap:anywhere;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.b1rqz1xr{padding:0.5rem;}.b1rqz1xr>span{overflow-wrap:anywhere;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
 .tmo9z7m{font-weight:var(--fds-font-weight-bold);overflow-wrap:anywhere;}:where(body.fds-breakpoint-xs-max) .tmo9z7m{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
 .dp7x5g3{overflow-wrap:anywhere;}
 .r1gggq6r{margin-top:0.25rem;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;}

package/smart-app-banner/types.d.ts CHANGED Viewed

@@ -22,6 +22,8 @@ export interface SmartAppBannerProps {
     offset?: number | undefined;
     /**
      * URL of the app icon image displayed in the banner.
+     *
+     * @default "https://assets.life.gov.sg/react-design-system/img/app-icon/app-icon.png"
      */
     icon?: string | undefined;
     /**

package/tab/tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n children,\n currentActive: currentActiveIndex,\n initialActive = 0,\n onTabClick,\n \"data-testid\": testId,\n className,\n fullWidthIndicatorLine,\n fadeColor,\n ...otherProps\n}: TabProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [currentActive, setCurrentActive] = useState<number>(\n currentActiveIndex \|\| initialActive\n );\n\n const tabLinks = useMemo(() => {\n const validChildren = Children.toArray(children).filter(\n Boolean\n ) as ReactElement<TabItemProps>[];\n\n return validChildren.map((child) => {\n return {\n title: child.props.title,\n width: child.props.width,\n titleAddon: child.props.titleAddon,\n };\n }) as TabLinkProps[];\n }, [children]);\n\n const tabContextValue = useMemo(\n () => ({\n tabLinks,\n currentActiveIndex: currentActive,\n setCurrentActiveIndex: setCurrentActive,\n }),\n [currentActive, tabLinks]\n );\n\n // =========================================================================\n // Effects\n // =========================================================================\n useEffect(() => {\n if (typeof currentActiveIndex === \"number\") {\n setCurrentActive(currentActiveIndex);\n }\n }, [currentActiveIndex]);\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderChildren = () => {\n const validChildren = Children.toArray(children).filter(Boolean);\n\n return validChildren.map((child, index) => {\n const element = child as ReactElement<TabItemProps>;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return cloneElement(child as ReactElement<any>, {\n key: element.key ?? element.props.title,\n index,\n });\n });\n };\n\n return (\n <div\n data-testid={testId}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <TabContext.Provider value={tabContextValue}>\n <TabLinkChain\n controlledMode={typeof currentActiveIndex === \"number\"}\n onTabClick={onTabClick}\n data-testid={`${testId}-tabs`}\n fullWidthIndicatorLine={fullWidthIndicatorLine}\n fadeColor={fadeColor}\n />\n {renderChildren()}\n </TabContext.Provider>\n </div>\n );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n/*\n A tabbed-panel layout that switches visible content by selecting a tab link.\n \n Use `Tab` to organise content into labelled panels where only one panel is\n * visible at a time. Compose with `Tab.Item` to define each panel.\n /\nexport const Tab = Object.assign(TabBase, {\n /* Renders an individual content panel within a `Tab`. */\n Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","controlledMode","index","element","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"qYAcA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAWC,GAAQ,IACCC,EAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,GACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,GAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAKC,EAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAACC,EAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAACS,EAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,~~YAWTC~~,EAAMf,OAAOC,OAAOhC,EAAS,CAEtC+C,KAAMC"}
1	+ {"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n children,\n currentActive: currentActiveIndex,\n initialActive = 0,\n onTabClick,\n \"data-testid\": testId,\n className,\n fullWidthIndicatorLine,\n fadeColor,\n ...otherProps\n}: TabProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [currentActive, setCurrentActive] = useState<number>(\n currentActiveIndex \|\| initialActive\n );\n\n const tabLinks = useMemo(() => {\n const validChildren = Children.toArray(children).filter(\n Boolean\n ) as ReactElement<TabItemProps>[];\n\n return validChildren.map((child) => {\n return {\n title: child.props.title,\n width: child.props.width,\n titleAddon: child.props.titleAddon,\n };\n }) as TabLinkProps[];\n }, [children]);\n\n const tabContextValue = useMemo(\n () => ({\n tabLinks,\n currentActiveIndex: currentActive,\n setCurrentActiveIndex: setCurrentActive,\n }),\n [currentActive, tabLinks]\n );\n\n // =========================================================================\n // Effects\n // =========================================================================\n useEffect(() => {\n if (typeof currentActiveIndex === \"number\") {\n setCurrentActive(currentActiveIndex);\n }\n }, [currentActiveIndex]);\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderChildren = () => {\n const validChildren = Children.toArray(children).filter(Boolean);\n\n return validChildren.map((child, index) => {\n const element = child as ReactElement<TabItemProps>;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return cloneElement(child as ReactElement<any>, {\n key: element.key ?? element.props.title,\n index,\n });\n });\n };\n\n return (\n <div\n data-testid={testId}\n className={clsx(styles.wrapper, className)}\n {...otherProps}\n >\n <TabContext.Provider value={tabContextValue}>\n <TabLinkChain\n controlledMode={typeof currentActiveIndex === \"number\"}\n onTabClick={onTabClick}\n data-testid={`${testId}-tabs`}\n fullWidthIndicatorLine={fullWidthIndicatorLine}\n fadeColor={fadeColor}\n />\n {renderChildren()}\n </TabContext.Provider>\n </div>\n );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n// @catalog\n/*\n A tabbed-panel layout that switches visible content by selecting a tab link.\n \n Use `Tab` to organise content into labelled panels where only one panel is\n * visible at a time. Compose with `Tab.Item` to define each panel.\n /\nexport const Tab = Object.assign(TabBase, {\n /* Renders an individual content panel within a `Tab`. */\n Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","controlledMode","index","element","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"qYAcA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAWC,GAAQ,IACCC,EAASC,QAAQhB,GAAUiB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACxB,IAEEyB,EAAkBX,GACpB,KAAA,CACID,WACAX,mBAAoBD,EACpByB,sBAAuBf,KAE3B,CAACV,EAAeY,IAMpBc,GAAU,KAC4B,iBAAvBzB,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACI0B,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiBzB,EACbC,UAAWyB,EAAKC,EAAgB1B,IAC5BG,EAAU,CAAAT,SAEdiC,EAACC,EAAWC,SAAQ,CAACC,MAAOX,EAAezB,SAAA,CACvC4B,EAACS,EAAY,CACTC,eAA8C,iBAAvBpC,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQhB,GAAUiB,OAAOC,SAEnCC,KAAI,CAACC,EAAOmB,WAC7B,MAAMC,EAAUpB,EAGhB,OAAOqB,EAAarB,EAA4B,CAC5CsB,YAAK3C,EAAAyC,EAAQE,mBAAOF,EAAQlB,MAAMD,MAClCkB,SACF,SAoBA,EAIdzC,EAAQ6C,YAAc,YAYTC,EAAMf,OAAOC,OAAOhC,EAAS,CAEtC+C,KAAMC"}

package/table/table.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { TableBodyProps, TableCellProps, TableContainerProps, TableHeaderProps, TableHeadProps, TableRowProps, TableTableProps } from "./types";
 /**
  * A styled HTML table with a scrollable container wrapper.
  *
@@ -12,40 +13,40 @@
  * - `Table.Cell` — a `<td>` data cell
  * - `Table.HeaderCell` — a `<th>` column header cell
  */
-export declare const Table: (({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const Table: (({ children, ...props }: TableTableProps) => import("react/jsx-runtime").JSX.Element) & {
     /** Scrollable wrapper div that contains a `Table.Table`. */
     Container: {
-        ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /** The bare `<table>` element. Use directly when you need to place the table inside a custom container. */
     Table: {
-        ({ children, className, ...props }: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableTableProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /** Renders the `<thead>` section of the table. */
     Head: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /** Renders the `<tbody>` section of the table. */
     Body: {
-        ({ children, className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /** Renders a `<tr>` row within a `Table.Body`. */
     Row: {
-        ({ children, className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /** Renders a `<td>` data cell within a `Table.Row`. */
     Cell: {
-        ({ children, className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /** Renders a `<th>` header cell within a `Table.Head` row. */
     HeaderCell: {
-        ({ children, className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/table/table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./table.styles\";\n\nconst Head = ({\n children~~,\n~~ ...props\n}: ~~React.HTMLAttributes<HTMLTableSectionElement>~~) => (\n <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({\n children~~,\n~~ className~~,\n~~ ...props\n}: ~~React.HTMLAttributes<HTMLTableSectionElement>~~) => (\n <tbody className={clsx(styles.tableBody, className)} {...props}>\n {children}\n </tbody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({\n children~~,\n~~ className~~,\n~~ ...props\n}: ~~React.HTMLAttributes<HTMLTableRowElement>~~) => (\n <tr className={clsx(styles.bodyRow, className)} {...props}>\n {children}\n </tr>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({\n children~~,\n~~ className~~,\n~~ ...props\n}: ~~React.TdHTMLAttributes<HTMLTableCellElement>~~) => (\n <td className={clsx(styles.bodyCell, className)} {...props}>\n {children}\n </td>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({\n children~~,\n~~ className~~,\n~~ ...props\n}: ~~React.ThHTMLAttributes<HTMLTableCellElement>~~) => (\n <th className={clsx(styles.headerCell, className)} {...props}>\n {children}\n </th>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nconst Container = ({\n children~~,\n~~ className~~,\n~~ ...props\n}: ~~React.HTMLAttributes<HTMLDivElement>~~) => (\n <div\n className={clsx(styles.tableWrapper, className)}\n data-testid=\"table-wrapper\"\n {...props}\n >\n {children}\n </div>\n);\nContainer.displayName = \"Table.Container\";\n\nconst TableEl = ({\n children~~,\n~~ className~~,\n~~ ...props\n}: ~~React.TableHTMLAttributes<HTMLTableElement>~~) => (\n <table className={clsx(styles.tableComponent, className)} {...props}>\n {children}\n </table>\n);\nTableEl.displayName = \"Table.Table\";\n\n/*\n A styled HTML table with a scrollable container wrapper.\n \n Use `Table` when displaying structured tabular data. The default export\n * wraps content in `Table.Container` and `Table.Table` automatically. For\n * full layout control, compose the sub-components directly:\n * - `Table.Container` — scrollable wrapper div\n * - `Table.Table` — the bare `<table>` element\n * - `Table.Head` — the `<thead>` section\n * - `Table.Body` — the `<tbody>` section\n * - `Table.Row` — a `<tr>` row within the body\n * - `Table.Cell` — a `<td>` data cell\n * - `Table.HeaderCell` — a `<th>` column header cell\n /\nexport const Table = Object.assign(\n ({ children, ...props }: ~~React.TableHTMLAttributes<HTMLTableElement>~~) => (\n <Container>\n <TableEl {...props}>{children}</TableEl>\n </Container>\n ),\n {\n /* Scrollable wrapper div that contains a `Table.Table`. /\n Container,\n /* The bare `<table>` element. Use directly when you need to place the table inside a custom container. /\n Table: TableEl,\n /* Renders the `<thead>` section of the table. /\n Head,\n /* Renders the `<tbody>` section of the table. /\n Body,\n /* Renders a `<tr>` row within a `Table.Body`. /\n Row,\n /* Renders a `<td>` data cell within a `Table.Row`. /\n Cell,\n /* Renders a `<th>` header cell within a `Table.Head` row. */\n HeaderCell: Header,\n }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","className","clsx","styles.tableBody","Row","styles.bodyRow","Cell","styles.bodyCell","Header","styles.headerCell","Container","styles.tableWrapper","TableEl","styles.tableComponent","Table","HeaderCell"],"mappings":"~~0OAIA~~,MAAMA,EAAQC,IAAA,IAAAC,~~SACVA~~,GAAQD,~~EACLE~~,EAAKC,EAAAH,~~EAFE~~,~~cAGuC~~,~~OACjDI~~,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,QAAAC,~~SACVA~~,EAAQQ,~~UACRA~~,GAAST,~~EACNE~~,EAAKC,EAAAH,~~EAHE~~,~~0BAIuC~~,~~OACjDI~~,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKC,EAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,~~SACTA~~,EAAQQ,~~UACRA~~,GAAST,~~EACNE~~,EAAKC,EAAAH,~~EAHC~~,~~0BAIoC~~,~~OAC7CI~~,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKG,EAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,~~SACVA~~,EAAQQ,~~UACRA~~,GAAST,~~EACNE~~,EAAKC,EAAAH,~~EAHE~~,~~0BAIsC~~,~~OAChDI~~,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKK,EAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,~~SACZA~~,EAAQQ,~~UACRA~~,GAAST,~~EACNE~~,EAAKC,EAAAH,~~EAHI~~,~~0BAIoC~~,~~OAChDI~~,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKO,EAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,~~SACfA~~,EAAQQ,~~UACRA~~,GAAST,~~EACNE~~,EAAKC,EAAAH,~~EAHO~~,~~0BAIyB~~,~~OACxCI~~,uBACIK,UAAWC,EAAKS,EAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,~~SACbA~~,EAAQQ,~~UACRA~~,GAAST,~~EACNE~~,EAAKC,EAAAH,~~EAHK~~,~~0BAIkC~~,~~OAC/CI~~,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKW,EAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,~~cAgBf~~,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,~~cAAwE~~,~~OACrEI~~,EAACc,EAAS,CAAAjB,SACNG,EAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CAEIiB,YAEAI,MAAOF,EAEPrB,OAEAS,OAEAI,MAEAE,OAEAS,WAAYP"}
1	+ {"version":3,"file":"table.js","sources":["../../src/table/table.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport * as styles from \"./table.styles\";\nimport type {\n TableBodyProps,\n TableCellProps,\n TableContainerProps,\n TableHeaderProps,\n TableHeadProps,\n TableRowProps,\n TableTableProps,\n} from \"./types\";\n\nconst Head = ({ children, ...props }: TableHeadProps) => (\n <thead {...props}>{children}</thead>\n);\nHead.displayName = \"Table.Head\";\n\nconst Body = ({ children, className, ...props }: TableBodyProps) => (\n <tbody className={clsx(styles.tableBody, className)} {...props}>\n {children}\n </tbody>\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = ({ children, className, ...props }: TableRowProps) => (\n <tr className={clsx(styles.bodyRow, className)} {...props}>\n {children}\n </tr>\n);\nRow.displayName = \"Table.Row\";\n\nconst Cell = ({ children, className, ...props }: TableCellProps) => (\n <td className={clsx(styles.bodyCell, className)} {...props}>\n {children}\n </td>\n);\nCell.displayName = \"Table.Cell\";\n\nconst Header = ({ children, className, ...props }: TableHeaderProps) => (\n <th className={clsx(styles.headerCell, className)} {...props}>\n {children}\n </th>\n);\nHeader.displayName = \"Table.HeaderCell\";\n\nconst Container = ({ children, className, ...props }: TableContainerProps) => (\n <div\n className={clsx(styles.tableWrapper, className)}\n data-testid=\"table-wrapper\"\n {...props}\n >\n {children}\n </div>\n);\nContainer.displayName = \"Table.Container\";\n\nconst TableEl = ({ children, className, ...props }: TableTableProps) => (\n <table className={clsx(styles.tableComponent, className)} {...props}>\n {children}\n </table>\n);\nTableEl.displayName = \"Table.Table\";\n\n// @catalog\n/*\n A styled HTML table with a scrollable container wrapper.\n \n Use `Table` when displaying structured tabular data. The default export\n * wraps content in `Table.Container` and `Table.Table` automatically. For\n * full layout control, compose the sub-components directly:\n * - `Table.Container` — scrollable wrapper div\n * - `Table.Table` — the bare `<table>` element\n * - `Table.Head` — the `<thead>` section\n * - `Table.Body` — the `<tbody>` section\n * - `Table.Row` — a `<tr>` row within the body\n * - `Table.Cell` — a `<td>` data cell\n * - `Table.HeaderCell` — a `<th>` column header cell\n /\nexport const Table = Object.assign(\n ({ children, ...props }: TableTableProps) => (\n <Container>\n <TableEl {...props}>{children}</TableEl>\n </Container>\n ),\n {\n /* Scrollable wrapper div that contains a `Table.Table`. /\n Container,\n /* The bare `<table>` element. Use directly when you need to place the table inside a custom container. /\n Table: TableEl,\n /* Renders the `<thead>` section of the table. /\n Head,\n /* Renders the `<tbody>` section of the table. /\n Body,\n /* Renders a `<tr>` row within a `Table.Body`. /\n Row,\n /* Renders a `<td>` data cell within a `Table.Row`. /\n Cell,\n /* Renders a `<th>` header cell within a `Table.Head` row. */\n HeaderCell: Header,\n }\n);\n"],"names":["Head","_a","children","props","__rest","_jsx","Object","assign","displayName","Body","className","clsx","styles.tableBody","Row","styles.bodyRow","Cell","styles.bodyCell","Header","styles.headerCell","Container","styles.tableWrapper","TableEl","styles.tableComponent","Table","HeaderCell"],"mappings":"0OAaA,MAAMA,EAAQC,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAA2C,OACrDI,EAAA,QAAAC,OAAAC,OAAA,GAAWJ,YAAQD,IAAiB,EAExCF,EAAKQ,YAAc,aAEnB,MAAMC,EAAQR,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAsD,OAChEI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKC,EAAkBF,IAAgBP,YACpDD,IACG,EAEZO,EAAKD,YAAc,aAEnB,MAAMK,EAAOZ,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAqD,OAC9DI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKG,EAAgBJ,IAAgBP,YAC/CD,IACA,EAETW,EAAIL,YAAc,YAElB,MAAMO,EAAQd,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAsD,OAChEI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKK,EAAiBN,IAAgBP,YAChDD,IACA,EAETa,EAAKP,YAAc,aAEnB,MAAMS,EAAUhB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAwD,OACpEI,EAAA,KAAAC,OAAAC,OAAA,CAAIG,UAAWC,EAAKO,EAAmBR,IAAgBP,YAClDD,IACA,EAETe,EAAOT,YAAc,mBAErB,MAAMW,EAAalB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAA2D,OAC1EI,uBACIK,UAAWC,EAAKS,EAAqBV,GAAU,cACnC,iBACRP,YAEHD,IACC,EAEViB,EAAUX,YAAc,kBAExB,MAAMa,EAAWpB,QAAAC,SAAEA,EAAQQ,UAAEA,GAAST,EAAKE,EAAKC,EAAAH,EAA/B,0BAAuD,OACpEI,EAAA,QAAAC,OAAAC,OAAA,CAAOG,UAAWC,EAAKW,EAAuBZ,IAAgBP,YACzDD,IACG,EAEZmB,EAAQb,YAAc,cAiBf,MAAMe,EAAQjB,OAAOC,QACvBN,IAAA,IAAAC,SAAEA,GAAQD,EAAKE,EAAKC,EAAAH,EAApB,cAA4C,OACzCI,EAACc,EAAS,CAAAjB,SACNG,EAACgB,EAAOf,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAD,SAAGA,MACb,GAEhB,CAEIiB,YAEAI,MAAOF,EAEPrB,OAEAS,OAEAI,MAEAE,OAEAS,WAAYP"}

package/table/types.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+/**
+ * Inherits props from [HTMLTableSectionElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement)
+ */
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+/**
+ * Inherits props from [HTMLTableSectionElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement)
+ */
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+}
+/**
+ * Inherits props from [HTMLTableRowElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement)
+ */
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+}
+/**
+ * Inherits props from [HTMLTableCellElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement)
+ */
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+}
+/**
+ * Inherits props from [HTMLTableCellElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement)
+ */
+export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+}
+/**
+ * Inherits props from [HTMLDivElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement)
+ */
+export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Inherits props from [HTMLTableElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement)
+ */
+export interface TableTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+}

package/tag/tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.js","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./tag.style\";\nimport type { TagColorType, TagProps, TagType } from \"./types\";\n\nconst colorClassMap: Record<TagType, Record<TagColorType, string>> = {\n solid: {\n grey: styles.wrapperSolidGrey,\n green: styles.wrapperSolidGreen,\n yellow: styles.wrapperSolidYellow,\n red: styles.wrapperSolidRed,\n blue: styles.wrapperSolidBlue,\n primary: styles.wrapperSolidPrimary,\n black: styles.wrapperSolidBlack,\n },\n outline: {\n grey: styles.wrapperOutlineGrey,\n green: styles.wrapperOutlineGreen,\n yellow: styles.wrapperOutlineYellow,\n red: styles.wrapperOutlineRed,\n blue: styles.wrapperOutlineBlue,\n primary: styles.wrapperOutlinePrimary,\n black: styles.wrapperOutlineBlack,\n },\n};\n\n/*\n A compact label used to categorise or highlight content.\n \n Use `Tag` to display metadata such as status, category, or keyword.\n */\nexport const Tag = ({\n type,\n colorType = \"black\",\n children,\n interactive = false,\n icon,\n iconPosition = \"left\",\n ...otherProps\n}: TagProps): JSX.Element => {\n const Element = interactive ? \"button\" : \"div\";\n\n return (\n <Element\n className={clsx(\n styles.wrapper,\n colorClassMap[type]?.[colorType],\n interactive && styles.wrapperInteractive\n )}\n {...otherProps}\n >\n {iconPosition === \"left\" &&\n icon &&\n React.cloneElement(icon, { \"aria-hidden\": true })}\n <div className={styles.label} role=\"presentation\">\n {children}\n </div>\n {iconPosition === \"right\" &&\n icon &&\n React.cloneElement(icon, { \"aria-hidden\": true })}\n </Element>\n );\n};\n"],"names":["colorClassMap","solid","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","black","styles.wrapperSolidBlack","outline","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","styles.wrapperOutlineBlack","Tag","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Object","assign","className","clsx","styles.wrapper","_b","styles.wrapperInteractive","React","cloneElement","_jsx","styles.label","role"],"mappings":"oiBAMA,MAAMA,EAA+D,CACjEC,MAAO,CACHC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,EACTC,MAAOC,GAEXC,QAAS,CACLd,KAAMe,EACNb,MAAOc,EACPZ,OAAQa,EACRX,IAAKY,EACLV,KAAMW,EACNT,QAASU,EACTR,MAAOS,~~IASFC~~,EAAOC,WAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAWhB,OACIS,EAHYL,EAAc,SAAW,MAG7BM,OAAAC,OAAA,CACJC,UAAWC,EACPC,EACmB,QAAnBC,EAAAxC,EAAc0B,UAAK,IAAAc,OAAA,EAAAA,EAAGb,GACtBE,GAAeY,IAEfT,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAAA,MAAA,CAAKP,UAAWQ,EAAcC,KAAK,eAAclB,SAC5CA,IAEa,UAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,OACxC"}
1	+ {"version":3,"file":"tag.js","sources":["../../src/tag/tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./tag.style\";\nimport type { TagColorType, TagProps, TagType } from \"./types\";\n\nconst colorClassMap: Record<TagType, Record<TagColorType, string>> = {\n solid: {\n grey: styles.wrapperSolidGrey,\n green: styles.wrapperSolidGreen,\n yellow: styles.wrapperSolidYellow,\n red: styles.wrapperSolidRed,\n blue: styles.wrapperSolidBlue,\n primary: styles.wrapperSolidPrimary,\n black: styles.wrapperSolidBlack,\n },\n outline: {\n grey: styles.wrapperOutlineGrey,\n green: styles.wrapperOutlineGreen,\n yellow: styles.wrapperOutlineYellow,\n red: styles.wrapperOutlineRed,\n blue: styles.wrapperOutlineBlue,\n primary: styles.wrapperOutlinePrimary,\n black: styles.wrapperOutlineBlack,\n },\n};\n\n// @catalog\n/*\n A compact label used to categorise or highlight content.\n \n Use `Tag` to display metadata such as status, category, or keyword.\n */\nexport const Tag = ({\n type,\n colorType = \"black\",\n children,\n interactive = false,\n icon,\n iconPosition = \"left\",\n ...otherProps\n}: TagProps): JSX.Element => {\n const Element = interactive ? \"button\" : \"div\";\n\n return (\n <Element\n className={clsx(\n styles.wrapper,\n colorClassMap[type]?.[colorType],\n interactive && styles.wrapperInteractive\n )}\n {...otherProps}\n >\n {iconPosition === \"left\" &&\n icon &&\n React.cloneElement(icon, { \"aria-hidden\": true })}\n <div className={styles.label} role=\"presentation\">\n {children}\n </div>\n {iconPosition === \"right\" &&\n icon &&\n React.cloneElement(icon, { \"aria-hidden\": true })}\n </Element>\n );\n};\n"],"names":["colorClassMap","solid","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","black","styles.wrapperSolidBlack","outline","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","styles.wrapperOutlineBlack","Tag","_a","type","colorType","children","interactive","icon","iconPosition","otherProps","__rest","_jsxs","Object","assign","className","clsx","styles.wrapper","_b","styles.wrapperInteractive","React","cloneElement","_jsx","styles.label","role"],"mappings":"oiBAMA,MAAMA,EAA+D,CACjEC,MAAO,CACHC,KAAMC,EACNC,MAAOC,EACPC,OAAQC,EACRC,IAAKC,EACLC,KAAMC,EACNC,QAASC,EACTC,MAAOC,GAEXC,QAAS,CACLd,KAAMe,EACNb,MAAOc,EACPZ,OAAQa,EACRX,IAAKY,EACLV,KAAMW,EACNT,QAASU,EACTR,MAAOS,IAUFC,EAAOC,WAAAC,KAChBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,YACRA,GAAc,EAAKC,KACnBA,EAAIC,aACJA,EAAe,UACZC,EAAUC,EAAAR,EAPG,CAAA,OAAA,YAAA,WAAA,cAAA,OAAA,iBAWhB,OACIS,EAHYL,EAAc,SAAW,MAG7BM,OAAAC,OAAA,CACJC,UAAWC,EACPC,EACmB,QAAnBC,EAAAxC,EAAc0B,UAAK,IAAAc,OAAA,EAAAA,EAAGb,GACtBE,GAAeY,IAEfT,EAAU,CAAAJ,SAAA,CAEI,SAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,IAC9Cc,EAAA,MAAA,CAAKP,UAAWQ,EAAcC,KAAK,eAAclB,SAC5CA,IAEa,UAAjBG,GACGD,GACAY,EAAMC,aAAab,EAAM,CAAE,eAAe,OACxC"}

package/text-list/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../src/text-list/index.ts"],"sourcesContent":["import { OrderedList } from \"./ordered-list\";\nimport { UnorderedList } from \"./unordered-list\";\n\n/*\n Renders styled ordered and unordered lists for body copy and structured content.\n \n Use `TextList` to present sequential or non-sequential items with consistent\n * typography and spacing.\n \n Sub-components:\n * - `TextList.Ol` — a numbered list with configurable counter style and direction.\n * - `TextList.Ul` — a bulleted list supporting predefined marker types or a custom icon.\n /\nexport const TextList = {\n /\n Renders a bulleted list. Supports predefined marker types or\n * a custom decorative icon.\n /\n Ul: UnorderedList,\n /\n Renders a numbered list with configurable counter display.\n /\n Ol: OrderedList,\n};\n\nexport from \"./types\";\n"],"names":["TextList","Ul","UnorderedList","Ol","OrderedList"],"mappings":"~~oGAaO~~,MAAMA,EAAW,CAKpBC,GAAIC,EAIJC,GAAIC"}
1	+ {"version":3,"file":"index.js","sources":["../../src/text-list/index.ts"],"sourcesContent":["import { OrderedList } from \"./ordered-list\";\nimport { UnorderedList } from \"./unordered-list\";\n\n// @catalog\n/*\n Renders styled ordered and unordered lists for body copy and structured content.\n \n Use `TextList` to present sequential or non-sequential items with consistent\n * typography and spacing.\n \n Sub-components:\n * - `TextList.Ol` — a numbered list with configurable counter style and direction.\n * - `TextList.Ul` — a bulleted list supporting predefined marker types or a custom icon.\n /\nexport const TextList = {\n /\n Renders a bulleted list. Supports predefined marker types or\n * a custom decorative icon.\n /\n Ul: UnorderedList,\n /\n Renders a numbered list with configurable counter display.\n /\n Ol: OrderedList,\n};\n\nexport from \"./types\";\n"],"names":["TextList","Ul","UnorderedList","Ol","OrderedList"],"mappings":"oGAcO,MAAMA,EAAW,CAKpBC,GAAIC,EAIJC,GAAIC"}

package/theme/styles/pa.css CHANGED Viewed

@@ -514,47 +514,6 @@ SEMANTIC COLOURS - DARK MODE
     /* focus ring - adjusted for dark mode */
     --fds-colour-focus-ring: var(--fds-colour-primary-60);
     --fds-colour-focus-ring-inverse: var(--fds-colour-black);
-    /*
-    ============================================================================
-    COMPONENT TOKEN
-    ============================================================================
-    */
-    /* Button */
-    --fds-button-radius: var(--fds-radius-sm);
-    --fds-button-default-colour-bg: var(--fds-colour-bg-primary);
-    --fds-button-default-colour-bg-hover: var(--fds-colour-bg-primary-hover);
-    --fds-button-default-colour-text: var(--fds-colour-text-inverse);
-    --fds-button-secondary-colour-border: var(--fds-colour-border-primary);
-    --fds-button-secondary-colour-text: var(--fds-colour-text-primary);
-    --fds-button-light-colour-text: var(--fds-colour-text-primary);
-    --fds-button-link-colour-text: var(--fds-colour-text-primary);
-    /* Navbar: */
-    --fds-navbar-full-height: 6rem;
-    --fds-navbar-full-logo-height: 2rem;
-    --fds-navbar-compressed-height: 4rem;
-    --fds-navbar-compressed-logo-height: 1.5rem;
-    --fds-navbar-mobile-height: 3.5rem;
-    --fds-navbar-mobile-logo-height: 1.5rem;
-    --fds-navbar-colour-bg: var(--fds-colour-bg);
-    --fds-navbar-colour-icon: var(--fds-colour-icon);
-    --fds-navbar-link-colour-text: var(--fds-colour-text);
-    --fds-navbar-link-colour-text-hover: var(--fds-colour-text-hover);
-    --fds-navbar-link-colour-text-selected-hover: var(
-        --fds-text-selected-hover
-    );
-    /* Footer: */
-    --fds-footer-colour-bg: var(--fds-colour-bg-strong);
-    --fds-footer-colour-text: var(--fds-colour-text);
-    --fds-footer-link-colour-text: var(--fds-colour-text);
-    --fds-footer-link-colour-text-hover: var(--fds-colour-text-hover);
-    --fds-footer-disclaimer-link-colour-text: var(--fds-colour-text);
-    --fds-footer-disclaimer-link-colour-text-hover: var(
-        --fds-colour-text-subtler
-    );
 }
 }

package/theme/theme-provider/hooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n themeProps: {\n \"data-fds-theme\"?: string;\n \"data-fds-theme-mode\"?: string;\n };\n themeStyle: CSSProperties;\n};\n\n/*\n Returns the theme context from the nearest `ThemeProvider`.\n \n @returns The active `ThemeContextValue`. When called outside a provider,\n * returns defaults: `theme: \"lifesg\"`, `mode: \"light\"`, `themeElement: null`.\n /\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n\n if (!context) {\n return {\n theme: \"lifesg\",\n mode: \"light\",\n themeElement: null,\n };\n }\n\n return context;\n};\n\n/\n Builds `data-fds-theme` attributes and inline CSS variables for re-stamping\n the current theme onto a detached DOM element (e.g. a portal or floating\n * overlay).\n \n @param enabled When `false`, returns empty objects — useful to conditionally\n * skip the attribute injection.\n * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline\n * CSS variables to apply).\n */\nexport const useInheritedThemeScope = (\n enabled: boolean\n): InheritedThemeScope => {\n const themeContext = useContext(ThemeContext);\n\n return useMemo(() => {\n if (!enabled) {\n return {\n themeProps: {},\n themeStyle: {},\n };\n }\n\n return {\n themeProps: {\n \"data-fds-theme\": themeContext?.theme,\n \"data-fds-theme-mode\": themeContext?.mode,\n },\n themeStyle: getInheritedInlineCssVariables(\n themeContext?.themeElement ?? null\n ),\n };\n }, [\n enabled,\n themeContext?.mode,\n themeContext?.theme,\n themeContext?.themeElement,\n ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","theme","mode","themeElement","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","themeStyle","getInheritedInlineCssVariables","_a"],"mappings":"~~sKAqBO~~,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,OAAKF,GACM,CACHG,MAAO,SACPC,KAAM,QACNC,aAAc,KAIR,~~EAaLC~~,EACTC,IAEA,MAAMC,EAAeP,EAAWC,GAEhC,OAAOO,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcL,MAChC,sBAAuBK,aAAY,EAAZA,EAAcJ,MAEzCO,WAAYC,EACkB,QAA1BC,EAAAL,aAAY,EAAZA,EAAcH,oBAAY,IAAAQ,EAAAA,EAAI,OAZ3B,CACHH,WAAY,CAAA,EACZC,WAAY,CAAA,EAYnB,GACF,CACCJ,EACAC,aAAY,EAAZA,EAAcJ,KACdI,aAAY,EAAZA,EAAcL,MACdK,aAAY,EAAZA,EAAcH,cAChB"}
1	+ {"version":3,"file":"hooks.js","sources":["../../../src/theme/theme-provider/hooks.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useContext, useMemo } from \"react\";\n\nimport { getInheritedInlineCssVariables } from \"../utils/css-variable\";\nimport { ThemeContext } from \"./context\";\nimport type { ThemeContextValue } from \"./types\";\n\ntype InheritedThemeScope = {\n themeProps: {\n \"data-fds-theme\"?: string;\n \"data-fds-theme-mode\"?: string;\n };\n themeStyle: CSSProperties;\n};\n\n// @catalog\n/*\n Returns the theme context from the nearest `ThemeProvider`.\n \n @returns The active `ThemeContextValue`. When called outside a provider,\n * returns defaults: `theme: \"lifesg\"`, `mode: \"light\"`, `themeElement: null`.\n /\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n\n if (!context) {\n return {\n theme: \"lifesg\",\n mode: \"light\",\n themeElement: null,\n };\n }\n\n return context;\n};\n\n// @catalog\n/\n Builds `data-fds-theme` attributes and inline CSS variables for re-stamping\n the current theme onto a detached DOM element (e.g. a portal or floating\n * overlay).\n \n @param enabled When `false`, returns empty objects — useful to conditionally\n * skip the attribute injection.\n * @returns `themeProps` (spread onto the root element) and `themeStyle` (inline\n * CSS variables to apply).\n */\nexport const useInheritedThemeScope = (\n enabled: boolean\n): InheritedThemeScope => {\n const themeContext = useContext(ThemeContext);\n\n return useMemo(() => {\n if (!enabled) {\n return {\n themeProps: {},\n themeStyle: {},\n };\n }\n\n return {\n themeProps: {\n \"data-fds-theme\": themeContext?.theme,\n \"data-fds-theme-mode\": themeContext?.mode,\n },\n themeStyle: getInheritedInlineCssVariables(\n themeContext?.themeElement ?? null\n ),\n };\n }, [\n enabled,\n themeContext?.mode,\n themeContext?.theme,\n themeContext?.themeElement,\n ]);\n};\n"],"names":["useTheme","context","useContext","ThemeContext","theme","mode","themeElement","useInheritedThemeScope","enabled","themeContext","useMemo","themeProps","themeStyle","getInheritedInlineCssVariables","_a"],"mappings":"sKAsBO,MAAMA,EAAW,KACpB,MAAMC,EAAUC,EAAWC,GAE3B,OAAKF,GACM,CACHG,MAAO,SACPC,KAAM,QACNC,aAAc,KAIR,EAcLC,EACTC,IAEA,MAAMC,EAAeP,EAAWC,GAEhC,OAAOO,GAAQ,WACX,OAAKF,EAOE,CACHG,WAAY,CACR,iBAAkBF,aAAY,EAAZA,EAAcL,MAChC,sBAAuBK,aAAY,EAAZA,EAAcJ,MAEzCO,WAAYC,EACkB,QAA1BC,EAAAL,aAAY,EAAZA,EAAcH,oBAAY,IAAAQ,EAAAA,EAAI,OAZ3B,CACHH,WAAY,CAAA,EACZC,WAAY,CAAA,EAYnB,GACF,CACCJ,EACAC,aAAY,EAAZA,EAAcJ,KACdI,aAAY,EAAZA,EAAcL,MACdK,aAAY,EAAZA,EAAcH,cAChB"}