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

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

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

Files changed (2426) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n type = \"checkbox\",\n indicator,\n checked,\n styleType = \"default\",\n children,\n childrenMaxLines,\n subLabel,\n disabled,\n error,\n name,\n id,\n className,\n compositeSection,\n removable,\n focusableWhenDisabled,\n useContentWidth,\n onRemove,\n onChange,\n \"data-testid\": testId,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: ToggleProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n collapsible = true,\n errors,\n children: compositeSectionChildren,\n initialExpanded,\n } = compositeSection \|\| {};\n const [selected, setSelected] = useState<boolean \| undefined>(checked);\n const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n const hasCompositeSectionError = useMemo(() => {\n const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n const hasErrorElement = !Array.isArray(errors) && !!errors;\n return hasErrorList \|\| hasErrorElement;\n }, [errors]);\n const uniqueId = useId();\n const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const labelRef = useRef<HTMLLabelElement>(null);\n\n useApplyStyle(labelRef, {\n [styles.tokens.label.desktopLineClamp]:\n childrenMaxLines?.desktop == null\n ? null\n : `${childrenMaxLines.desktop}`,\n [styles.tokens.label.tabletLineClamp]:\n childrenMaxLines?.tablet == null\n ? null\n : `${childrenMaxLines.tablet}`,\n [styles.tokens.label.mobileLineClamp]:\n childrenMaxLines?.mobile == null\n ? null\n : `${childrenMaxLines.mobile}`,\n });\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n const isInteractionBlocked = !!disabled;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(checked);\n }, [checked]);\n\n useEffect(() => {\n if (selected) {\n setExpanded(initialExpanded ?? true);\n }\n }, [selected]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isInteractionBlocked) {\n event.preventDefault();\n return;\n }\n\n if (onChange) {\n onChange(event);\n return;\n }\n\n switch (type) {\n case \"checkbox\":\n setSelected((prevSelected) => {\n return !prevSelected;\n });\n break;\n case \"radio\":\n case \"yes\":\n case \"no\":\n if (!selected) {\n setSelected(true);\n }\n break;\n }\n };\n\n const handleExpandCollapseClick = () => {\n if (!disabled) {\n setExpanded(!expanded);\n }\n };\n\n const handleOnRemove = () => {\n if (!disabled) {\n if (onRemove) {\n onRemove();\n return;\n }\n }\n };\n\n const handleContainerClick = () => {\n inputRef?.current?.click();\n };\n\n const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n e.stopPropagation();\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const getContainerStateClass = () => {\n if (styleType === \"no-border\") {\n if (error) {\n return clsx(\n styles.colorBorderError,\n !disabled && styles.toggleContainerError\n );\n }\n\n if (disabled) {\n return selected\n ? styles.toggleContainerNoBorderDisabledSelected\n : styles.toggleContainerNoBorderDisabled;\n }\n\n if (selected) {\n return styles.toggleContainerNoBorderSelected;\n }\n\n return styles.toggleContainerNoBorder;\n }\n\n if (error) {\n return disabled\n ? styles.colorBorderError\n : styles.toggleContainerError;\n }\n\n if (disabled) {\n return selected\n ? styles.toggleContainerDisabledSelected\n : styles.toggleContainerDisabled;\n }\n\n if (selected) {\n return styles.toggleContainerSelected;\n }\n\n return styles.toggleContainer;\n };\n\n const getContainerHoverClass = () => {\n if (disabled) {\n return undefined;\n }\n\n if (!error && selected) {\n return styles.toggleContainerHoverSelected;\n }\n\n return styles.toggleContainerHoverDefault;\n };\n\n const getTextContainerStateClass = () => {\n if (disabled) {\n return selected\n ? styles.toggleTextContainerDisabledSelected\n : styles.colorTextDisabled;\n }\n\n if (selected) {\n return styles.toggleTextContainerSelected;\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIndicator = () => {\n let toggleIconType: ToggleIconType;\n\n switch (type) {\n case \"yes\":\n toggleIconType = \"tick\";\n break;\n case \"no\":\n toggleIconType = \"cross\";\n break;\n case \"checkbox\":\n case \"radio\":\n toggleIconType = type;\n break;\n }\n\n return (\n <ToggleIcon\n type={toggleIconType}\n active={selected}\n disabled={disabled}\n />\n );\n };\n\n const renderSubLabel = () => {\n if (!subLabel) {\n return null;\n }\n\n let component: string \| JSX.Element;\n\n if (typeof subLabel === \"function\") {\n component = subLabel();\n } else {\n component = subLabel;\n }\n\n // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n return (\n <div\n data-id=\"toggle-sublabel\"\n id={`${generatedId}-sublabel`}\n aria-hidden\n className={styles.subLabel}\n >\n {component}\n </div>\n );\n };\n\n const renderCompositeChildren = () => {\n return (\n (!collapsible \|\| expanded) && (\n <div\n data-id=\"toggle-composite-children\"\n className={clsx(\n styles.children,\n !collapsible && styles.childrenIsFinalItem,\n disabled && styles.colorTextDisabled\n )}\n >\n <Markup baseTextSize=\"body-md\">\n {compositeSectionChildren}\n </Markup>\n </div>\n )\n );\n };\n\n const renderExpandButton = () => {\n const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n return (\n collapsible && (\n <button\n className={clsx(\n styles.expandButton,\n disabled && styles.disabledColorCursor,\n collapsedWithoutErrors &&\n styles.expandButtonPaddingTopRequired\n )}\n disabled={disabled}\n onClick={handleExpandCollapseClick}\n data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n >\n {expanded ? \"Show less\" : \"Show more\"}\n {expanded ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </button>\n )\n );\n };\n\n const renderToggleWithRemoveButton = () => {\n const ariaDescriptions =\n [\n typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(\" \") \|\| undefined;\n\n return (\n <div\n id={`${generatedId}-header-container`}\n className={styles.headerContainer}\n >\n <div\n className={clsx(\n styles.indicatorLabelContainer,\n removable && styles.indicatorLabelContainerAddPadding\n )}\n >\n <div\n id={`${generatedId}-input-container`}\n onClick={handleContainerClick}\n className={styles.inputContainer}\n >\n <input\n ref={inputRef}\n name={name}\n id={`${generatedId}-input`}\n type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n data-testid=\"toggle-input\"\n className={clsx(\n styles.input,\n disabled && styles.toggleInputDisabled\n )}\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n onChange={handleOnChange}\n onClick={handleInputClick}\n checked={selected}\n tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n aria-describedby={ariaDescriptions}\n {...otherProps}\n />\n {indicator && renderIndicator()}\n <div\n className={clsx(\n styles.textContainer,\n getTextContainerStateClass()\n )}\n >\n <label\n ref={labelRef}\n htmlFor={`${generatedId}-input`}\n data-testid={`toggle-label`}\n id={`${generatedId}-label`}\n className={clsx(\n styles.label,\n selected\n ? styles.toggleLabelSelected\n : styles.toggleLabelDefault\n )}\n >\n {children}\n </label>\n {subLabel && renderSubLabel()}\n </div>\n </div>\n </div>\n {removable && (\n <button\n type=\"button\"\n className={clsx(\n styles.removeButton,\n disabled && styles.disabledColorCursor\n )}\n onClick={handleOnRemove}\n id={`${generatedId}-remove-button`}\n >\n Remove\n </button>\n )}\n </div>\n );\n };\n\n const renderErrorList = (errors: string[]) => {\n return (\n <>\n <Typography.BodyMD\n weight=\"semibold\"\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n Error\n </Typography.BodyMD>\n <TextList.Ul\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n {errors?.map((item, index) => {\n return (\n <li\n key={index}\n id={`${generatedId}-error-list-item-${index}`}\n >\n <Typography.BodyMD\n weight=\"semibold\"\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n {item}\n </Typography.BodyMD>\n </li>\n );\n })}\n </TextList.Ul>\n </>\n );\n };\n\n const renderError = () => {\n return (\n collapsible &&\n !expanded &&\n hasCompositeSectionError && (\n <div\n className={clsx(\n styles.errorContainer,\n disabled && styles.disabledColorCursor\n )}\n onClick={handleExpandCollapseClick}\n id={`${generatedId}-error-alert`}\n >\n <Alert\n type={disabled ? \"description\" : \"error\"}\n className={styles.alertContainer}\n showIcon\n >\n {Array.isArray(errors)\n ? renderErrorList(errors)\n : errors}\n </Alert>\n </div>\n )\n );\n };\n\n const renderCompositeSection = () => {\n return (\n compositeSectionChildren && (\n <div>\n {renderCompositeChildren()}\n {renderError()}\n {renderExpandButton()}\n </div>\n )\n );\n };\n\n return (\n <div\n className={clsx(\n styles.container,\n getContainerStateClass(),\n getContainerHoverClass(),\n !indicator && styles.noIndicatorContainer,\n useContentWidth && styles.useContentWidthContainer,\n className\n )}\n id={id}\n data-testid={testId}\n >\n {renderToggleWithRemoveButton()}\n {renderCompositeSection()}\n </div>\n );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","clsx","styles.expandButton","styles.disabledColorCursor","styles.expandButtonPaddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","Typography","BodyMD","weight","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"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"}
1	+ {"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n type = \"checkbox\",\n indicator,\n checked,\n styleType = \"default\",\n children,\n childrenMaxLines,\n subLabel,\n disabled,\n error,\n name,\n id,\n className,\n compositeSection,\n removable,\n focusableWhenDisabled,\n useContentWidth,\n onRemove,\n onChange,\n \"data-testid\": testId,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: ToggleProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n collapsible = true,\n errors,\n children: compositeSectionChildren,\n initialExpanded,\n } = compositeSection \|\| {};\n const [selected, setSelected] = useState<boolean \| undefined>(checked);\n const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n const hasCompositeSectionError = useMemo(() => {\n const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n const hasErrorElement = !Array.isArray(errors) && !!errors;\n return hasErrorList \|\| hasErrorElement;\n }, [errors]);\n const uniqueId = useId();\n const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const labelRef = useRef<HTMLLabelElement>(null);\n\n useApplyStyle(labelRef, {\n [styles.tokens.label.desktopLineClamp]:\n childrenMaxLines?.desktop == null\n ? null\n : `${childrenMaxLines.desktop}`,\n [styles.tokens.label.tabletLineClamp]:\n childrenMaxLines?.tablet == null\n ? null\n : `${childrenMaxLines.tablet}`,\n [styles.tokens.label.mobileLineClamp]:\n childrenMaxLines?.mobile == null\n ? null\n : `${childrenMaxLines.mobile}`,\n });\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n const isInteractionBlocked = !!disabled;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(checked);\n }, [checked]);\n\n useEffect(() => {\n if (selected) {\n setExpanded(initialExpanded ?? true);\n }\n }, [selected]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isInteractionBlocked) {\n event.preventDefault();\n return;\n }\n\n if (onChange) {\n onChange(event);\n return;\n }\n\n switch (type) {\n case \"checkbox\":\n setSelected((prevSelected) => {\n return !prevSelected;\n });\n break;\n case \"radio\":\n case \"yes\":\n case \"no\":\n if (!selected) {\n setSelected(true);\n }\n break;\n }\n };\n\n const handleExpandCollapseClick = () => {\n if (!disabled) {\n setExpanded(!expanded);\n }\n };\n\n const handleOnRemove = () => {\n if (!disabled) {\n if (onRemove) {\n onRemove();\n return;\n }\n }\n };\n\n const handleContainerClick = () => {\n inputRef?.current?.click();\n };\n\n const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n e.stopPropagation();\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const getContainerStateClass = () => {\n if (styleType === \"no-border\") {\n if (error) {\n return clsx(\n styles.colorBorderError,\n !disabled && styles.toggleContainerError\n );\n }\n\n if (disabled) {\n return selected\n ? styles.toggleContainerNoBorderDisabledSelected\n : styles.toggleContainerNoBorderDisabled;\n }\n\n if (selected) {\n return styles.toggleContainerNoBorderSelected;\n }\n\n return styles.toggleContainerNoBorder;\n }\n\n if (error) {\n return disabled\n ? styles.colorBorderError\n : styles.toggleContainerError;\n }\n\n if (disabled) {\n return selected\n ? styles.toggleContainerDisabledSelected\n : styles.toggleContainerDisabled;\n }\n\n if (selected) {\n return styles.toggleContainerSelected;\n }\n\n return styles.toggleContainer;\n };\n\n const getContainerHoverClass = () => {\n if (disabled) {\n return undefined;\n }\n\n if (!error && selected) {\n return styles.toggleContainerHoverSelected;\n }\n\n return styles.toggleContainerHoverDefault;\n };\n\n const getTextContainerStateClass = () => {\n if (disabled) {\n return selected\n ? styles.toggleTextContainerDisabledSelected\n : styles.colorTextDisabled;\n }\n\n if (selected) {\n return styles.toggleTextContainerSelected;\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIndicator = () => {\n let toggleIconType: ToggleIconType;\n\n switch (type) {\n case \"yes\":\n toggleIconType = \"tick\";\n break;\n case \"no\":\n toggleIconType = \"cross\";\n break;\n case \"checkbox\":\n case \"radio\":\n toggleIconType = type;\n break;\n }\n\n return (\n <ToggleIcon\n type={toggleIconType}\n active={selected}\n disabled={disabled}\n />\n );\n };\n\n const renderSubLabel = () => {\n if (!subLabel) {\n return null;\n }\n\n let component: string \| JSX.Element;\n\n if (typeof subLabel === \"function\") {\n component = subLabel();\n } else {\n component = subLabel;\n }\n\n // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n return (\n <div\n data-id=\"toggle-sublabel\"\n id={`${generatedId}-sublabel`}\n aria-hidden\n className={styles.subLabel}\n >\n {component}\n </div>\n );\n };\n\n const renderCompositeChildren = () => {\n return (\n (!collapsible \|\| expanded) && (\n <div\n data-id=\"toggle-composite-children\"\n className={clsx(\n styles.children,\n !collapsible && styles.childrenIsFinalItem,\n disabled && styles.colorTextDisabled\n )}\n >\n <Markup baseTextSize=\"body-md\">\n {compositeSectionChildren}\n </Markup>\n </div>\n )\n );\n };\n\n const renderExpandButton = () => {\n const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n return (\n collapsible && (\n <button\n className={clsx(\n styles.expandButton,\n disabled && styles.disabledColorCursor,\n collapsedWithoutErrors &&\n styles.expandButtonPaddingTopRequired\n )}\n disabled={disabled}\n onClick={handleExpandCollapseClick}\n data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n >\n {expanded ? \"Show less\" : \"Show more\"}\n {expanded ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </button>\n )\n );\n };\n\n const renderToggleWithRemoveButton = () => {\n const ariaDescriptions =\n [\n typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(\" \") \|\| undefined;\n\n return (\n <div\n id={`${generatedId}-header-container`}\n className={styles.headerContainer}\n >\n <div\n className={clsx(\n styles.indicatorLabelContainer,\n removable && styles.indicatorLabelContainerAddPadding\n )}\n >\n <div\n id={`${generatedId}-input-container`}\n onClick={handleContainerClick}\n className={styles.inputContainer}\n >\n <input\n ref={inputRef}\n name={name}\n id={`${generatedId}-input`}\n type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n data-testid=\"toggle-input\"\n className={clsx(\n styles.input,\n disabled && styles.toggleInputDisabled\n )}\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n onChange={handleOnChange}\n onClick={handleInputClick}\n checked={selected}\n tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n aria-describedby={ariaDescriptions}\n {...otherProps}\n />\n {indicator && renderIndicator()}\n <div\n className={clsx(\n styles.textContainer,\n getTextContainerStateClass()\n )}\n >\n <label\n ref={labelRef}\n htmlFor={`${generatedId}-input`}\n data-testid={`toggle-label`}\n id={`${generatedId}-label`}\n className={clsx(\n styles.label,\n selected\n ? styles.toggleLabelSelected\n : styles.toggleLabelDefault\n )}\n >\n {children}\n </label>\n {subLabel && renderSubLabel()}\n </div>\n </div>\n </div>\n {removable && (\n <button\n type=\"button\"\n className={clsx(\n styles.removeButton,\n disabled && styles.disabledColorCursor\n )}\n onClick={handleOnRemove}\n id={`${generatedId}-remove-button`}\n >\n Remove\n </button>\n )}\n </div>\n );\n };\n\n const renderErrorList = (errors: string[]) => {\n return (\n <>\n <Typography.BodyMD\n weight=\"semibold\"\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n Error\n </Typography.BodyMD>\n <TextList.Ul\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n {errors?.map((item, index) => {\n return (\n <li\n key={index}\n id={`${generatedId}-error-list-item-${index}`}\n >\n <Typography.BodyMD\n weight=\"semibold\"\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n {item}\n </Typography.BodyMD>\n </li>\n );\n })}\n </TextList.Ul>\n </>\n );\n };\n\n const renderError = () => {\n return (\n collapsible &&\n !expanded &&\n hasCompositeSectionError && (\n <div\n className={clsx(\n styles.errorContainer,\n disabled && styles.disabledColorCursor\n )}\n onClick={handleExpandCollapseClick}\n id={`${generatedId}-error-alert`}\n >\n <Alert\n type={disabled ? \"description\" : \"error\"}\n className={styles.alertContainer}\n showIcon\n >\n {Array.isArray(errors)\n ? renderErrorList(errors)\n : errors}\n </Alert>\n </div>\n )\n );\n };\n\n const renderCompositeSection = () => {\n return (\n compositeSectionChildren && (\n <div>\n {renderCompositeChildren()}\n {renderError()}\n {renderExpandButton()}\n </div>\n )\n );\n };\n\n return (\n <div\n className={clsx(\n styles.container,\n getContainerStateClass(),\n getContainerHoverClass(),\n !indicator && styles.noIndicatorContainer,\n useContentWidth && styles.useContentWidthContainer,\n className\n )}\n id={id}\n data-testid={testId}\n >\n {renderToggleWithRemoveButton()}\n {renderCompositeSection()}\n </div>\n );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","clsx","styles.expandButton","styles.disabledColorCursor","styles.expandButtonPaddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","Typography","BodyMD","weight","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"6hCAgBuBA,QAAAC,KACnBA,EAAO,WAAUC,UACjBA,EAASC,QACTA,EAAOC,UACPA,EAAY,UAASC,SACrBA,EAAQC,iBACRA,EAAgBC,SAChBA,EAAQC,SACRA,EAAQC,MACRA,EAAKC,KACLA,EAAIC,GACJA,EAAEC,UACFA,EAASC,iBACTA,EAAgBC,UAChBA,EAASC,sBACTA,EAAqBC,gBACrBA,EAAeC,SACfA,EAAQC,SACRA,EACA,cAAeC,EACf,mBAAoBC,KACjBC,EAAUC,EAAAA,OAAAtB,EArBM,CAAA,OAAA,YAAA,UAAA,YAAA,WAAA,mBAAA,WAAA,WAAA,QAAA,OAAA,KAAA,YAAA,mBAAA,YAAA,wBAAA,kBAAA,WAAA,WAAA,cAAA,qBA0BnB,MAAMuB,YACFA,GAAc,EAAIC,OAClBA,EACAnB,SAAUoB,EAAwBC,gBAClCA,GACAb,GAAoB,CAAA,GACjBc,EAAUC,GAAeC,EAAAA,SAA8B1B,IACvD2B,EAAUC,GAAeF,EAAAA,WAAoBH,GAC9CM,EAA2BC,EAAAA,SAAQ,KACrC,MAAMC,EAAeC,MAAMC,QAAQZ,KAAWA,aAAM,EAANA,EAAQa,QAAS,EACzDC,GAAmBH,MAAMC,QAAQZ,MAAaA,EACpD,OAAOU,GAAgBI,CAAe,GACvC,CAACd,IACEe,EAAWC,EAAAA,QACXC,EAAc9B,EAAK,GAAGA,IAAO,MAAM4B,IAEnCG,EAAWC,EAAAA,OAAyB,MACpCC,EAAWD,EAAAA,OAAyB,MAE1CE,EAAAA,cAAcD,EAAU,CACpB,CAACE,SAAcC,MAAMC,kBACY,OAA7B1C,aAAgB,EAAhBA,EAAkB2C,SACZ,KACA,GAAG3C,EAAiB2C,UAC9B,CAACH,SAAcC,MAAMG,iBACW,OAA5B5C,aAAgB,EAAhBA,EAAkB6C,QACZ,KACA,GAAG7C,EAAiB6C,SAC9B,CAACL,SAAcC,MAAMK,iBACW,OAA5B9C,aAAgB,EAAhBA,EAAkB+C,QACZ,KACA,GAAG/C,EAAiB+C,WAGlC,MAAMC,IAA4B9C,KAAcO,EAC1CwC,IAAqB/C,IAAaO,EAClCyC,IAAyBhD,EAK/BiD,EAAAA,WAAU,KACN7B,EAAYzB,EAAQ,GACrB,CAACA,IAEJsD,EAAAA,WAAU,KACF9B,GACAI,EAAYL,SAAAA,EAChB,GACD,CAACC,IAKJ,MAAM+B,EAAkBC,IACpB,GAAIH,EACAG,EAAMC,sBAIV,GAAI1C,EACAA,EAASyC,QAIb,OAAQ1D,GACJ,IAAK,WACD2B,GAAaiC,IACDA,IAEZ,MACJ,IAAK,QACL,IAAK,MACL,IAAK,KACIlC,GACDC,GAAY,KAMtBkC,EAA4B,KACzBtD,GACDuB,GAAaD,EACjB,EAGEiC,GAAiB,KACdvD,IACGS,GACAA,GAGR,EAGE+C,GAAuB,WACR,QAAjBhE,EAAA0C,aAAQ,EAARA,EAAUuB,eAAO,IAAAjE,GAAAA,EAAEkE,OAAO,EAGxBC,GAAoBC,IACtBA,EAAEC,iBAAiB,EA2EjBC,GAAkB,KACpB,IAAIC,EAEJ,OAAQtE,GACJ,IAAK,MACDsE,EAAiB,OACjB,MACJ,IAAK,KACDA,EAAiB,QACjB,MACJ,IAAK,WACL,IAAK,QACDA,EAAiBtE,EAIzB,OACIuE,EAAAA,IAACC,aAAU,CACPxE,KAAMsE,EACNG,OAAQ/C,EACRnB,SAAUA,GACZ,EAIJmE,GAAiB,KACnB,IAAKpE,EACD,OAAO,KAGX,IAAIqE,EASJ,OANIA,EADoB,mBAAbrE,EACKA,IAEAA,EAKZiE,EAAAA,IAAA,MAAA,CAAA,UACY,kBACR7D,GAAI,GAAG8B,8BAEP7B,UAAWiE,EAAAA,kBAEVD,GACC,EAuBRE,GAAqB,KACvB,MAAMC,GAA0BjD,IAAaE,EAE7C,OACIT,GACIyD,OAAA,SAAA,CACIpE,UAAWqE,EAAAA,QACPC,EAAAA,aACA1E,GAAY2E,EAAAA,oBACZJ,GACIK,EAAAA,gCAER5E,SAAUA,EACV6E,QAASvB,EAAyB,cACrBhC,EAAW,kBAAoB,gBAAezB,SAAA,CAE1DyB,EAAW,YAAc,YACzBA,EACG0C,EAAAA,IAACc,EAAAA,cAAa,CAAA,eAAA,IAEdd,EAAAA,IAACe,EAAAA,sCAGZ,EA0FHC,GAAmBhE,GAEjBwD,EAAAA,KAAAS,EAAAA,SAAA,CAAApF,SAAA,CACImE,MAACkB,EAAAA,WAAWC,OAAM,CACdC,OAAO,WACPhF,UAAWqE,EAAAA,QACPY,iBACArF,GAAYsF,EAAAA,mBACfzF,SAAA,UAILmE,EAAAA,IAACuB,WAASC,GAAE,CACRpF,UAAWqE,EAAAA,QACPY,EAAAA,eACArF,GAAYsF,EAAAA,mBACfzF,SAEAmB,aAAM,EAANA,EAAQyE,KAAI,CAACC,EAAMC,IAEZ3B,MAAA,KAAA,CAEI7D,GAAI,GAAG8B,qBAA+B0D,IAAO9F,SAE7CmE,EAAAA,IAACkB,EAAAA,WAAWC,QACRC,OAAO,WACPhF,UAAWqE,EAAAA,QACPY,EAAAA,eACArF,GAAYsF,EAAAA,4BAGfI,KAVAC,UA2DjC,OACInB,cACIpE,UAAWqE,EAAAA,QACPmB,EAAAA,UA7UU,cAAdhG,EACIK,EACOwE,UACHoB,EAAAA,kBACC7F,GAAY8F,EAAAA,sBAIjB9F,EACOmB,EACD4E,EAAAA,wCACAC,EAAAA,gCAGN7E,EACO8E,EAAAA,gCAGJC,EAAAA,wBAGPjG,EACOD,EACD6F,EAAAA,iBACAC,EAAAA,qBAGN9F,EACOmB,EACDgF,EAAAA,gCACAC,EAAAA,wBAGNjF,EACOkF,EAAAA,wBAGJC,EAAAA,gBAGoB,MAC3B,IAAItG,EAIJ,OAAKC,GAASkB,EACHoF,EAAAA,6BAGJC,EAAAA,2BAAkC,EA8RjCC,IACC/G,GAAagH,EAAAA,qBACdlG,GAAmBmG,EAAAA,yBACnBvG,GAEJD,GAAIA,EAAE,cACOQ,YAjLgB,MACjC,MAAMiG,EACF,CACwB,iBAAb7G,EAAwB,GAAGkC,aAAyB,KAC3DrB,GAECiG,OAAOC,SACPC,KAAK,WAAQC,EAEtB,OACIxC,OAAA,MAAA,CACIrE,GAAI,GAAG8B,qBACP7B,UAAW6G,EAAAA,gBAAsBpH,SAAA,CAEjCmE,EAAAA,WACI5D,UAAWqE,EAAAA,QACPyC,0BACA5G,GAAa6G,EAAAA,mCAChBtH,SAED2E,EAAAA,KAAA,MAAA,CACIrE,GAAI,GAAG8B,oBACP4C,QAASrB,GACTpD,UAAWgH,EAAAA,eAAqBvH,SAAA,CAEhCmE,6BACIqD,IAAKnF,EACLhC,KAAMA,EACNC,GAAI,GAAG8B,UACPxC,KAAe,aAATA,EAAsB,WAAa,QAAO,cACpC,eACZW,UAAWqE,UACP6C,EAAAA,MACAtH,GAAYuH,uBAEhBvH,SAAU+C,EAAgB,gBACXD,EACfpC,SAAUwC,EACV2B,QAASlB,GACThE,QAASwB,EACTqG,SAAU1E,EAA0B,OAAIkE,EAAS,mBAC/BJ,GACd/F,IAEPnB,GAAaoE,KACdU,EAAAA,KAAA,MAAA,CACIpE,UAAWqE,EAAAA,QACPgD,gBA9JpBzH,EACOmB,EACDuG,EAAAA,oCACApC,EAAAA,kBAGNnE,EACOwG,EAAAA,iCADX,GA0JqB9H,SAAA,CAEDmE,EAAAA,aACIqD,IAAKjF,EACLwF,QAAS,GAAG3F,UAAmB,cAClB,eACb9B,GAAI,GAAG8B,UACP7B,UAAWqE,EAAAA,QACPoD,EAAAA,MACA1G,EACM2G,EAAAA,oBACAC,EAAAA,6BAGTlI,IAEJE,GAAYoE,aAIxB7D,GACG0D,EAAAA,IAAA,SAAA,CACIvE,KAAK,SACLW,UAAWqE,EAAAA,QACPuD,EAAAA,aACAhI,GAAY2E,EAAAA,qBAEhBE,QAAStB,GACTpD,GAAI,GAAG8B,kBAA2BpC,SAAA,aAKxC,EAiGLoI,GAvBDhH,GACIuD,EAAAA,KAAA,MAAA,CAAA3E,SAAA,GAzMFkB,GAAeO,IACb0C,EAAAA,IAAA,MAAA,CAAA,UACY,4BACR5D,UAAWqE,UACPyD,EAAAA,UACCnH,GAAeoH,sBAChBnI,GAAYsF,EAAAA,mBACfzF,SAEDmE,EAAAA,IAACoE,EAAAA,OAAM,CAACC,aAAa,UAASxI,SACzBoB,MAmKbF,IACCO,GACDE,GACIwC,EAAAA,IAAA,MAAA,CACI5D,UAAWqE,EAAAA,QACP6D,EAAAA,eACAtI,GAAY2E,EAAAA,qBAEhBE,QAASvB,EACTnD,GAAI,GAAG8B,gBAAyBpC,SAEhCmE,EAAAA,IAACuE,EAAAA,MAAK,CACF9I,KAAMO,EAAW,cAAgB,QACjCI,UAAWoI,EAAAA,eACXC,UAAQ,EAAA5I,SAEP8B,MAAMC,QAAQZ,GACTgE,GAAgBhE,GAChBA,MAaTsD,UAqBP"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./toggle.styles_1yzqsu.css");exports.alertContainer="aeqryui",exports.children="c1mf9nso",exports.childrenIsFinalItem="c9t56r4",exports.colorBorderError="c17z2k4k",exports.colorTextDisabled="c1y0x62l",exports.colorTextError="c1gmwtb7",exports.container="c11szvws",exports.disabledColorCursor="d194isif",exports.errorContainer="e1q8ywpe",exports.expandButton="ehwglic",exports.expandButtonPaddingTopRequired="ejwzsce",exports.headerContainer="h1fyul7s",exports.indicatorLabelContainer="i1l466bv",exports.indicatorLabelContainerAddPadding="ih3od2r",exports.input="i14lgw6r",exports.inputContainer="iangfw6",exports.label="l1oixyvr",exports.noIndicatorContainer="n12ofp2c",exports.removeButton="r1izng22",exports.subLabel="s17sf3sp",exports.textContainer="tybgacj",exports.toggleContainer="t1cyflot",exports.toggleContainerDisabled="t1l2ct9g",exports.toggleContainerDisabledSelected="t1qqpl3b",exports.toggleContainerError="t1graj5g",exports.toggleContainerHoverDefault="txm5wyu",exports.toggleContainerHoverSelected="t1nsq3eo",exports.toggleContainerNoBorder="tnwn55u",exports.toggleContainerNoBorderDisabled="td5xote",exports.toggleContainerNoBorderDisabledSelected="tfiow01",exports.toggleContainerNoBorderSelected="t15nuck4",exports.toggleContainerSelected="t1tat3es",exports.toggleInputDisabled="tovnc4j",exports.toggleLabelDefault="t1elmp69",exports.toggleLabelSelected="tv1hw4w",exports.toggleTextContainerDisabledSelected="t1aku79x",exports.toggleTextContainerSelected="tvkjim3",exports.tokens={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}},exports.useContentWidthContainer="u1l0nsei";
+"use strict";require("./toggle.styles_1t5qrye.css");exports.alertContainer="aeqryui",exports.children="c1mf9nso",exports.childrenIsFinalItem="c9t56r4",exports.colorBorderError="c17z2k4k",exports.colorTextDisabled="c1y0x62l",exports.colorTextError="c1gmwtb7",exports.container="c11szvws",exports.disabledColorCursor="d194isif",exports.errorContainer="e1q8ywpe",exports.expandButton="ehwglic",exports.expandButtonPaddingTopRequired="ejwzsce",exports.headerContainer="h1fyul7s",exports.indicatorLabelContainer="i1l466bv",exports.indicatorLabelContainerAddPadding="ih3od2r",exports.input="i14lgw6r",exports.inputContainer="iangfw6",exports.label="l1oixyvr",exports.noIndicatorContainer="n12ofp2c",exports.removeButton="r1izng22",exports.subLabel="s17sf3sp",exports.textContainer="tybgacj",exports.toggleContainer="t1cyflot",exports.toggleContainerDisabled="t1l2ct9g",exports.toggleContainerDisabledSelected="t1qqpl3b",exports.toggleContainerError="t1graj5g",exports.toggleContainerHoverDefault="txm5wyu",exports.toggleContainerHoverSelected="t1nsq3eo",exports.toggleContainerNoBorder="tnwn55u",exports.toggleContainerNoBorderDisabled="td5xote",exports.toggleContainerNoBorderDisabledSelected="tfiow01",exports.toggleContainerNoBorderSelected="t15nuck4",exports.toggleContainerSelected="t1tat3es",exports.toggleInputDisabled="tovnc4j",exports.toggleLabelDefault="t1elmp69",exports.toggleLabelSelected="tv1hw4w",exports.toggleTextContainerDisabledSelected="t1aku79x",exports.toggleTextContainerSelected="tvkjim3",exports.tokens={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}},exports.useContentWidthContainer="u1l0nsei";
 //# sourceMappingURL=toggle.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.styles.js","sources":["../../../src/toggle/toggle.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport * as toggleIconStyles from \"./toggle-icon.styles\";\n\nexport const tokens = {\n label: {\n desktopLineClamp: \"--fds-internal-toggle-label-desktopLineClamp\",\n tabletLineClamp: \"--fds-internal-toggle-label-tabletLineClamp\",\n mobileLineClamp: \"--fds-internal-toggle-label-mobileLineClamp\",\n },\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const headerContainer = css`\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n`;\n\nexport const textContainer = css`\n display: flex;\n flex-direction: column;\n overflow-wrap: anywhere;\n width: 100%;\n overflow: hidden;\n color: ${Colour.text};\n`;\n\nexport const toggleTextContainerSelected = css`\n color: ${Colour[\"text-selected\"]};\n`;\n\nexport const toggleTextContainerDisabledSelected = css`\n color: ${Colour[\"text-selected-disabled\"]};\n`;\n\nexport const container = css`\n position: relative;\n display: inline-flex;\n min-width: 10.375rem;\n border-radius: ${Radius[\"sm\"]};\n border-width: 1px;\n border-style: solid;\n overflow: hidden;\n flex-direction: column;\n height: fit-content;\n background: ${Colour.bg};\n\n &:focus-within {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const noIndicatorContainer = css`\n justify-content: center;\n`;\n\nexport const useContentWidthContainer = css`\n min-width: unset;\n`;\n\nexport const colorBorderError = css`\n border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerNoBorderDisabledSelected = css`\n border: none;\n background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerNoBorderDisabled = css`\n border: none;\n`;\n\nexport const toggleContainerNoBorderSelected = css`\n border: none;\n background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerNoBorder = css`\n border: none;\n`;\n\nexport const toggleContainerError = css`\n border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerDisabledSelected = css`\n border-color: ${Colour[\"border-selected-disabled\"]};\n background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerDisabled = css`\n border-color: ${Colour[\"border-disabled\"]};\n background: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const toggleContainerSelected = css`\n border-color: ${Colour[\"border-selected\"]};\n background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerHoverSelected = css`\n &:has(.${headerContainer}:hover) {\n @media (pointer: fine) {\n background: ${Colour[\"bg-selected-hover\"]};\n\n & .${textContainer} {\n color: ${Colour[\"text-selected-hover\"]};\n }\n\n & .${toggleIconStyles.wrapperBase} {\n color: ${Colour[\"icon-selected-hover\"]};\n }\n }\n }\n`;\n\nexport const toggleContainer = css`\n border-color: ${Colour.border};\n`;\n\nexport const toggleContainerHoverDefault = css`\n &:has(.${headerContainer}:hover) {\n @media (pointer: fine) {\n background: ${Colour[\"bg-hover-subtle\"]};\n }\n }\n`;\n\nexport const input = css`\n position: absolute;\n height: 100%;\n width: 100%;\n cursor: pointer;\n top: 0;\n left: 0;\n opacity: 0;\n\n /* Hide appearance but keep it focusable using keyboard interactions */\n appearance: none;\n background: transparent;\n border: none;\n`;\n\nexport const toggleInputDisabled = css`\n cursor: not-allowed;\n`;\n\nexport const inputContainer = css`\n display: flex;\n`;\n\nexport const label = css`\n overflow: hidden;\n display: -webkit-box;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n overflow-wrap: break-word;\n\n ${tokens.label.desktopLineClamp}: initial;\n ${tokens.label.tabletLineClamp}: initial;\n ${tokens.label.mobileLineClamp}: initial;\n\n -webkit-line-clamp: var(${tokens.label.desktopLineClamp}, none);\n ${MediaQuery.MaxWidth.lg} {\n -webkit-line-clamp: var(${tokens.label.tabletLineClamp}, none);\n }\n ${MediaQuery.MaxWidth.sm} {\n -webkit-line-clamp: var(${tokens.label.mobileLineClamp}, none);\n }\n`;\n\nexport const toggleLabelDefault = css`\n ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const toggleLabelSelected = css`\n ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const subLabel = css`\n ${Font[\"body-md-regular\"]}\n margin-top: 0.5rem;\n\n z-index: 1; // forces sublabel to render above the input\n pointer-events: none; // to allow click events to be passed to the input\n\n strong,\n b {\n ${Font[\"body-md-semibold\"]}\n }\n`;\n\nexport const indicatorLabelContainer = css`\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n padding: 0.6875rem 1rem;\n`;\n\nexport const indicatorLabelContainerAddPadding = css`\n padding: 0.6875rem 0rem 0.6875rem 1rem;\n`;\n\nexport const removeButton = css`\n color: ${Colour[\"text-error\"]};\n white-space: nowrap;\n ${Font[\"body-md-semibold\"]}\n height: fit-content;\n padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n border: none;\n background: none;\n cursor: pointer;\n`;\n\nexport const disabledColorCursor = css`\n color: ${Colour[\"text-disabled\"]};\n cursor: not-allowed;\n`;\n\nexport const expandButton = css`\n color: ${Colour[\"text-primary\"]};\n ${Font[\"body-baseline-semibold\"]}\n display: flex;\n align-items: center;\n justify-content: flex-end;\n border: none;\n background-color: ${Colour.bg};\n cursor: pointer;\n padding: 0 1rem 0.6875rem 1rem;\n width: 100%;\n\n svg {\n width: 1em;\n height: 1em;\n margin-left: 0.5rem;\n }\n`;\n\nexport const expandButtonPaddingTopRequired = css`\n padding-top: 0.6875rem;\n`;\n\nexport const errorContainer = css`\n width: 100%;\n color: ${Colour[\"text-error\"]};\n border: none;\n background: ${Colour.bg};\n cursor: pointer;\n padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const children = css`\n padding: 0 1rem;\n padding-top: 0.6875rem;\n padding-bottom: 0.5rem;\n background-color: ${Colour.bg};\n color: ${Colour.text};\n`;\n\nexport const childrenIsFinalItem = css`\n padding-bottom: 0.6875rem;\n`;\n\nexport const colorTextDisabled = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const colorTextError = css`\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const alertContainer = css`\n width: 100%;\n user-select: none;\n`;\n"],"names":["label","desktopLineClamp","tabletLineClamp","mobileLineClamp"],"mappings":"~~gGAuR2B~~,2BApBN,uCAQW,mCAzMH,qCA6MC,kCAIH,6BA3OL,uCAsLU,kCA4BL,gCAvBF,iDAmBkB,kCArOf,2CAsLQ,qDAQU,wBAxE5B,kCAmBS,wBAIT,wCApGe,gCAyJR,4BAzBJ,iCAnKK,kCAoGE,2CA1BQ,mDALQ,wCAJX,+CAuCO,+CApBC,2CAvBL,kDATQ,0DALQ,kDASR,2CAuBR,uCAgDJ,qCA4BD,uCAIC,sDAlJgB,+CAJR,yBA3BlB,CAClBA,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB,iFAqDY"}
1	+ {"version":3,"file":"toggle.styles.js","sources":["../../../src/toggle/toggle.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport * as toggleIconStyles from \"./toggle-icon.styles\";\n\nexport const tokens = {\n label: {\n desktopLineClamp: \"--fds-internal-toggle-label-desktopLineClamp\",\n tabletLineClamp: \"--fds-internal-toggle-label-tabletLineClamp\",\n mobileLineClamp: \"--fds-internal-toggle-label-mobileLineClamp\",\n },\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const headerContainer = css`\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n`;\n\nexport const textContainer = css`\n display: flex;\n flex-direction: column;\n overflow-wrap: anywhere;\n width: 100%;\n overflow: hidden;\n color: ${Colour.text};\n`;\n\nexport const toggleTextContainerSelected = css`\n color: ${Colour[\"text-selected\"]};\n`;\n\nexport const toggleTextContainerDisabledSelected = css`\n color: ${Colour[\"text-selected-disabled\"]};\n`;\n\nexport const container = css`\n position: relative;\n display: inline-flex;\n min-width: 10.375rem;\n border-radius: ${Radius[\"sm\"]};\n border-width: 1px;\n border-style: solid;\n overflow: hidden;\n flex-direction: column;\n height: fit-content;\n background: ${Colour.bg};\n\n &:focus-within {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 0;\n }\n`;\n\nexport const noIndicatorContainer = css`\n justify-content: center;\n`;\n\nexport const useContentWidthContainer = css`\n min-width: unset;\n`;\n\nexport const colorBorderError = css`\n border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerNoBorderDisabledSelected = css`\n border: none;\n background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerNoBorderDisabled = css`\n border: none;\n`;\n\nexport const toggleContainerNoBorderSelected = css`\n border: none;\n background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerNoBorder = css`\n border: none;\n`;\n\nexport const toggleContainerError = css`\n border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerDisabledSelected = css`\n border-color: ${Colour[\"border-selected-disabled\"]};\n background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerDisabled = css`\n border-color: ${Colour[\"border-disabled\"]};\n background: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const toggleContainerSelected = css`\n border-color: ${Colour[\"border-selected\"]};\n background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerHoverSelected = css`\n &:has(.${headerContainer}:hover) {\n @media (pointer: fine) {\n background: ${Colour[\"bg-selected-hover\"]};\n\n & .${textContainer} {\n color: ${Colour[\"text-selected-hover\"]};\n }\n\n & .${toggleIconStyles.wrapperBase} {\n color: ${Colour[\"icon-selected-hover\"]};\n }\n }\n }\n`;\n\nexport const toggleContainer = css`\n border-color: ${Colour.border};\n`;\n\nexport const toggleContainerHoverDefault = css`\n &:has(.${headerContainer}:hover) {\n @media (pointer: fine) {\n background: ${Colour[\"bg-hover-subtle\"]};\n }\n }\n`;\n\nexport const input = css`\n position: absolute;\n height: 100%;\n width: 100%;\n cursor: pointer;\n top: 0;\n left: 0;\n opacity: 0;\n\n /* Hide appearance but keep it focusable using keyboard interactions */\n appearance: none;\n background: transparent;\n border: none;\n`;\n\nexport const toggleInputDisabled = css`\n cursor: not-allowed;\n`;\n\nexport const inputContainer = css`\n display: flex;\n`;\n\nexport const label = css`\n overflow: hidden;\n display: -webkit-box;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n overflow-wrap: break-word;\n\n ${tokens.label.desktopLineClamp}: initial;\n ${tokens.label.tabletLineClamp}: initial;\n ${tokens.label.mobileLineClamp}: initial;\n\n -webkit-line-clamp: var(${tokens.label.desktopLineClamp}, none);\n ${MediaQuery.MaxWidth.lg} {\n -webkit-line-clamp: var(${tokens.label.tabletLineClamp}, none);\n }\n ${MediaQuery.MaxWidth.sm} {\n -webkit-line-clamp: var(${tokens.label.mobileLineClamp}, none);\n }\n`;\n\nexport const toggleLabelDefault = css`\n ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const toggleLabelSelected = css`\n ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const subLabel = css`\n ${Font[\"body-md-regular\"]}\n margin-top: 0.5rem;\n\n z-index: 1; // forces sublabel to render above the input\n pointer-events: none; // to allow click events to be passed to the input\n\n strong,\n b {\n ${Font[\"body-md-semibold\"]}\n }\n`;\n\nexport const indicatorLabelContainer = css`\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n padding: 0.6875rem 1rem;\n`;\n\nexport const indicatorLabelContainerAddPadding = css`\n padding: 0.6875rem 0rem 0.6875rem 1rem;\n`;\n\nexport const removeButton = css`\n color: ${Colour[\"text-error\"]};\n white-space: nowrap;\n ${Font[\"body-md-semibold\"]}\n height: fit-content;\n padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n border: none;\n background: none;\n cursor: pointer;\n`;\n\nexport const disabledColorCursor = css`\n color: ${Colour[\"text-disabled\"]};\n cursor: not-allowed;\n`;\n\nexport const expandButton = css`\n color: ${Colour[\"text-primary\"]};\n ${Font[\"body-baseline-semibold\"]}\n display: flex;\n align-items: center;\n justify-content: flex-end;\n border: none;\n background-color: ${Colour.bg};\n cursor: pointer;\n padding: 0 1rem 0.6875rem 1rem;\n width: 100%;\n\n svg {\n width: 1em;\n height: 1em;\n margin-left: 0.5rem;\n }\n`;\n\nexport const expandButtonPaddingTopRequired = css`\n padding-top: 0.6875rem;\n`;\n\nexport const errorContainer = css`\n width: 100%;\n color: ${Colour[\"text-error\"]};\n border: none;\n background: ${Colour.bg};\n cursor: pointer;\n padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const children = css`\n padding: 0 1rem;\n padding-top: 0.6875rem;\n padding-bottom: 0.5rem;\n background-color: ${Colour.bg};\n color: ${Colour.text};\n`;\n\nexport const childrenIsFinalItem = css`\n padding-bottom: 0.6875rem;\n`;\n\nexport const colorTextDisabled = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const colorTextError = css`\n color: ${Colour[\"text-error\"]};\n`;\n\nexport const alertContainer = css`\n width: 100%;\n user-select: none;\n`;\n"],"names":["label","desktopLineClamp","tabletLineClamp","mobileLineClamp"],"mappings":"iGAuR2B,2BApBN,uCAQW,mCAzMH,qCA6MC,kCAIH,6BA3OL,uCAsLU,kCA4BL,gCAvBF,iDAmBkB,kCArOf,2CAsLQ,qDAQU,wBAxE5B,kCAmBS,wBAIT,wCApGe,gCAyJR,4BAzBJ,iCAnKK,kCAoGE,2CA1BQ,mDALQ,wCAJX,+CAuCO,+CApBC,2CAvBL,kDATQ,0DALQ,kDASR,2CAuBR,uCAgDJ,qCA4BD,uCAIC,sDAlJgB,+CAJR,yBA3BlB,CAClBA,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB,iFAqDY"}

package/cjs/toggle/toggle.styles_1t5qrye.css ADDED Viewed

@@ -0,0 +1,38 @@
+.h1fyul7s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
+.tybgacj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:anywhere;width:100%;overflow:hidden;color:var(--fds-colour-text);}
+.tvkjim3{color:var(--fds-colour-text-selected);}
+.t1aku79x{color:var(--fds-colour-text-selected-disabled);}
+.c11szvws{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:10.375rem;border-radius:var(--fds-radius-sm);border-width:1px;border-style:solid;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:var(--fds-colour-bg);}.c11szvws:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+.n12ofp2c{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.u1l0nsei{min-width:unset;}
+.c17z2k4k{border-color:var(--fds-colour-border-error);}
+.tfiow01{border:none;background:var(--fds-colour-bg-selected-disabled);}
+.td5xote{border:none;}
+.t15nuck4{border:none;background:var(--fds-colour-bg-selected);}
+.tnwn55u{border:none;}
+.t1graj5g{border-color:var(--fds-colour-border-error);}
+.t1qqpl3b{border-color:var(--fds-colour-border-selected-disabled);background:var(--fds-colour-bg-selected-disabled);}
+.t1l2ct9g{border-color:var(--fds-colour-border-disabled);background:var(--fds-colour-bg-disabled);}
+.t1tat3es{border-color:var(--fds-colour-border-selected);background:var(--fds-colour-bg-selected);}
+@media (pointer: fine){.t1nsq3eo:has(.h1fyul7s:hover){background:var(--fds-colour-bg-selected-hover);}.t1nsq3eo:has(.h1fyul7s:hover) .tybgacj{color:var(--fds-colour-text-selected-hover);}.t1nsq3eo:has(.h1fyul7s:hover) .wxufi5f{color:var(--fds-colour-icon-selected-hover);}}
+.t1cyflot{border-color:var(--fds-colour-border);}
+@media (pointer: fine){.txm5wyu:has(.h1fyul7s:hover){background:var(--fds-colour-bg-hover-subtle);}}
+.i14lgw6r{position:absolute;height:100%;width:100%;cursor:pointer;top:0;left:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
+.tovnc4j{cursor:not-allowed;}
+.iangfw6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.l1oixyvr{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;overflow-wrap:break-word;--fds-internal-toggle-label-desktopLineClamp:initial;--fds-internal-toggle-label-tabletLineClamp:initial;--fds-internal-toggle-label-mobileLineClamp:initial;-webkit-line-clamp:var(--fds-internal-toggle-label-desktopLineClamp, none);}:where(body.fds-breakpoint-lg-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-tabletLineClamp, none);}:where(body.fds-breakpoint-sm-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-mobileLineClamp, none);}
+.t1elmp69{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.tv1hw4w{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.s17sf3sp{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:0.5rem;z-index:1;pointer-events:none;}.s17sf3sp strong,.s17sf3sp b{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.i1l466bv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;position:relative;padding:0.6875rem 1rem;}
+.ih3od2r{padding:0.6875rem 0rem 0.6875rem 1rem;}
+.r1izng22{color:var(--fds-colour-text-error);white-space:nowrap;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.6875rem 1rem 0.6875rem 0.5rem;border:none;background:none;cursor:pointer;}
+.d194isif{color:var(--fds-colour-text-disabled);cursor:not-allowed;}
+.ehwglic{color:var(--fds-colour-text-primary);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);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:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;border:none;background-color:var(--fds-colour-bg);cursor:pointer;padding:0 1rem 0.6875rem 1rem;width:100%;}.ehwglic svg{width:1em;height:1em;margin-left:0.5rem;}
+.ejwzsce{padding-top:0.6875rem;}
+.e1q8ywpe{width:100%;color:var(--fds-colour-text-error);border:none;background:var(--fds-colour-bg);cursor:pointer;padding:0.6875rem 1rem 0.5rem 1rem;}
+.c1mf9nso{padding:0 1rem;padding-top:0.6875rem;padding-bottom:0.5rem;background-color:var(--fds-colour-bg);color:var(--fds-colour-text);}
+.c9t56r4{padding-bottom:0.6875rem;}
+.c1y0x62l{color:var(--fds-colour-text-disabled);}
+.c1gmwtb7{color:var(--fds-colour-text-error);}
+.aeqryui{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

package/cjs/typography/typography.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/external"),s=require("clsx"),i=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/utils/use-apply-styles.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./typography.styles.js"),o=require("./typography-text.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(s),u=d(i);const y=e=>e||"regular",g=e=>o.typographySize[e],h=e=>o.typographyWeight[e],x=(e,r)=>r?l.paragraph:e?l.displayInline:l.displayBlock,c=(a,s,i)=>{const o=u.default.forwardRef((function(i,o){var{className:d,as:c,inline:m,maxLines:j,paragraph:f,weight:q}=i,L=e.__rest(i,["className","as","inline","maxLines","paragraph","weight"]);const B=y(q),S=u.default.useRef(null),b=t.mergeRefs(S,o),k=((e,r,a)=>!!e&&(a||!r))(j,m,f);n.useApplyStyle(S,{[l.tokens.typographyBase.maxLines]:k?j:null});const H=m?"span":c||a;return r.jsx(H,Object.assign({ref:b,className:p.default(l.typographyBase,g(s),h(B),x(m,f),k&&l.lineClamp,d)},L))}));return o.displayName=`Typography.${i}`,o},m=(e,r,a)=>c(e,r,a),j=m("h1","heading-xxl","HeadingXXL"),f=m("h2","heading-xl","HeadingXL"),q=m("h3","heading-lg","HeadingLG"),L=m("h4","heading-md","HeadingMD"),B=m("h5","heading-sm","HeadingSM"),S=m("h6","heading-xs","HeadingXS"),b=(e,r)=>c("p",e,r),k=b("body-baseline","BodyBL"),H=b("body-md","BodyMD"),M=b("body-sm","BodySM"),X=b("body-xs","BodyXS"),v=(s,i)=>{const n=u.default.forwardRef((function(i,n){var{weight:t,children:o,external:d,underlineStyle:u="underline",className:x}=i,c=e.__rest(i,["weight","children","external","underlineStyle","className"]);const m=y(t);return r.jsxs("a",Object.assign({ref:n,className:p.default(l.typographyBase,l.hyperlinkBase,g(s),h(m),"none"===u?l.noUnderline:l.underline,x)},c,{children:[o,d&&r.jsx(a.ExternalIcon,{className:l.externalIcon})]}))}));return n.displayName=`Typography.${i}`,n},N=v("body-baseline","LinkBL"),w=v("body-md","LinkMD"),D=v("body-sm","LinkSM"),_=v("body-xs","LinkXS");exports.BodyBL=k,exports.BodyMD=H,exports.BodySM=M,exports.BodyXS=X,exports.HeadingLG=q,exports.HeadingMD=L,exports.HeadingSM=B,exports.HeadingXL=f,exports.HeadingXS=S,exports.HeadingXXL=j,exports.LinkBL=N,exports.LinkMD=w,exports.LinkSM=D,exports.LinkXS=_;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/external"),s=require("clsx"),i=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var t=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("./typography.styles.js"),l=require("./typography-text.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(s),u=d(i);const y=e=>e||"regular",h=e=>l.typographySize[e],g=e=>l.typographyWeight[e],x=(e,r)=>r?o.paragraph:e?o.displayInline:o.displayBlock,c=(a,s,i,l)=>{const d=u.default.forwardRef((function(i,d){var{className:c,as:m,inline:j,maxLines:q,paragraph:f,weight:L}=i,B=e.__rest(i,["className","as","inline","maxLines","paragraph","weight"]);const S=y(L),b=u.default.useRef(null),k=n.mergeRefs(b,d),H=((e,r,a)=>!!e&&(a||!r))(q,j,f);t.useApplyStyle(b,{[o.tokens.typographyBase.maxLines]:H?q:null});const M=j?"span":m||a;return r.jsx(M,Object.assign({ref:k,className:p.default(o.typographyBase,l?o.typographyHeader:o.typographyBody,h(s),g(S),x(j,f),H&&o.lineClamp,c)},B))}));return d.displayName=`Typography.${i}`,d},m=(e,r,a)=>c(e,r,a,!0),j=m("h1","heading-xxl","HeadingXXL"),q=m("h2","heading-xl","HeadingXL"),f=m("h3","heading-lg","HeadingLG"),L=m("h4","heading-md","HeadingMD"),B=m("h5","heading-sm","HeadingSM"),S=m("h6","heading-xs","HeadingXS"),b=(e,r)=>c("p",e,r,!1),k=b("body-baseline","BodyBL"),H=b("body-md","BodyMD"),M=b("body-sm","BodySM"),X=b("body-xs","BodyXS"),v=(s,i)=>{const t=u.default.forwardRef((function(i,t){var{weight:n,children:l,external:d,underlineStyle:u="underline",className:x}=i,c=e.__rest(i,["weight","children","external","underlineStyle","className"]);const m=y(n);return r.jsxs("a",Object.assign({ref:t,className:p.default(o.typographyBase,o.typographyBody,o.hyperlinkBase,h(s),g(m),"none"===u?o.noUnderline:o.underline,x)},c,{children:[l,d&&r.jsx(a.ExternalIcon,{className:o.externalIcon})]}))}));return t.displayName=`Typography.${i}`,t},N=v("body-baseline","LinkBL"),w=v("body-md","LinkMD"),D=v("body-sm","LinkSM"),_=v("body-xs","LinkXS");exports.BodyBL=k,exports.BodyMD=H,exports.BodySM=M,exports.BodyXS=X,exports.HeadingLG=f,exports.HeadingMD=L,exports.HeadingSM=B,exports.HeadingXL=q,exports.HeadingXS=S,exports.HeadingXXL=j,exports.LinkBL=N,exports.LinkMD=w,exports.LinkSM=D,exports.LinkXS=_;
 //# sourceMappingURL=typography.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.js","sources":["../../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n TypographyLinkProps,\n TypographyProps,\n TypographySize,\n TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n weight: TypographyWeight \| undefined\n): TypographyWeight => weight \|\| \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => {\n if (paragraph) {\n return styles.paragraph;\n }\n\n if (inline) {\n return styles.displayInline;\n }\n\n return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n maxLines: number \| undefined,\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => !!maxLines && (paragraph \|\| !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n tag: TTag,\n textStyle: TypographySize,\n displayName: string\n) => {\n const TypographyText = React.forwardRef<\n React.ComponentRef<TTag>,\n TypographyProps\n >(function TypographyTextComponent(\n {\n className,\n as: asProp,\n inline,\n maxLines,\n paragraph,\n weight,\n ...restProps\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n const textRef = React.useRef<React.ComponentRef<TTag>>(null);\n const mergedRef = mergeRefs(textRef, ref);\n const shouldClamp = shouldLineClamp(maxLines, inline, paragraph);\n\n useApplyStyle(textRef as React.RefObject<HTMLElement \| null>, {\n [styles.tokens.typographyBase.maxLines]: shouldClamp\n ? maxLines\n : null,\n });\n\n const Element = inline ? \"span\" : asProp \|\| tag;\n\n return (\n <Element\n ref={mergedRef}\n className={clsx(\n styles.typographyBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n getTypographyDisplayClassName(inline, paragraph),\n shouldClamp && styles.lineClamp,\n className\n )}\n {...restProps}\n />\n );\n });\n\n (\n TypographyText as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return TypographyText;\n};\n\nconst createHeading = (\n tag: \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\",\n textStyle: TypographySize,\n displayName: string\n) => {\n return createTypographyText(tag, textStyle, displayName);\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: TypographySize, displayName: string) => {\n return createTypographyText(\"p\", textStyle, displayName);\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n textStyle: TypographySize,\n displayName: string\n) => {\n const Hyperlink = React.forwardRef<HTMLAnchorElement, TypographyLinkProps>(\n function TypographyLink(\n {\n weight,\n children,\n external,\n underlineStyle = \"underline\",\n className,\n ...props\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n\n return (\n <a\n ref={ref}\n className={clsx(\n styles.typographyBase,\n styles.hyperlinkBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n underlineStyle === \"none\"\n ? styles.noUnderline\n : styles.underline,\n className\n )}\n {...props}\n >\n {children}\n {external && (\n <ExternalIcon className={styles.externalIcon} />\n )}\n </a>\n );\n }\n );\n\n (\n Hyperlink as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return Hyperlink;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["getTextWeight","weight","getTypographyTextClassName","textStyle","styles.typographySize","getTypographyWeightClassName","styles.typographyWeight","getTypographyDisplayClassName","inline","paragraph","styles.paragraph","styles.displayInline","styles.displayBlock","createTypographyText","tag","displayName","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","Element","_jsx","Object","assign","clsx","styles.typographyBase","styles.lineClamp","createHeading","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","props","_jsxs","styles.hyperlinkBase","styles.noUnderline","styles.underline","ExternalIcon","styles.externalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"~~61BAeA~~,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAAA,eAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAAA,iBAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAAAA,UAGPF,EACOG,EAAAA,cAGJC,EAAAA,aASLC,EAAuB,CACzBC,EACAX,EACAY,KAEA,MAAMC,EAAiBC,EAAAA,QAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,~~EAAMf~~,OACVA,~~EAAMgB~~,SACNA,~~EAAQf~~,UACRA,EAASR,OACTA,~~GAAMkB~~,EACHM,EAASC,SAAAP,EAPhB,6DAWA,MAAMQ,~~EAAa3B~~,EAAcC,~~GAC3B2B~~,EAAUX,EAAAA,QAAMY,OAAiC,MACjDC,EAAYC,EAAAA,UAAUH,EAASR,GAC/BY,~~EA7BU~~,EACpBR,~~EACAhB~~,EACAC,~~MACGe~~,~~IAAaf~~,IAAcD,~~GAyBNyB~~,CAAgBT,~~EAAUhB~~,EAAQC,~~GAEtDyB~~,EAAAA,cAAcN,EAAgD,CAC1D,CAACO,EAAAA,OAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAGV,MAAMa,~~EAAU7B~~,EAAS,~~OAASe~~,~~GAAUT~~,EAE5C,~~OACIwB~~,~~MAACD~~,EAAOE,OAAAC,OAAA,CACJpB,IAAKU,EACLT,UAAWoB,~~UACPC~~,EAAAA,~~eACAxC~~,EAA2BC,GAC3BE,~~EAA6BsB~~,~~GAC7BpB~~,EAA8BC,EAAQC,~~GACtCuB~~,~~GAAeW~~,~~YACftB~~,IAEAI,GAGhB,IAKA,OAFIT,~~EACFD~~,YAAc,cAAcA,~~IACvBC~~,CAAc,~~EAGnB4B~~,EAAgB,~~CAClB9B~~,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,~~GAGnC8B~~,EAAaD,EAAc,KAAM,cAAe,cAChDE,EAAYF,EAAc,KAAM,aAAc,aAC9CG,EAAYH,EAAc,KAAM,aAAc,aAC9CI,EAAYJ,EAAc,KAAM,aAAc,aAC9CK,EAAYL,EAAc,KAAM,aAAc,aAC9CM,EAAYN,EAAc,KAAM,aAAc,aAErDO,EAAa,~~CAAChD~~,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,~~GAGnCqC~~,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,~~CACxBrD~~,EACAY,KAEA,~~MAAM0C~~,~~EAAYxC~~,EAAAA,QAAMC,YACpB,SACIC,EAQAC,GARA,~~IAAAnB~~,OACIA,~~EAAMyD~~,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,~~YAAWvC~~,UAC5BA,GAASF,~~EACN0C~~,~~EAAKnC~~,EAAAA,OAAAP,EANZ,+DAUA,MAAMQ,~~EAAa3B~~,EAAcC,GAEjC,~~OACI6D~~,EAAAA,KAAA,~~IAAAvB~~,OAAAC,OAAA,CACIpB,IAAKA,EACLC,UAAWoB,EAAAA,QACPC,EAAAA,eACAqB,EAAAA,~~cACA7D~~,EAA2BC,GAC3BE,~~EAA6BsB~~,GACV,~~SAAnBiC~~,EACMI,EAAAA,YACAC,EAAAA,~~UACN5C~~,~~IAEAwC~~,EAAK,CAAAH,SAAA,CAERA,EACAC,~~GACGrB~~,EAAAA,~~IAAC4B~~,EAAAA,aAAY,~~CAAC7C~~,~~UAAW8C~~,EAAAA,kBAIzC,IAMJ,OAFIV,~~EACF1C~~,YAAc,cAAcA,~~IACvB0C~~,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}
1	+ {"version":3,"file":"typography.js","sources":["../../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n TypographyLinkProps,\n TypographyProps,\n TypographySize,\n TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n weight: TypographyWeight \| undefined\n): TypographyWeight => weight \|\| \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => {\n if (paragraph) {\n return styles.paragraph;\n }\n\n if (inline) {\n return styles.displayInline;\n }\n\n return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n maxLines: number \| undefined,\n inline: boolean \| undefined,\n paragraph: boolean \| undefined\n) => !!maxLines && (paragraph \|\| !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n tag: TTag,\n textStyle: TypographySize,\n displayName: string,\n isHeading: boolean\n) => {\n const TypographyText = React.forwardRef<\n React.ComponentRef<TTag>,\n TypographyProps\n >(function TypographyTextComponent(\n {\n className,\n as: asProp,\n inline,\n maxLines,\n paragraph,\n weight,\n ...restProps\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n const textRef = React.useRef<React.ComponentRef<TTag>>(null);\n const mergedRef = mergeRefs(textRef, ref);\n const shouldClamp = shouldLineClamp(maxLines, inline, paragraph);\n\n useApplyStyle(textRef as React.RefObject<HTMLElement \| null>, {\n [styles.tokens.typographyBase.maxLines]: shouldClamp\n ? maxLines\n : null,\n });\n\n const Element = inline ? \"span\" : asProp \|\| tag;\n\n return (\n <Element\n ref={mergedRef}\n className={clsx(\n styles.typographyBase,\n isHeading ? styles.typographyHeader : styles.typographyBody,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n getTypographyDisplayClassName(inline, paragraph),\n shouldClamp && styles.lineClamp,\n className\n )}\n {...restProps}\n />\n );\n });\n\n (\n TypographyText as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return TypographyText;\n};\n\nconst createHeading = (\n tag: \"h1\" \| \"h2\" \| \"h3\" \| \"h4\" \| \"h5\" \| \"h6\",\n textStyle: TypographySize,\n displayName: string\n) => {\n return createTypographyText(tag, textStyle, displayName, true);\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: TypographySize, displayName: string) => {\n return createTypographyText(\"p\", textStyle, displayName, false);\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n textStyle: TypographySize,\n displayName: string\n) => {\n const Hyperlink = React.forwardRef<HTMLAnchorElement, TypographyLinkProps>(\n function TypographyLink(\n {\n weight,\n children,\n external,\n underlineStyle = \"underline\",\n className,\n ...props\n },\n ref\n ) {\n const textWeight = getTextWeight(weight);\n\n return (\n <a\n ref={ref}\n className={clsx(\n styles.typographyBase,\n styles.typographyBody,\n styles.hyperlinkBase,\n getTypographyTextClassName(textStyle),\n getTypographyWeightClassName(textWeight),\n underlineStyle === \"none\"\n ? styles.noUnderline\n : styles.underline,\n className\n )}\n {...props}\n >\n {children}\n {external && (\n <ExternalIcon className={styles.externalIcon} />\n )}\n </a>\n );\n }\n );\n\n (\n Hyperlink as NamedExoticComponent\n ).displayName = `Typography.${displayName}`;\n return Hyperlink;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["getTextWeight","weight","getTypographyTextClassName","textStyle","styles.typographySize","getTypographyWeightClassName","styles.typographyWeight","getTypographyDisplayClassName","inline","paragraph","styles.paragraph","styles.displayInline","styles.displayBlock","createTypographyText","tag","displayName","isHeading","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","Element","_jsx","Object","assign","clsx","styles.typographyBase","styles.typographyHeader","styles.typographyBody","styles.lineClamp","createHeading","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","props","_jsxs","styles.hyperlinkBase","styles.noUnderline","styles.underline","ExternalIcon","styles.externalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"04BAeA,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAAA,eAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAAA,iBAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAAAA,UAGPF,EACOG,EAAAA,cAGJC,EAAAA,aASLC,EAAuB,CACzBC,EACAX,EACAY,EACAC,KAEA,MAAMC,EAAiBC,EAAAA,QAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,EAAMhB,OACVA,EAAMiB,SACNA,EAAQhB,UACRA,EAASR,OACTA,GAAMmB,EACHM,EAASC,SAAAP,EAPhB,6DAWA,MAAMQ,EAAa5B,EAAcC,GAC3B4B,EAAUX,EAAAA,QAAMY,OAAiC,MACjDC,EAAYC,EAAAA,UAAUH,EAASR,GAC/BY,EA9BU,EACpBR,EACAjB,EACAC,MACGgB,IAAahB,IAAcD,GA0BN0B,CAAgBT,EAAUjB,EAAQC,GAEtD0B,EAAAA,cAAcN,EAAgD,CAC1D,CAACO,EAAAA,OAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAGV,MAAMa,EAAU9B,EAAS,OAASgB,GAAUV,EAE5C,OACIyB,EAAAA,IAACD,EAAOE,OAAAC,OAAA,CACJpB,IAAKU,EACLT,UAAWoB,EAAAA,QACPC,EAAAA,eACA3B,EAAY4B,EAAAA,iBAA0BC,EAAAA,eACtC3C,EAA2BC,GAC3BE,EAA6BuB,GAC7BrB,EAA8BC,EAAQC,GACtCwB,GAAea,EAAAA,UACfxB,IAEAI,GAGhB,IAKA,OAFIT,EACFF,YAAc,cAAcA,IACvBE,CAAc,EAGnB8B,EAAgB,CAClBjC,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,GAAa,GAGhDiC,EAAaD,EAAc,KAAM,cAAe,cAChDE,EAAYF,EAAc,KAAM,aAAc,aAC9CG,EAAYH,EAAc,KAAM,aAAc,aAC9CI,EAAYJ,EAAc,KAAM,aAAc,aAC9CK,EAAYL,EAAc,KAAM,aAAc,aAC9CM,EAAYN,EAAc,KAAM,aAAc,aAErDO,EAAa,CAACnD,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,GAAa,GAGhDwC,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,CACxBxD,EACAY,KAEA,MAAM6C,EAAY1C,EAAAA,QAAMC,YACpB,SACIC,EAQAC,GARA,IAAApB,OACIA,EAAM4D,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,YAAWzC,UAC5BA,GAASF,EACN4C,EAAKrC,EAAAA,OAAAP,EANZ,+DAUA,MAAMQ,EAAa5B,EAAcC,GAEjC,OACIgE,EAAAA,KAAA,IAAAzB,OAAAC,OAAA,CACIpB,IAAKA,EACLC,UAAWoB,EAAAA,QACPC,EAAAA,eACAE,EAAAA,eACAqB,EAAAA,cACAhE,EAA2BC,GAC3BE,EAA6BuB,GACV,SAAnBmC,EACMI,EAAAA,YACAC,EAAAA,UACN9C,IAEA0C,EAAK,CAAAH,SAAA,CAERA,EACAC,GACGvB,EAAAA,IAAC8B,EAAAA,aAAY,CAAC/C,UAAWgD,EAAAA,kBAIzC,IAMJ,OAFIV,EACF7C,YAAc,cAAcA,IACvB6C,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./typography-text.styles_1734x2k.css"),require("./typography.styles_1jqils.css");exports.displayBlock="d1ruq6ql",exports.displayInline="du0nvfw",exports.externalIcon="e3g791q",exports.hyperlinkBase="h1ydob6f",exports.lineClamp="l4n1hjq",exports.noUnderline="nspw24h",exports.paragraph="p1cfdq56",exports.tokens={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},exports.typographyBase="ts2ljtd",exports.underline="u1w2xa0l";
+"use strict";require("./typography-text.styles_1734x2k.css"),require("./typography.styles_1155j4c.css");exports.displayBlock="d4n1hjq",exports.displayInline="d1cfdq56",exports.externalIcon="e1f7dy7t",exports.hyperlinkBase="hspw24h",exports.lineClamp="l1w2xa0l",exports.noUnderline="nlbpwo0",exports.paragraph="p1ydob6f",exports.tokens={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},exports.typographyBase="ts2ljtd",exports.typographyBody="t1ruq6ql",exports.typographyHeader="tu0nvfw",exports.underline="u3g791q";
 //# sourceMappingURL=typography.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"typography.styles.js","sources":["../../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n typographyBase: {\n maxLines: \"--fds-internal-typography-base-maxLines\",\n },\n} as const;\n\nexport const typographyBase = css`\n ${tokens.typographyBase.maxLines}: initial;\n font-~~family~~: ${Font.Spec[\"font-~~family~~\"]};\n font-~~variant~~: ${Font.Spec[\"font-~~variant~~\"]};\n ~~color~~: ${~~Colour~~.~~text~~};\n`;\n\nexport const displayInline = css`\n display: inline;\n margin-bottom: 0;\n`;\n\nexport const displayBlock = css`\n display: block;\n margin-bottom: 0;\n`;\n\nexport const paragraph = css`\n display: block;\n margin-bottom: 1.05em;\n`;\n\nexport const lineClamp = css`\n ${lineClampDynamicCss(tokens.typographyBase.maxLines)}\n`;\n\nexport const hyperlinkBase = css`\n color: ${Colour.hyperlink};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const underline = css`\n text-decoration: underline;\n`;\n\nexport const noUnderline = css`\n text-decoration: none;\n`;\n\nexport const externalIcon = css`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align: middle;\n`;\n"],"names":["typographyBase","maxLines"],"mappings":"~~gLAyByB~~,~~iCALC,+BAqCD~~,~~gCAlBC~~,~~6BAJJ~~,~~8BAkBE~~,4BAvBF,~~0BAvBA~~,CAClBA,eAAgB,CACZC,SAAU,mEAIS,~~4BAoCL~~"}
1	+ {"version":3,"file":"typography.styles.js","sources":["../../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n typographyBase: {\n maxLines: \"--fds-internal-typography-base-maxLines\",\n },\n} as const;\n\nexport const typographyBase = css`\n ${tokens.typographyBase.maxLines}: initial;\n font-variant: ${Font.Spec[\"font-variant\"]};\n color: ${Colour.text};\n`;\n\nexport const typographyHeader = css`\n font-family: ${Font.Spec[\"font-family-heading\"]};\n`;\n\nexport const typographyBody = css`\n font-family: ${Font.Spec[\"font-family-body\"]};\n`;\n\nexport const displayInline = css`\n display: inline;\n margin-bottom: 0;\n`;\n\nexport const displayBlock = css`\n display: block;\n margin-bottom: 0;\n`;\n\nexport const paragraph = css`\n display: block;\n margin-bottom: 1.05em;\n`;\n\nexport const lineClamp = css`\n ${lineClampDynamicCss(tokens.typographyBase.maxLines)}\n`;\n\nexport const hyperlinkBase = css`\n color: ${Colour.hyperlink};\n\n &:hover,\n &:active,\n &:focus {\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const underline = css`\n text-decoration: underline;\n`;\n\nexport const noUnderline = css`\n text-decoration: none;\n`;\n\nexport const externalIcon = css`\n height: 1lh;\n width: 1em;\n margin-left: 0.4em;\n vertical-align: middle;\n`;\n"],"names":["typographyBase","maxLines"],"mappings":"iLAgCyB,gCALC,gCAqCD,iCAlBC,4BAJJ,+BAkBE,4BAvBF,0BA9BA,CAClBA,eAAgB,CACZC,SAAU,mEAIS,iCAUA,oCAJE,4BAqCP"}

package/cjs/typography/typography.styles_1155j4c.css ADDED Viewed

@@ -0,0 +1,11 @@
+.ts2ljtd{--fds-internal-typography-base-maxLines:initial;font-variant:var(--fds-font-variant);color:var(--fds-colour-text);}
+.tu0nvfw{font-family:var(--fds-font-family-heading);}
+.t1ruq6ql{font-family:var(--fds-font-family-body);}
+.d1cfdq56{display:inline;margin-bottom:0;}
+.d4n1hjq{display:block;margin-bottom:0;}
+.p1ydob6f{display:block;margin-bottom:1.05em;}
+.l1w2xa0l{--fds-internal-typography-base-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-typography-base-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.hspw24h{color:var(--fds-colour-hyperlink);}.hspw24h:hover,.hspw24h:active,.hspw24h:focus{color:var(--fds-colour-text-hover);}
+.u3g791q{-webkit-text-decoration:underline;text-decoration:underline;}
+.nlbpwo0{-webkit-text-decoration:none;text-decoration:none;}
+.e1f7dy7t{height:1lh;width:1em;margin-left:0.4em;vertical-align:middle;}

package/cjs/uneditable-section/item-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),s=require("./uneditable-section.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=(r,i)=>{var{stretch:n}=r,u=e.__rest(r,["stretch"]);return t.jsx(s.GridUl,Object.assign({ref:i,$stretch:n},u))},u=i(r).default.forwardRef(n);exports.Component=n,exports.UneditableItemSection=u;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),s=require("react"),a=require("./uneditable-section.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=i(r);const c=(r,s)=>{var{stretch:i,className:c}=r,l=e.__rest(r,["stretch","className"]);return t.jsx("ul",Object.assign({ref:s,className:u.default(a.gridUl,i&&a.columnWidthStretch,c)},l))},l=i(s).default.forwardRef(c);exports.Component=c,exports.UneditableItemSection=l;
 //# sourceMappingURL=item-section.js.map

package/cjs/uneditable-section/item-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item-section.js","sources":["../../../src/uneditable-section/item-section.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { UneditableSectionItemSectionProps } from \"./types\";\nimport { ~~GridUl~~ } from \"./uneditable-section.styles\";\n\nexport const Component = (\n { stretch, ...otherProps }: UneditableSectionItemSectionProps,\n ref: React.Ref<HTMLUListElement>\n) => {\n return <~~GridUl~~ ref={ref} ~~$stretch~~={stretch} {...otherProps} ~~/>;\~~n};\n\nexport const UneditableItemSection = React.forwardRef(Component);\n"],"names":["Component","_a","ref","stretch","otherProps","__rest","_jsx","~~GridUl~~","~~Object~~","~~assign~~","~~$stretch~~","UneditableItemSection","React","forwardRef"],"mappings":"~~gOAKaA~~,EAAY,CACrBC,EACAC,~~KADA~~,~~IAAAC,~~QAAEA,~~GAAOF~~,~~EAAKG~~,EAAUC,EAAAA,~~OAAAJ~~,~~EAAxB~~,~~aAGA~~,~~OAAOK~~,~~MAACC,~~EAAAA,~~OAAMC~~,OAAAC,OAAA,~~CAACP~~,IAAKA,~~EAAGQ~~,~~SAAYP~~,~~GAAaC~~,~~GAAc~~,~~EAGrDO~~,OAAwBC,QAAMC,~~WAAWb~~"}
1	+ {"version":3,"file":"item-section.js","sources":["../../../src/uneditable-section/item-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport type { UneditableSectionItemSectionProps } from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const Component = (\n { stretch, className, ...otherProps }: UneditableSectionItemSectionProps,\n ref: React.Ref<HTMLUListElement>\n) => {\n return (\n <ul\n ref={ref}\n className={clsx(\n styles.gridUl,\n stretch && styles.columnWidthStretch,\n className\n )}\n {...otherProps}\n />\n );\n};\n\nexport const UneditableItemSection = React.forwardRef(Component);\n"],"names":["Component","_a","ref","stretch","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","UneditableItemSection","React","forwardRef"],"mappings":"6PAMaA,EAAY,CACrBC,EACAC,SADAC,QAAEA,EAAOC,UAAEA,GAASH,EAAKI,EAAUC,EAAAA,OAAAL,EAAnC,yBAGA,OACIM,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACIP,IAAKA,EACLE,UAAWM,EAAAA,QACPC,EAAAA,OACAR,GAAWS,EAAAA,mBACXR,IAEAC,GACN,EAIGQ,OAAwBC,QAAMC,WAAWf"}

package/cjs/uneditable-section/section-item.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/eye"),s=require("@lifesg/react-icons/eye-slash"),r=require("react"),i=require("../form/form-label.js"),n=require("../shared/accessibility/index.js"),t=require("../typography/index.js"),l=require("../util/string-helper.js"),d=require("./section-item.styles.js");exports.UneditableSectionItem=({label:c,value:o,displayWidth:m="full",maskState:u,maskLoadingState:k,maskChar:g="•",maskRange:h,unmaskRange:y,maskRegex:j,disableMaskUnmask:x,alert:p,maskTransformer:b,onMask:f,onUnmask:S,onTryAgain:q,fullWidth:L})=>{const[T,R]=r.useState(u);r.useEffect((()=>{R(u)}),[u]);const C=()=>{switch("fail"===k&&q&&q(),T){case"masked":S&&S(),R("unmasked");break;case"unmasked":f&&f(),R("masked")}},E=()=>"string"!=typeof o?o:"masked"===T?l.StringHelper.maskValue(o,{maskChar:g,maskRange:h,unmaskRange:y,maskRegex:j,maskTransformer:b}):o,I=()=>{switch(k){case"fail":return e.jsxs(e.Fragment,{children:[e.jsx(d.ErrorIcon,{}),e.jsx(d.ErrorLabel,{children:"Error"}),e.jsxs(d.TryAgainLabel,{children:["Try again?",e.jsx(n.VisuallyHidden,{children:c})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(d.Spinner,{}),e.jsx(d.LoadingLabel,{children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[E(),e.jsx(d.IconContainer,{"aria-label":"masked"===T?`Display ${c}`:`Hide ${c}`,children:"masked"===T?e.jsx(a.EyeIcon,{"data-testid":"masked-icon"}):e.jsx(s.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})}};return e.jsxs(d.Container,{$widthStyle:m,$fullWidth:L,children:[e.jsx(i.FormLabel,{children:c}),"string"!=typeof o?o:T?x?e.jsx(t.Typography.BodyBL,{children:E()}):e.jsx(d.Clickable,{"data-testid":"clickable-label",onClick:C,"aria-busy":"loading"===k,"aria-live":"polite",type:"button","aria-label":l.StringHelper.getMaskedDescription(o,T,h),children:I()}):e.jsx(t.Typography.BodyBL,{children:o}),p&&e.jsx(d.StyledAlert,Object.assign({sizeType:"small"},p))]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/exclamation-triangle"),s=require("@lifesg/react-icons/eye"),r=require("@lifesg/react-icons/eye-slash"),i=require("react"),n=require("../alert/alert.js"),l=require("../form/form-label.js"),t=require("../shared/accessibility/index.js"),c=require("../shared/component-loading-spinner/component-loading-spinner.js"),d=require("../typography/index.js"),o=require("../util/string-helper.js"),m=require("./section-item.styles.js");exports.UneditableSectionItem=({label:u,value:g,displayWidth:k="full",maskState:h,maskLoadingState:p,maskChar:j="•",maskRange:x,unmaskRange:y,maskRegex:b,disableMaskUnmask:f,alert:q,maskTransformer:N,onMask:L,onUnmask:S,onTryAgain:T,fullWidth:R})=>{const[v,C]=i.useState(h);i.useEffect((()=>{C(h)}),[h]);const E=()=>{switch("fail"===p&&T&&T(),v){case"masked":S&&S(),C("unmasked");break;case"unmasked":L&&L(),C("masked")}},I=()=>"string"!=typeof g?g:"masked"===v?o.StringHelper.maskValue(g,{maskChar:j,maskRange:x,unmaskRange:y,maskRegex:b,maskTransformer:N}):g,w=()=>{switch(p){case"fail":return e.jsxs(e.Fragment,{children:[e.jsx(a.ExclamationTriangleIcon,{className:m.errorIcon}),e.jsx("span",{className:m.errorLabel,children:"Error"}),e.jsxs("span",{className:m.tryAgainLabel,children:["Try again?",e.jsx(t.VisuallyHidden,{children:u})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(c.ComponentLoadingSpinner,{className:m.spinner}),e.jsx("span",{className:m.loadingLabel,children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[I(),e.jsx("div",{className:m.iconContainer,"aria-label":"masked"===v?`Display ${u}`:`Hide ${u}`,children:"masked"===v?e.jsx(s.EyeIcon,{"data-testid":"masked-icon"}):e.jsx(r.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})}};return e.jsxs("li",{"data-width":k,"data-full-width":R,className:m.container,children:[e.jsx(l.FormLabel,{children:u}),"string"!=typeof g?g:v?f?e.jsx(d.Typography.BodyBL,{children:I()}):e.jsx("button",{className:m.clickable,"data-testid":"clickable-label",onClick:E,"aria-busy":"loading"===p,"aria-live":"polite",type:"button","aria-label":o.StringHelper.getMaskedDescription(g,v,x),children:w()}):e.jsx(d.Typography.BodyBL,{children:g}),q&&e.jsx(n.Alert,Object.assign({className:m.alert,sizeType:"small"},q))]})};
 //# sourceMappingURL=section-item.js.map

package/cjs/uneditable-section/section-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"section-item.js","sources":["../../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport ~~{\n Clickable,\n Container,\n ErrorIcon,\n ErrorLabel,\n IconContainer,\n LoadingLabel,\n Spinner,\n StyledAlert,\n TryAgainLabel,\n}~~ from \"./section-item.styles\";\nimport type {\n UneditableSectionItemMaskState,\n UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n extends UneditableSectionItemProps {\n onMask?: (() => void) \| undefined;\n onUnmask?: (() => void) \| undefined;\n onTryAgain?: (() => void) \| undefined;\n fullWidth?: boolean \| undefined;\n}\n\nexport const UneditableSectionItem = ({\n label,\n value,\n displayWidth = \"full\",\n maskState,\n maskLoadingState,\n maskChar = \"•\",\n maskRange,\n unmaskRange,\n maskRegex,\n disableMaskUnmask,\n alert,\n maskTransformer,\n onMask,\n onUnmask,\n onTryAgain,\n fullWidth,\n}: UneditableSectionItemComponentProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [displayMaskState, setMaskState] = useState<\n UneditableSectionItemMaskState \| undefined\n >(maskState);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setMaskState(maskState);\n }, [maskState]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleClickableClick = () => {\n if (maskLoadingState === \"fail\") {\n if (onTryAgain) onTryAgain();\n }\n\n switch (displayMaskState) {\n case \"masked\": {\n if (onUnmask) {\n onUnmask();\n }\n setMaskState(\"unmasked\");\n break;\n }\n case \"unmasked\": {\n if (onMask) {\n onMask();\n }\n setMaskState(\"masked\");\n break;\n }\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getValue = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n return displayMaskState === \"masked\"\n ? StringHelper.maskValue(value, {\n maskChar,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n })\n : value;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderMaskingState = () => {\n switch (maskLoadingState) {\n case \"fail\":\n return (\n <>\n <~~ErrorIcon~~ />\n <~~ErrorLabel~~>Error</~~ErrorLabel~~>\n <~~TryAgainLabel~~>\n Try again?\n <VisuallyHidden>{label}</VisuallyHidden>\n </~~TryAgainLabel~~>\n </>\n );\n case \"loading\":\n return (\n <>\n <~~Spinner~~ />\n <~~LoadingLabel>~~Retrieving~~...</LoadingLabel~~>\n </>\n );\n default:\n return (\n <>\n {getValue()}\n <~~IconContainer~~\n aria-label={\n displayMaskState === \"masked\"\n ? `Display ${label}`\n : `Hide ${label}`\n }\n >\n {displayMaskState === \"masked\" ? (\n <EyeIcon data-testid=\"masked-icon\" />\n ) : (\n <EyeSlashIcon data-testid=\"unmasked-icon\" />\n )}\n </~~IconContainer~~>\n </>\n );\n }\n };\n\n const renderContent = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n if (!displayMaskState) {\n return <Typography.BodyBL>{value}</Typography.BodyBL>;\n }\n\n if (disableMaskUnmask) {\n return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n }\n\n return (\n <~~Clickable~~\n data-testid=\"clickable-label\"\n onClick={handleClickableClick}\n aria-busy={maskLoadingState === \"loading\"}\n aria-live=\"polite\"\n type=\"button\"\n aria-label={StringHelper.getMaskedDescription(\n value,\n displayMaskState,\n maskRange\n )}\n >\n {renderMaskingState()}\n </~~Clickable~~>\n );\n };\n\n return (\n <~~Container $widthStyle~~={displayWidth} ~~$fullWidth~~={fullWidth}>\n <FormLabel>{label}</FormLabel>\n {renderContent()}\n {alert && <~~StyledAlert~~ sizeType=\"small\" {...alert} />}\n </~~Container~~>\n );\n};\n"],"names":["label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","~~_jsx~~","~~ErrorIcon~~","~~ErrorLabel~~","~~children~~","~~TryAgainLabel~~","~~VisuallyHidden~~","~~_Fragment~~","~~Spinner~~","~~LoadingLabel~~","~~IconContainer~~","~~EyeIcon~~","~~EyeSlashIcon~~","~~Container~~","~~$widthStyle~~","~~$fullWidth~~","FormLabel","Typography","BodyBL","~~Clickable~~","onClick","type","getMaskedDescription","~~StyledAlert~~","~~Object~~","~~assign","~~sizeType"],"mappings":"~~kXAgCqC~~,EACjCA,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,~~oBACAC~~,~~QACAC~~,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAAAA,SAEvCf,GAKFgB,EAAAA,WAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAAA,aAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAA,~~2BACIC~~,EAAAA,IAACC,EAAAA,~~cACDD~~,EAAAA,~~IAACE~~,EAAAA,~~WAAU~~,~~CAAAC~~,SAAA,~~UACXJ~~,EAAAA,~~KAACK~~,EAAAA,~~cAAa~~,~~CAAAD,~~SAAA,CAAA,~~aAEVH~~,EAAAA,~~IAACK~~,EAAAA,~~eAAc~~,~~CAAAF,SAAE7B,~~UAIjC,IAAK,UACD,OACIyB,EAAAA,~~KAAAO~~,EAAAA,~~SAAA~~,~~CAAAH~~,~~SAAA~~,~~CACIH~~,EAAAA,~~IAACO~~,~~EAAAA~~,~~QAAO~~,~~CAAA~~,~~GACRP~~,EAAAA,~~IAACQ~~,~~EAAAA,aAAY,CAAAL,~~SAAA,~~qBAGzB~~,QACI,~~OACIJ~~,~~OAAAO~~,EAAAA,SAAA,~~CAAAH~~,SAAA,~~CACKR~~,~~IACDK~~,~~EAAAA~~,~~IAACS~~,~~EAAAA~~,~~cAAa~~,~~CAAA~~,~~aAEe~~,~~WAArBnB~~,EACM,WAAWhB,IACX,QAAQA,~~IAAO6B~~,SAGH,~~WAArBb~~,~~EACGU~~,~~MAACU~~,EAAAA,QAAO,CAAA,cAAa,~~gBAErBV~~,~~MAACW~~,EAAAA,aAAY,CAAA,cAAa,~~yBAuCtD~~,~~OACIZ~~,EAAAA,~~KAACa~~,~~EAAAA~~,~~UAAS~~,~~CAAAC~~,~~YAAcrC~~,~~EAAYsC~~,~~WAAczB~~,~~EAASc~~,SAAA,~~CACvDH~~,EAAAA,~~IAACe~~,~~YAAS~~,~~CAAAZ~~,~~SAAE7B~~,~~IAhCK~~,iBAAVC,EACAA,EAGNe,EAIDP,~~EACOiB~~,EAAAA,~~IAACgB~~,EAAAA,WAAWC,~~iBAAQtB~~,~~MAI3BK~~,~~MAACkB~~,EAAAA,~~UAAS~~,~~CAAA~~,~~cACM,~~kBACZC,~~QAASzB~~,cACuB,YAArBhB,EAA8B,YAC/B,~~SACV0C~~,KAAK,~~sBACOxB~~,EAAAA,~~aAAayB~~,~~qBACrB9C~~,EACAe,EACAV,~~GACHuB~~,~~SAEAL~~,~~MApBEE~~,EAAAA,~~IAACgB~~,EAAAA,WAAWC,OAAM,~~CAAAd~~,~~SAAE5B~~,~~IA6B1BS~~,~~GAASgB~~,~~MAACsB~~,EAAAA,~~YAAWC~~,~~OAAAC~~,~~OAAA~~,~~CAACC~~,SAAS,SAAYzC,~~MACpC~~"}
1	+ {"version":3,"file":"section-item.js","sources":["../../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n UneditableSectionItemMaskState,\n UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n extends UneditableSectionItemProps {\n onMask?: (() => void) \| undefined;\n onUnmask?: (() => void) \| undefined;\n onTryAgain?: (() => void) \| undefined;\n fullWidth?: boolean \| undefined;\n}\n\nexport const UneditableSectionItem = ({\n label,\n value,\n displayWidth = \"full\",\n maskState,\n maskLoadingState,\n maskChar = \"•\",\n maskRange,\n unmaskRange,\n maskRegex,\n disableMaskUnmask,\n alert,\n maskTransformer,\n onMask,\n onUnmask,\n onTryAgain,\n fullWidth,\n}: UneditableSectionItemComponentProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [displayMaskState, setMaskState] = useState<\n UneditableSectionItemMaskState \| undefined\n >(maskState);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setMaskState(maskState);\n }, [maskState]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleClickableClick = () => {\n if (maskLoadingState === \"fail\") {\n if (onTryAgain) onTryAgain();\n }\n\n switch (displayMaskState) {\n case \"masked\": {\n if (onUnmask) {\n onUnmask();\n }\n setMaskState(\"unmasked\");\n break;\n }\n case \"unmasked\": {\n if (onMask) {\n onMask();\n }\n setMaskState(\"masked\");\n break;\n }\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getValue = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n return displayMaskState === \"masked\"\n ? StringHelper.maskValue(value, {\n maskChar,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n })\n : value;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderMaskingState = () => {\n switch (maskLoadingState) {\n case \"fail\":\n return (\n <>\n <ExclamationTriangleIcon className={styles.errorIcon} />\n <span className={styles.errorLabel}>Error</span>\n <span className={styles.tryAgainLabel}>\n Try again?\n <VisuallyHidden>{label}</VisuallyHidden>\n </span>\n </>\n );\n case \"loading\":\n return (\n <>\n <ComponentLoadingSpinner className={styles.spinner} />\n <span className={styles.loadingLabel}>\n Retrieving...\n </span>\n </>\n );\n default:\n return (\n <>\n {getValue()}\n <div\n className={styles.iconContainer}\n aria-label={\n displayMaskState === \"masked\"\n ? `Display ${label}`\n : `Hide ${label}`\n }\n >\n {displayMaskState === \"masked\" ? (\n <EyeIcon data-testid=\"masked-icon\" />\n ) : (\n <EyeSlashIcon data-testid=\"unmasked-icon\" />\n )}\n </div>\n </>\n );\n }\n };\n\n const renderContent = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n if (!displayMaskState) {\n return <Typography.BodyBL>{value}</Typography.BodyBL>;\n }\n\n if (disableMaskUnmask) {\n return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n }\n\n return (\n <button\n className={styles.clickable}\n data-testid=\"clickable-label\"\n onClick={handleClickableClick}\n aria-busy={maskLoadingState === \"loading\"}\n aria-live=\"polite\"\n type=\"button\"\n aria-label={StringHelper.getMaskedDescription(\n value,\n displayMaskState,\n maskRange\n )}\n >\n {renderMaskingState()}\n </button>\n );\n };\n\n return (\n <li\n data-width={displayWidth}\n data-full-width={fullWidth}\n className={styles.container}\n >\n <FormLabel>{label}</FormLabel>\n {renderContent()}\n {alert && (\n <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n )}\n </li>\n );\n};\n"],"names":["label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"qhBAyBqC,EACjCA,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAAAA,SAEvCf,GAKFgB,EAAAA,WAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAAA,aAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,yBAAwBC,UAAWC,EAAAA,YACpCH,EAAAA,IAAA,OAAA,CAAME,UAAWE,EAAAA,WAAiBL,SAAA,UAClCF,EAAAA,KAAA,OAAA,CAAMK,UAAWG,EAAAA,cAAoBN,SAAA,CAAA,aAEjCC,EAAAA,IAACM,EAAAA,yBAAgBlC,UAIjC,IAAK,UACD,OACIyB,EAAAA,2BACIG,EAAAA,IAACO,EAAAA,yBAAwBL,UAAWM,EAAAA,UACpCR,MAAA,OAAA,CAAME,UAAWO,EAAAA,aAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACKN,IACDO,MAAA,MAAA,CACIE,UAAWQ,gBAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,MAACW,EAAAA,QAAO,CAAA,cAAa,gBAErBX,MAACY,EAAAA,aAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAAA,KAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAAA,UAAgBd,SAAA,CAE3BC,EAAAA,IAACc,EAAAA,UAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAAAA,IAACe,EAAAA,WAAWC,iBAAQvB,MAI3BO,MAAA,SAAA,CACIE,UAAWe,EAAAA,UAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAAA,aAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAAAA,IAACe,EAAAA,WAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAAAA,IAACqB,EAAAA,qBAAMnB,UAAWoB,EAAAA,MAAcC,SAAS,SAAYzC,MAExD"}

package/cjs/uneditable-section/section-item.styles.js CHANGED Viewed

@@ -1,64 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/exclamation-triangle"),r=require("styled-components"),o=require("../alert/alert.js"),t=require("../shared/component-loading-spinner/component-loading-spinner.js"),n=require("../v3_theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(r);const a=i.default.li`
-    display: flex;
-    flex-direction: column;
-    ${e=>{switch(e.$widthStyle){case"half":return r.css`
-                    grid-column: auto / span ${e.$fullWidth?1:4};
-                `;case"full":return r.css`
-                    grid-column: auto / span ${e.$fullWidth?2:8};
-                `}}}
-    ${n.V3_MediaQuery.MaxWidth.lg} {
-        grid-column: 1 / -1;
-    }
-    overflow-wrap: break-word;
-`,s=i.default.div`
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    color: ${n.V3_Colour["icon-primary"]};
-    margin-left: 0.5rem;
-    svg {
-        width: ${n.V3_Font.Spec["body-size-baseline"]};
-        height: ${n.V3_Font.Spec["body-size-baseline"]};
-    }
-`,d=i.default.button`
-    ${n.V3_Font["body-baseline-regular"]}
-    color: ${n.V3_Colour.text};
-    border: none;
-    background: transparent;
-    padding: 0;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    overflow-wrap: anywhere;
-    text-align: left;
-    span {
-        overflow-wrap: anywhere;
-        text-align: left;
-    }
-`,c=i.default.span`
-    color: ${n.V3_Colour["text-disabled"]};
-`,u=i.default(t.ComponentLoadingSpinner)`
-    margin-right: 0.5rem;
-    color: ${n.V3_Colour["text-disabled"]};
-`,p=i.default(e.ExclamationTriangleIcon)`
-    color: ${n.V3_Colour["icon-warning"]};
-    margin-right: 0.5rem;
-    height: ${n.V3_Font.Spec["body-size-baseline"]};
-    width: ${n.V3_Font.Spec["body-size-baseline"]};
-`,g=i.default.span`
-    color: ${n.V3_Colour["text-warning"]};
-`,f=i.default.span`
-    ${n.V3_Font["body-baseline-semibold"]}
-    color: ${n.V3_Colour.hyperlink};
-    text-decoration: underline;
-    margin-left: 0.5rem;
-`,m=i.default(o.Alert)`
-    margin-top: 0.5rem;
-`;exports.Clickable=d,exports.Container=a,exports.ErrorIcon=p,exports.ErrorLabel=g,exports.IconContainer=s,exports.LoadingLabel=c,exports.Spinner=u,exports.StyledAlert=m,exports.TryAgainLabel=f;
+"use strict";require("./section-item.styles_mwx8ht.css");exports.alert="a1celal9",exports.clickable="c988p37",exports.container="cfqoxdt",exports.errorIcon="e13rb6hl",exports.errorLabel="e13pxbfu",exports.iconContainer="i6tvpcl",exports.loadingLabel="l1fg6lie",exports.spinner="s186v6u4",exports.tryAgainLabel="t1dzpnph";
 //# sourceMappingURL=section-item.styles.js.map

package/cjs/uneditable-section/section-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"section-item.styles.js","sources":["../../../src/uneditable-section/section-item.styles.~~tsx~~"],"sourcesContent":["import { ~~ExclamationTriangleIcon~~ } from \"@~~lifesg~~/~~react-icons/exclamation-triangle~~\";\~~nimport styled, { css } from \"styled-components\";\~~n\nimport { ~~Alert } from \"../alert\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { V3_Colour~~, ~~V3_Font~~, ~~V3_MediaQuery~~ } from \"../~~v3_theme~~\";\~~nimport type { UneditableSectionItemDisplayWidth } from \"./types\";\~~n\n// =============================================================================\n// STYLING ~~INTERFACES~~\n// =============================================================================\ninterface ContainerStyleProps {\n $widthStyle: UneditableSectionItemDisplayWidth;\n $fullWidth?: boolean \| undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ~~Container~~ = ~~styled.li<ContainerStyleProps>`\~~n display: flex;\n flex-direction: column;\n\n ~~${(props)~~ => {\n ~~switch~~ ~~(props.$widthStyle)~~ {\n ~~case \~~"~~half~~\"~~:\n return~~ ~~css`\~~n grid-column: auto / span ~~${props.$fullWidth ?~~ 1 ~~: 4}~~;\n ~~`;\~~n ~~case~~ \"full\"~~:\n return~~ ~~css`\~~n grid-column: auto / span ${~~props.$fullWidth~~ ? 2 : 8};\n ~~`;\n~~ }\n }}\n\n ${~~V3_MediaQuery~~.MaxWidth.lg} {\n grid-column: 1 / -1;\n }\n\n ~~overflow~~-~~wrap~~: ~~break~~-~~word~~;\n`;\n\nexport const ~~IconContainer~~ = ~~styled.div~~`\n display: flex;\n height: 100%;\n align-items: center;\n justify-content: center;\n color: ${~~V3_Colour~~[\"icon-primary\"]};\n margin-left: 0.5rem;\n\n svg {\n width: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n height: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n }\n`;\n\nexport const ~~Clickable~~ = ~~styled.button~~`\n ${~~V3_Font~~[\"body-baseline-regular\"]}\n color: ${~~V3_Colour~~[\"text\"]};\n border: none;\n background: transparent;\n padding: 0;\n display: flex;\n cursor: pointer;\n align-items: center;\n overflow-wrap: anywhere;\n text-align: left;\n\n span {\n overflow-wrap: anywhere;\n text-align: left;\n }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const ~~LoadingLabel~~ = ~~styled.span~~`\n color: ${~~V3_Colour~~[\"text-disabled\"]};\n`;\n\nexport const ~~Spinner~~ = ~~styled(ComponentLoadingSpinner)~~`\n margin-right: 0.5rem;\n color: ${~~V3_Colour~~[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const ~~ErrorIcon~~ = ~~styled(ExclamationTriangleIcon)~~`\n color: ${~~V3_Colour~~[\"icon-warning\"]};\n margin-right: 0.5rem;\n height: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n width: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n`;\n\nexport const ~~ErrorLabel~~ = ~~styled.span~~`\n color: ${~~V3_Colour~~[\"text-warning\"]};\n`;\n\nexport const ~~TryAgainLabel~~ = ~~styled.span~~`\n ${~~V3_Font~~[\"body-baseline-semibold\"]}\n color: ${~~V3_Colour~~[\"hyperlink\"]};\n text-decoration: underline;\n margin-left: 0.5rem;\n`;\n\nexport const ~~StyledAlert~~ = ~~styled(Alert)~~`\n margin-top: 0.5rem;\n`;\n"],"names":["Container","styled","li","props","$widthStyle","css","$fullWidth","V3_MediaQuery","MaxWidth","lg","IconContainer","div","V3_Colour","V3_Font","Spec","Clickable","button","LoadingLabel","span","Spinner","ComponentLoadingSpinner","ErrorIcon","ExclamationTriangleIcon","ErrorLabel","TryAgainLabel","StyledAlert","Alert"],"mappings":"~~wUAmBO~~,~~MAAMA~~,~~EAAYC~~,~~EAAAA~~,~~QAAOC~~,~~EAAuB;;;;MAIhDC~~,~~IACC~~,OAAQA,EAAMC,aACV,IAAK,OACD,OAAOC,KAAG;+CACqBF,EAAMG,WAAa,EAAI;kBAE1D,IAAK,OACD,OAAOD,KAAG;+CACqBF,EAAMG,WAAa,EAAI;;;MAKhEC,EAAAA,cAAcC,SAASC;;;;;EAOhBC,EAAgBT,EAAAA,QAAOU,GAAG;;;;;aAK1BC,EAAAA,UAAU;;;;iBAINC,EAAAA,QAAQC,KAAK;kBACZD,EAAAA,QAAQC,KAAK;;EAIlBC,EAAYd,EAAAA,QAAOe,MAAM;MAChCH,EAAAA,QAAQ;aACDD,EAAAA,UAAgB;;;;;;;;;;;;;;EAmBhBK,EAAehB,EAAAA,QAAOiB,IAAI;aAC1BN,EAAAA,UAAU;EAGVO,EAAUlB,EAAAA,QAAOmB,EAAAA,wBAAwB;;aAEzCR,EAAAA,UAAU;EAMVS,EAAYpB,EAAAA,QAAOqB,EAAAA,wBAAwB;aAC3CV,EAAAA,UAAU;;cAETC,EAAAA,QAAQC,KAAK;aACdD,EAAAA,QAAQC,KAAK;EAGbS,EAAatB,EAAAA,QAAOiB,IAAI;aACxBN,EAAAA,UAAU;EAGVY,EAAgBvB,EAAAA,QAAOiB,IAAI;MAClCL,EAAAA,QAAQ;aACDD,EAAAA,UAAqB;;;EAKrBa,EAAcxB,EAAAA,QAAOyB,EAAAA,MAAM;;"}
1	+ {"version":3,"file":"section-item.styles.js","sources":["../../../src/uneditable-section/section-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n display: flex;\n flex-direction: column;\n overflow-wrap: break-word;\n\n &[data-width=\"half\"] {\n grid-column: auto / span 4;\n\n &[data-full-width=\"true\"] {\n grid-column: auto / span 1;\n }\n }\n\n &[data-width=\"full\"] {\n grid-column: auto / span 8;\n\n &[data-full-width=\"true\"] {\n grid-column: auto / span 2;\n }\n }\n\n ${MediaQuery.MaxWidth.lg} {\n &[data-width=\"half\"],\n &[data-width=\"full\"] {\n grid-column: 1 / -1;\n\n &[data-full-width=\"true\"] {\n grid-column: 1 / -1;\n }\n }\n }\n`;\n\nexport const iconContainer = css`\n display: flex;\n height: 100%;\n align-items: center;\n justify-content: center;\n color: ${Colour[\"icon-primary\"]};\n margin-left: 0.5rem;\n\n svg {\n width: ${Font.Spec[\"body-size-baseline\"]};\n height: ${Font.Spec[\"body-size-baseline\"]};\n }\n`;\n\nexport const clickable = css`\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n border: none;\n background: transparent;\n padding: 0;\n display: flex;\n cursor: pointer;\n align-items: center;\n overflow-wrap: anywhere;\n text-align: left;\n\n span {\n overflow-wrap: anywhere;\n text-align: left;\n }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingLabel = css`\n color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const spinner = css`\n margin-right: 0.5rem;\n color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const errorIcon = css`\n color: ${Colour[\"icon-warning\"]};\n margin-right: 0.5rem;\n height: ${Font.Spec[\"body-size-baseline\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const errorLabel = css`\n color: ${Colour[\"text-warning\"]};\n`;\n\nexport const tryAgainLabel = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"hyperlink\"]};\n text-decoration: underline;\n margin-left: 0.5rem;\n`;\n\nexport const alert = css`\n margin-top: 0.5rem;\n`;\n"],"names":[],"mappings":"yGAyGkB,6BAnDI,4BA/CA,4BAgFA,8BAOC,iCAtDG,+BAmCD,2BAIL,iCAmBM"}

package/cjs/uneditable-section/section-item.styles_mwx8ht.css ADDED Viewed

@@ -0,0 +1,9 @@
+.cfqoxdt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:break-word;}.cfqoxdt[data-width="half"]{grid-column:auto/span 4;}.cfqoxdt[data-width="half"][data-full-width="true"]{grid-column:auto/span 1;}.cfqoxdt[data-width="full"]{grid-column:auto/span 8;}.cfqoxdt[data-width="full"][data-full-width="true"]{grid-column:auto/span 2;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"]{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"][data-full-width="true"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"][data-full-width="true"]{-ms-grid-column:1/-1;grid-column:1/-1;}
+.i6tvpcl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-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;color:var(--fds-colour-icon-primary);margin-left:0.5rem;}.i6tvpcl svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}
+.c988p37{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-wrap:anywhere;text-align:left;}.c988p37 span{overflow-wrap:anywhere;text-align:left;}
+.l1fg6lie{color:var(--fds-colour-text-disabled);}
+.s186v6u4{margin-right:0.5rem;color:var(--fds-colour-text-disabled);}
+.e13rb6hl{color:var(--fds-colour-icon-warning);margin-right:0.5rem;height:var(--fds-font-body-size-baseline);width:var(--fds-font-body-size-baseline);}
+.e13pxbfu{color:var(--fds-colour-text-warning);}
+.t1dzpnph{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;margin-left:0.5rem;}
+.a1celal9{margin-top:0.5rem;}

package/cjs/uneditable-section/uneditable-section.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var t=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),i=require("./section-item.js"),n=require("./uneditable-section.styles.js");exports.UneditableSectionBase=r=>{var{items:s,title:o,description:c,topSection:l,bottomSection:a,children:d,background:h=!0,stretch:u,fullWidth:j,onMask:m,onUnmask:b,onTryAgain:g}=r,p=t.__rest(r,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain"]);const x=t=>()=>{m&&m(t)},k=t=>()=>{b&&b(t)},S=t=>()=>{g&&g(t)},$=()=>{if(s&&s.length>0){const t=s.map(((t,n)=>e.jsx(i.UneditableSectionItem,Object.assign({},t,{onMask:x(t),onUnmask:k(t),onTryAgain:S(t),fullWidth:j}),n)));return e.jsx(n.GridUl,{$stretch:u,$fullWidth:j,children:t})}return null},W=()=>d||e.jsxs(e.Fragment,{children:[o&&e.jsx(n.Title,{forwardedAs:"h2",weight:"semibold",$stretch:u,children:o}),c&&e.jsx(n.Description,{$stretch:u,children:c}),l&&e.jsx(n.CustomSection,{"data-id":"top-section",$stretch:u,children:l}),$(),a&&e.jsx(n.CustomSection,{"data-id":"bottom-section",$stretch:u,children:a})]});return j?e.jsx(n.FullWidthWrapper,Object.assign({$background:h},p,{children:W()})):e.jsx(n.Wrapper,Object.assign({$background:h},p,{type:"grid",children:W()}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("clsx"),n=require("../layout/index.js"),s=require("../typography/index.js"),r=require("./section-item.js"),a=require("./uneditable-section.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(i);exports.UneditableSectionBase=i=>{var{items:c,title:o,description:d,topSection:u,bottomSection:h,children:m,background:p=!0,stretch:g,fullWidth:j,onMask:f,onUnmask:y,onTryAgain:b,className:x}=i,S=e.__rest(i,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className"]);const k=e=>()=>{f&&f(e)},N=e=>()=>{y&&y(e)},W=e=>()=>{b&&b(e)},q=()=>{if(c&&c.length>0){const e=c.map(((e,i)=>t.jsx(r.UneditableSectionItem,Object.assign({},e,{onMask:k(e),onUnmask:N(e),onTryAgain:W(e),fullWidth:j}),i)));return t.jsx("ul",{className:l.default(a.gridUl,g&&a.columnWidthStretch,j&&a.gridUlFullWidth),children:e})}return null},v=()=>m||t.jsxs(t.Fragment,{children:[o&&t.jsx(s.Typography.HeadingSM,{as:"h2",weight:"semibold",className:l.default(a.title,g&&a.columnWidthStretch),children:o}),d&&t.jsx(s.Typography.BodyBL,{className:l.default(a.description,g&&a.columnWidthStretch),children:d}),u&&t.jsx("div",{"data-id":"top-section",className:l.default(a.customSection,g&&a.columnWidthStretch),children:u}),q(),h&&t.jsx("div",{"data-id":"bottom-section",className:l.default(a.customSection,g&&a.columnWidthStretch),children:h})]});return j?t.jsx("div",Object.assign({className:l.default(p&&a.wrapperBackground,x)},S,{children:v()})):t.jsx(n.Layout.Content,Object.assign({className:l.default(a.wrapper,p&&a.wrapperBackground,x)},S,{type:"grid",children:v()}))};
 //# sourceMappingURL=uneditable-section.js.map