npm - @dnanpm/ui-components - Versions diffs - 0.8.0 → 0.10.0 - Mend

@dnanpm/ui-components 0.8.0 → 0.10.0

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

Files changed (249) hide show

package/dist/components/IconButton/IconButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.cjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles ~~from~~ ~~'../../styles/utils/focus.module.css';\nimport~~ ~~textDecorationStyles~~ from '../../styles/utils~~/text-decoration.module.css~~';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n icon,\n iconPosition = 'start',\n labelBehavior = 'truncate',\n size = 'normal',\n loading = false,\n linkColoring = false,\n className,\n children,\n ref,\n ...props\n}: IconButtonProps) => {\n const isDisabled = 'disabled' in props && props.disabled;\n const isAnchor = 'href' in props && props.href != null;\n\n const classes = cn(\n styles['icon-button'],\n styles[`icon-button--${size}`],\n focusStyles.focusable,\n { [styles['icon-button--disabled']]: isDisabled },\n { [styles['icon-button--loading']]: loading },\n { [styles['icon-button--link-coloring']]: linkColoring },\n className,\n );\n\n const Icon = icon;\n\n const iconSlot = loading ? (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Spinner\n size={size === 'small' ? 'xs' : 's'}\n color=\"inherit\"\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n </span>\n ) : (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Icon aria-hidden=\"true\" />\n </span>\n );\n\n const content = (\n <>\n {iconPosition === 'start' && iconSlot}\n <span\n className={cn(styles['icon-button__label'], textDecorationStyles.underlineLink, {\n [styles['icon-button__label--wrap']]: labelBehavior === 'wrap',\n })}\n >\n {children}\n </span>\n {iconPosition === 'end' && iconSlot}\n </>\n );\n\n if (isAnchor) {\n const { href, renderLink, ...anchorProps } = props as Omit<\n typeof props,\n 'icon' \| 'iconPosition' \| 'size' \| 'loading' \| 'linkColoring'\n > & {\n href: string;\n renderLink?: (\n props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n href: string;\n children: ReactNode;\n },\n ) => ReactNode;\n };\n\n const {\n disabled: _disabled,\n type: _type,\n name: _name,\n ...safeAnchorProps\n } = anchorProps as typeof anchorProps & {\n disabled?: boolean;\n type?: 'button' \| 'submit' \| 'reset';\n name?: string;\n };\n\n const target = safeAnchorProps.target;\n const rel = safeAnchorProps.rel;\n const shouldHardenRel = target?.toLowerCase() === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n rel: hardenedRel,\n className: classes,\n 'aria-busy': loading \|\| undefined,\n 'aria-disabled': loading \|\| undefined,\n tabIndex: loading ? -1 : safeAnchorProps.tabIndex,\n onClick: loading\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : safeAnchorProps.onClick,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} />;\n }\n\n const {\n type = 'button',\n disabled,\n onClick,\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as Omit<\n typeof props,\n 'icon' \| 'iconPosition' \| 'size' \| 'loading' \| 'href' \| 'linkColoring'\n > & {\n type?: 'button' \| 'submit' \| 'reset';\n disabled?: boolean;\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n disabled={disabled \|\| loading}\n className={classes}\n aria-disabled={loading \|\| undefined}\n aria-busy={loading \|\| undefined}\n onClick={\n loading\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick\n }\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":["cn","styles","focusStyles","jsx","Spinner","jsxs","Fragment","textDecorationStyles"],"mappings":"~~;;;;;;;;AAQO~~,MAAM,aAAa,CAAC;AAAA,EACvB;AAAA,EACA,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,QAAM,aAAa,cAAc,SAAS,MAAM;AAChD,QAAM,WAAW,UAAU,SAAS,MAAM,QAAQ;AAElD,QAAM,UAAUA,GAAAA;AAAAA,IACZC,kBAAO,aAAa;AAAA,IACpBA,kBAAO,gBAAgB,IAAI,EAAE;AAAA,IAC7BC,~~aAAAA~~,~~QAAY~~;AAAA,IACZ,EAAE,CAACD,kBAAO,uBAAuB,CAAC,GAAG,WAAA;AAAA,IACrC,EAAE,CAACA,kBAAO,sBAAsB,CAAC,GAAG,QAAA;AAAA,IACpC,EAAE,CAACA,kBAAO,4BAA4B,CAAC,GAAG,aAAA;AAAA,IAC1C;AAAA,EAAA;AAGJ,QAAM,OAAO;AAEb,QAAM,WAAW,UACbE,2BAAAA,IAAC,QAAA,EAAK,WAAWF,kBAAO,mBAAmB,GAAG,eAAY,QACtD,UAAAE,2BAAAA;AAAAA,IAACC,QAAAA;AAAAA,IAAA;AAAA,MACG,MAAM,SAAS,UAAU,OAAO;AAAA,MAChC,OAAM;AAAA,MACN,eAAY;AAAA,MACZ,MAAK;AAAA,IAAA;AAAA,EAAA,EACT,CACJ,IAEAD,2BAAAA,IAAC,QAAA,EAAK,WAAWF,kBAAO,mBAAmB,GAAG,eAAY,QACtD,UAAAE,2BAAAA,IAAC,MAAA,EAAK,eAAY,QAAO,GAC7B;AAGJ,QAAM,UACFE,2BAAAA,KAAAC,WAAAA,UAAA,EACK,UAAA;AAAA,IAAA,iBAAiB,WAAW;AAAA,IAC7BH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWH,GAAAA,GAAGC,kBAAO,oBAAoB,GAAGM,~~sBAAAA~~,~~QAAqB~~,eAAe;AAAA,UAC5E,CAACN,kBAAO,0BAA0B,CAAC,GAAG,kBAAkB;AAAA,QAAA,CAC3D;AAAA,QAEA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEJ,iBAAiB,SAAS;AAAA,EAAA,GAC/B;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,QAAQ,YAAA,MAAkB;AAClD,UAAM,YAAY,IAAI;AAAA,OACjB,OAAO,IACH,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAAC,UAAU,MAAM,aAAa;AAAA,IAAA;AAG3C,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK,gBAAgB;AAAA,MACzC,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAOE,2BAAAA,IAAAG,WAAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAOH,+BAAC,KAAA,EAAG,GAAG,UAAA,CAAW;AAAA,EAC7B;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAYJ,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,iBAAe,WAAW;AAAA,MAC1B,aAAW,WAAW;AAAA,MACtB,SACI,UACM,CAAC,MAAM;AACH,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA;AAAA,MAET,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;;"}
1	+ {"version":3,"file":"IconButton.cjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport { focusStyles, textDecorationStyles } from '../../styles/utils';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n icon,\n iconPosition = 'start',\n labelBehavior = 'truncate',\n size = 'normal',\n loading = false,\n linkColoring = false,\n className,\n children,\n ref,\n ...props\n}: IconButtonProps) => {\n const isDisabled = 'disabled' in props && props.disabled;\n const isAnchor = 'href' in props && props.href != null;\n\n const classes = cn(\n styles['icon-button'],\n styles[`icon-button--${size}`],\n focusStyles.focusable,\n { [styles['icon-button--disabled']]: isDisabled },\n { [styles['icon-button--loading']]: loading },\n { [styles['icon-button--link-coloring']]: linkColoring },\n className,\n );\n\n const Icon = icon;\n\n const iconSlot = loading ? (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Spinner\n size={size === 'small' ? 'xs' : 's'}\n color=\"inherit\"\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n </span>\n ) : (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Icon aria-hidden=\"true\" />\n </span>\n );\n\n const content = (\n <>\n {iconPosition === 'start' && iconSlot}\n <span\n className={cn(styles['icon-button__label'], textDecorationStyles.underlineLink, {\n [styles['icon-button__label--wrap']]: labelBehavior === 'wrap',\n })}\n >\n {children}\n </span>\n {iconPosition === 'end' && iconSlot}\n </>\n );\n\n if (isAnchor) {\n const { href, renderLink, ...anchorProps } = props as Omit<\n typeof props,\n 'icon' \| 'iconPosition' \| 'size' \| 'loading' \| 'linkColoring'\n > & {\n href: string;\n renderLink?: (\n props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n href: string;\n children: ReactNode;\n },\n ) => ReactNode;\n };\n\n const {\n disabled: _disabled,\n type: _type,\n name: _name,\n ...safeAnchorProps\n } = anchorProps as typeof anchorProps & {\n disabled?: boolean;\n type?: 'button' \| 'submit' \| 'reset';\n name?: string;\n };\n\n const target = safeAnchorProps.target;\n const rel = safeAnchorProps.rel;\n const shouldHardenRel = target?.toLowerCase() === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n rel: hardenedRel,\n className: classes,\n 'aria-busy': loading \|\| undefined,\n 'aria-disabled': loading \|\| undefined,\n tabIndex: loading ? -1 : safeAnchorProps.tabIndex,\n onClick: loading\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : safeAnchorProps.onClick,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} />;\n }\n\n const {\n type = 'button',\n disabled,\n onClick,\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as Omit<\n typeof props,\n 'icon' \| 'iconPosition' \| 'size' \| 'loading' \| 'href' \| 'linkColoring'\n > & {\n type?: 'button' \| 'submit' \| 'reset';\n disabled?: boolean;\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n disabled={disabled \|\| loading}\n className={classes}\n aria-disabled={loading \|\| undefined}\n aria-busy={loading \|\| undefined}\n onClick={\n loading\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick\n }\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":["cn","styles","focusStyles","jsx","Spinner","jsxs","Fragment","textDecorationStyles"],"mappings":"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"}

package/dist/components/IconButton/IconButton.css CHANGED Viewed

@@ -1,4 +1,4 @@
-@layer dds-components {._icon-button_mhilb_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._icon-button_mhilb_1 {
     --_button-icon-size: 24px;
     display: inline-flex;
@@ -177,4 +177,7 @@
         box-shadow: none;
     }
 }
-}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/IconButton/IconButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"~~AAMA~~,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,GAAI,wGAWxB,eAAe,4CA0JjB,CAAC"}
1	+ {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,GAAI,wGAWxB,eAAe,4CA0JjB,CAAC"}

package/dist/components/IconButton/IconButton.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import focusStyles from "../../styles/utils/focus.module.css.js";
-import textDecorationStyles from "../../styles/utils/text-decoration.module.css.js";
+import { textDecorationStyles, focusStyles } from "../../styles/utils/index.js";
 import styles from "./IconButton.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 import { Spinner } from "../Spinner/Spinner.js";

package/dist/components/IconButton/IconButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles ~~from~~ ~~'../../styles/utils/focus.module.css';\nimport~~ ~~textDecorationStyles~~ from '../../styles/utils~~/text-decoration.module.css~~';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n icon,\n iconPosition = 'start',\n labelBehavior = 'truncate',\n size = 'normal',\n loading = false,\n linkColoring = false,\n className,\n children,\n ref,\n ...props\n}: IconButtonProps) => {\n const isDisabled = 'disabled' in props && props.disabled;\n const isAnchor = 'href' in props && props.href != null;\n\n const classes = cn(\n styles['icon-button'],\n styles[`icon-button--${size}`],\n focusStyles.focusable,\n { [styles['icon-button--disabled']]: isDisabled },\n { [styles['icon-button--loading']]: loading },\n { [styles['icon-button--link-coloring']]: linkColoring },\n className,\n );\n\n const Icon = icon;\n\n const iconSlot = loading ? (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Spinner\n size={size === 'small' ? 'xs' : 's'}\n color=\"inherit\"\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n </span>\n ) : (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Icon aria-hidden=\"true\" />\n </span>\n );\n\n const content = (\n <>\n {iconPosition === 'start' && iconSlot}\n <span\n className={cn(styles['icon-button__label'], textDecorationStyles.underlineLink, {\n [styles['icon-button__label--wrap']]: labelBehavior === 'wrap',\n })}\n >\n {children}\n </span>\n {iconPosition === 'end' && iconSlot}\n </>\n );\n\n if (isAnchor) {\n const { href, renderLink, ...anchorProps } = props as Omit<\n typeof props,\n 'icon' \| 'iconPosition' \| 'size' \| 'loading' \| 'linkColoring'\n > & {\n href: string;\n renderLink?: (\n props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n href: string;\n children: ReactNode;\n },\n ) => ReactNode;\n };\n\n const {\n disabled: _disabled,\n type: _type,\n name: _name,\n ...safeAnchorProps\n } = anchorProps as typeof anchorProps & {\n disabled?: boolean;\n type?: 'button' \| 'submit' \| 'reset';\n name?: string;\n };\n\n const target = safeAnchorProps.target;\n const rel = safeAnchorProps.rel;\n const shouldHardenRel = target?.toLowerCase() === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n rel: hardenedRel,\n className: classes,\n 'aria-busy': loading \|\| undefined,\n 'aria-disabled': loading \|\| undefined,\n tabIndex: loading ? -1 : safeAnchorProps.tabIndex,\n onClick: loading\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : safeAnchorProps.onClick,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} />;\n }\n\n const {\n type = 'button',\n disabled,\n onClick,\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as Omit<\n typeof props,\n 'icon' \| 'iconPosition' \| 'size' \| 'loading' \| 'href' \| 'linkColoring'\n > & {\n type?: 'button' \| 'submit' \| 'reset';\n disabled?: boolean;\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n disabled={disabled \|\| loading}\n className={classes}\n aria-disabled={loading \|\| undefined}\n aria-busy={loading \|\| undefined}\n onClick={\n loading\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick\n }\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;AAQO~~,MAAM,aAAa,CAAC;AAAA,EACvB;AAAA,EACA,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,QAAM,aAAa,cAAc,SAAS,MAAM;AAChD,QAAM,WAAW,UAAU,SAAS,MAAM,QAAQ;AAElD,QAAM,UAAU;AAAA,IACZ,OAAO,aAAa;AAAA,IACpB,OAAO,gBAAgB,IAAI,EAAE;AAAA,IAC7B,YAAY;AAAA,IACZ,EAAE,CAAC,OAAO,uBAAuB,CAAC,GAAG,WAAA;AAAA,IACrC,EAAE,CAAC,OAAO,sBAAsB,CAAC,GAAG,QAAA;AAAA,IACpC,EAAE,CAAC,OAAO,4BAA4B,CAAC,GAAG,aAAA;AAAA,IAC1C;AAAA,EAAA;AAGJ,QAAM,OAAO;AAEb,QAAM,WAAW,UACb,oBAAC,QAAA,EAAK,WAAW,OAAO,mBAAmB,GAAG,eAAY,QACtD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAM,SAAS,UAAU,OAAO;AAAA,MAChC,OAAM;AAAA,MACN,eAAY;AAAA,MACZ,MAAK;AAAA,IAAA;AAAA,EAAA,EACT,CACJ,IAEA,oBAAC,QAAA,EAAK,WAAW,OAAO,mBAAmB,GAAG,eAAY,QACtD,UAAA,oBAAC,MAAA,EAAK,eAAY,QAAO,GAC7B;AAGJ,QAAM,UACF,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,iBAAiB,WAAW;AAAA,IAC7B;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,OAAO,oBAAoB,GAAG,qBAAqB,eAAe;AAAA,UAC5E,CAAC,OAAO,0BAA0B,CAAC,GAAG,kBAAkB;AAAA,QAAA,CAC3D;AAAA,QAEA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEJ,iBAAiB,SAAS;AAAA,EAAA,GAC/B;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,QAAQ,YAAA,MAAkB;AAClD,UAAM,YAAY,IAAI;AAAA,OACjB,OAAO,IACH,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAAC,UAAU,MAAM,aAAa;AAAA,IAAA;AAG3C,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK,gBAAgB;AAAA,MACzC,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAO,oBAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAO,oBAAC,KAAA,EAAG,GAAG,UAAA,CAAW;AAAA,EAC7B;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAYJ,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,iBAAe,WAAW;AAAA,MAC1B,aAAW,WAAW;AAAA,MACtB,SACI,UACM,CAAC,MAAM;AACH,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA;AAAA,MAET,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
1	+ {"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport { focusStyles, textDecorationStyles } from '../../styles/utils';\nimport { Spinner } from '../Spinner';\nimport styles from './IconButton.module.css';\nimport type { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = ({\n icon,\n iconPosition = 'start',\n labelBehavior = 'truncate',\n size = 'normal',\n loading = false,\n linkColoring = false,\n className,\n children,\n ref,\n ...props\n}: IconButtonProps) => {\n const isDisabled = 'disabled' in props && props.disabled;\n const isAnchor = 'href' in props && props.href != null;\n\n const classes = cn(\n styles['icon-button'],\n styles[`icon-button--${size}`],\n focusStyles.focusable,\n { [styles['icon-button--disabled']]: isDisabled },\n { [styles['icon-button--loading']]: loading },\n { [styles['icon-button--link-coloring']]: linkColoring },\n className,\n );\n\n const Icon = icon;\n\n const iconSlot = loading ? (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Spinner\n size={size === 'small' ? 'xs' : 's'}\n color=\"inherit\"\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n </span>\n ) : (\n <span className={styles['icon-button__icon']} aria-hidden=\"true\">\n <Icon aria-hidden=\"true\" />\n </span>\n );\n\n const content = (\n <>\n {iconPosition === 'start' && iconSlot}\n <span\n className={cn(styles['icon-button__label'], textDecorationStyles.underlineLink, {\n [styles['icon-button__label--wrap']]: labelBehavior === 'wrap',\n })}\n >\n {children}\n </span>\n {iconPosition === 'end' && iconSlot}\n </>\n );\n\n if (isAnchor) {\n const { href, renderLink, ...anchorProps } = props as Omit<\n typeof props,\n 'icon' \| 'iconPosition' \| 'size' \| 'loading' \| 'linkColoring'\n > & {\n href: string;\n renderLink?: (\n props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n href: string;\n children: ReactNode;\n },\n ) => ReactNode;\n };\n\n const {\n disabled: _disabled,\n type: _type,\n name: _name,\n ...safeAnchorProps\n } = anchorProps as typeof anchorProps & {\n disabled?: boolean;\n type?: 'button' \| 'submit' \| 'reset';\n name?: string;\n };\n\n const target = safeAnchorProps.target;\n const rel = safeAnchorProps.rel;\n const shouldHardenRel = target?.toLowerCase() === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n rel: hardenedRel,\n className: classes,\n 'aria-busy': loading \|\| undefined,\n 'aria-disabled': loading \|\| undefined,\n tabIndex: loading ? -1 : safeAnchorProps.tabIndex,\n onClick: loading\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : safeAnchorProps.onClick,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} />;\n }\n\n const {\n type = 'button',\n disabled,\n onClick,\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as Omit<\n typeof props,\n 'icon' \| 'iconPosition' \| 'size' \| 'loading' \| 'href' \| 'linkColoring'\n > & {\n type?: 'button' \| 'submit' \| 'reset';\n disabled?: boolean;\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n disabled={disabled \|\| loading}\n className={classes}\n aria-disabled={loading \|\| undefined}\n aria-busy={loading \|\| undefined}\n onClick={\n loading\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick\n }\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Label/Label.css CHANGED Viewed

@@ -1,4 +1,4 @@
-@layer dds-components {._label_7ugso_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._label_7ugso_1 {
     --_label-height: 22px;
     display: inline-block;
@@ -40,4 +40,7 @@
 ._label--other_7ugso_40 {
     background-color: var(--color-semantic-accent-sky-strong);
 }
-}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }