npm - @persona/design-system - Versions diffs - 0.1.6 → 0.1.8 - Mend

@persona/design-system 0.1.6 → 0.1.8

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

Files changed (817) hide show

package/dist/{HoverCopyableField-DyW2iZuo.cjs → HoverCopyableField-CRkM7o4B.cjs} RENAMED Viewed

@@ -1,16 +1,16 @@
 const require_chunk = require("./chunk-CKQMccvm.cjs");
 require("./variables/transitions.cjs");
-const require_Card = require("./Card-CaOItkgL.cjs");
-const require_Text = require("./Text-CzN0DOXV.cjs");
-const require_useToggle = require("./useToggle-CSkZWXtQ.cjs");
 const require_variables_keyframes = require("./variables/keyframes.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_Popover = require("./Popover-jHZICnQt.cjs");
+const require_Card = require("./Card-Csz-PxX0.cjs");
+const require_Text = require("./Text-G9QmYf0P.cjs");
+const require_useToggle = require("./useToggle-DARO917w.cjs");
+const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
+const require_Popover = require("./Popover-BzgMAhsX.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _persona_id_design_tokens = require("@persona-id/design-tokens");
-let _persona_id_icons = require("@persona-id/icons");
+let _persona_icons = require("@persona/icons");
 //#region components/HoverCopyableField/HoverCopyableField.tsx
 const copyToClipboard = async (text) => {
 	try {
@@ -24,7 +24,7 @@ const copyToClipboard = async (text) => {
 };
 const CopyableFieldContainer = styled_components.default.div`
   display: flex;
-  gap: ${_persona_id_design_tokens.Spacing[1]};
+  gap: ${_persona_design_tokens.Spacing[1]};
   align-items: center;
 `;
 const CopyButton = (0, styled_components.default)(require_IconButton.Button).attrs(() => ({
@@ -32,8 +32,8 @@ const CopyButton = (0, styled_components.default)(require_IconButton.Button).att
 	variant: "inverse",
 	width: "icon"
 }))`
-  height: ${_persona_id_design_tokens.Spacing[5]};
-  width: ${_persona_id_design_tokens.Spacing[5]};
+  height: ${_persona_design_tokens.Spacing[5]};
+  width: ${_persona_design_tokens.Spacing[5]};
   visibility: ${({ isActive }) => isActive ? "visible" : "hidden"};
   animation: ${require_variables_keyframes.fadeIn} ${"400ms"} ease-in-out;
   svg {
@@ -79,7 +79,7 @@ const HoverCopyableField = ({ copyValue, confirmationText = "Copied", children }
 					id: "hover-copyable-field__copy-button",
 					isActive: copyButtonActive || confirmationActive,
 					onClick: copyField,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_id_icons.CopyIcon, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CopyIcon, {
 						width: 16,
 						height: 16
 					})
@@ -107,4 +107,4 @@ Object.defineProperty(exports, "HoverCopyableField_default", {
 	}
 });
-//# sourceMappingURL=HoverCopyableField-DyW2iZuo.cjs.map
+//# sourceMappingURL=HoverCopyableField-CRkM7o4B.cjs.map

package/dist/HoverCopyableField-CRkM7o4B.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HoverCopyableField-CRkM7o4B.cjs","names":["Spacing","Button","fadeIn","Card","useToggle","Popover","CopyIcon","Paragraph"],"sources":["../components/HoverCopyableField/HoverCopyableField.tsx","../components/HoverCopyableField/index.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport Card from 'design-system/components/Card';\nimport Popover from 'design-system/components/Popover';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst copyToClipboard = async (text: string): Promise<boolean> => {\n try {\n if ('clipboard' in navigator) {\n await navigator.clipboard.writeText(text);\n return true;\n } else {\n return document.execCommand('copy', true, text);\n }\n } catch {\n return false;\n }\n};\n\nconst CopyableFieldContainer = styled.div`\n display: flex;\n gap: ${Spacing[1]};\n align-items: center;\n`;\n\nconst CopyButton = styled(Button).attrs(() => ({\n type: 'button',\n variant: 'inverse',\n width: 'icon',\n}))<{ isActive: boolean }>`\n height: ${Spacing[5]};\n width: ${Spacing[5]};\n visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};\n animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n svg {\n width: 14px;\n height: 14px;\n }\n`;\n\nconst StyledCard = styled(Card)`\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n padding: 6px;\n margin: 0;\n`;\n\ninterface HoverCopyableFieldProps {\n copyValue: string | undefined;\n confirmationText?: string;\n children: ReactNode;\n}\n\nconst HoverCopyableField = ({\n copyValue,\n confirmationText = 'Copied',\n children,\n}: HoverCopyableFieldProps) => {\n const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);\n const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] =\n useToggle(false);\n\n const copyTextToClipboard = async () => {\n if (copyValue == null) {\n return;\n }\n const copyWasSuccessful = await copyToClipboard(copyValue);\n\n if (copyWasSuccessful) {\n showConfirmation();\n setTimeout(() => {\n hideCopyButton();\n hideConfirmation();\n }, 1200);\n }\n };\n\n const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n copyTextToClipboard();\n };\n\n return copyValue != null && copyValue.trim().length > 0 ? (\n <CopyableFieldContainer onMouseEnter={showCopyButton} onMouseLeave={hideCopyButton}>\n {children}\n <Popover open={confirmationActive}>\n <Popover.Anchor asChild>\n <CopyButton\n id='hover-copyable-field__copy-button'\n isActive={copyButtonActive || confirmationActive}\n onClick={copyField}\n >\n <CopyIcon width={16} height={16} />\n </CopyButton>\n </Popover.Anchor>\n <Popover.Content side='top' align='center' style={{ zIndex: 2 }}>\n <StyledCard elevated>\n <Paragraph>{confirmationText}</Paragraph>\n </StyledCard>\n </Popover.Content>\n </Popover>\n </CopyableFieldContainer>\n ) : null;\n};\n\nexport default HoverCopyableField;\n","import HoverCopyableField from './HoverCopyableField';\n\nexport default HoverCopyableField;\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,kBAAkB,OAAO,SAAmC;AAChE,KAAI;AACF,MAAI,eAAe,WAAW;AAC5B,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,UAAO;QAEP,QAAO,SAAS,YAAY,QAAQ,MAAM,KAAK;SAE3C;AACN,SAAO;;;AAIX,MAAM,yBAAyB,kBAAA,QAAO,GAAG;;SAEhCA,uBAAAA,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,CAAA,GAAA,kBAAA,SAAOC,mBAAAA,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACSD,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrDE,4BAAAA,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,CAAA,GAAA,kBAAA,SAAOC,aAAAA,aAAK;;;;;eAKhBD,4BAAAA,OAAO,GAAA,QAA6B;;;;AAWnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoBE,kBAAAA,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9DA,kBAAAA,UAAU,MAAM;CAElB,MAAM,sBAAsB,YAAY;AACtC,MAAI,aAAa,KACf;AAIF,MAAI,MAF4B,gBAAgB,UAAU,EAEnC;AACrB,qBAAkB;AAClB,oBAAiB;AACf,oBAAgB;AAChB,sBAAkB;MACjB,KAAK;;;CAIZ,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,uBAAqB;;AAGvB,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,iBAAA,GAAA,kBAAA,MAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,iBAAA,GAAA,kBAAA,MAACC,gBAAAA,iBAAD;GAAS,MAAM;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,gBAAQ,QAAT;IAAgB,SAAA;cACd,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAACD,gBAAAA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,iBAAA,GAAA,kBAAA,KAAC,YAAD;KAAY,UAAA;eACV,iBAAA,GAAA,kBAAA,KAACE,aAAAA,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB;;;;AC/GN,IAAA,6BAAe"}

package/dist/{HoverCopyableField-DBkYvwii.mjs → HoverCopyableField-ClXBg_ld.mjs} RENAMED Viewed

@@ -1,14 +1,14 @@
 import "./variables/transitions.mjs";
-import { t as Card_default } from "./Card-CLTkZLKr.mjs";
-import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
-import { t as useToggle } from "./useToggle-3k3EkV8V.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
-import { n as Button } from "./IconButton-DC4rh6ow.mjs";
-import { s as Popover_default } from "./Popover-D4_aqKlm.mjs";
+import { t as Card_default } from "./Card-BMCB9eFC.mjs";
+import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
+import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
+import { n as Button } from "./IconButton-CIWiEsS-.mjs";
+import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
+import { Spacing } from "@persona/design-tokens";
 import styled from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Spacing } from "@persona-id/design-tokens";
-import { CopyIcon } from "@persona-id/icons";
+import { CopyIcon } from "@persona/icons";
 //#region components/HoverCopyableField/HoverCopyableField.tsx
 const copyToClipboard = async (text) => {
 	try {
@@ -100,4 +100,4 @@ var HoverCopyableField_default = HoverCopyableField;
 //#endregion
 export { HoverCopyableField_default as t };
-//# sourceMappingURL=HoverCopyableField-DBkYvwii.mjs.map
+//# sourceMappingURL=HoverCopyableField-ClXBg_ld.mjs.map

package/dist/HoverCopyableField-ClXBg_ld.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HoverCopyableField-ClXBg_ld.mjs","names":["Card","Popover"],"sources":["../components/HoverCopyableField/HoverCopyableField.tsx","../components/HoverCopyableField/index.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport Card from 'design-system/components/Card';\nimport Popover from 'design-system/components/Popover';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst copyToClipboard = async (text: string): Promise<boolean> => {\n try {\n if ('clipboard' in navigator) {\n await navigator.clipboard.writeText(text);\n return true;\n } else {\n return document.execCommand('copy', true, text);\n }\n } catch {\n return false;\n }\n};\n\nconst CopyableFieldContainer = styled.div`\n display: flex;\n gap: ${Spacing[1]};\n align-items: center;\n`;\n\nconst CopyButton = styled(Button).attrs(() => ({\n type: 'button',\n variant: 'inverse',\n width: 'icon',\n}))<{ isActive: boolean }>`\n height: ${Spacing[5]};\n width: ${Spacing[5]};\n visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};\n animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n svg {\n width: 14px;\n height: 14px;\n }\n`;\n\nconst StyledCard = styled(Card)`\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n padding: 6px;\n margin: 0;\n`;\n\ninterface HoverCopyableFieldProps {\n copyValue: string | undefined;\n confirmationText?: string;\n children: ReactNode;\n}\n\nconst HoverCopyableField = ({\n copyValue,\n confirmationText = 'Copied',\n children,\n}: HoverCopyableFieldProps) => {\n const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);\n const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] =\n useToggle(false);\n\n const copyTextToClipboard = async () => {\n if (copyValue == null) {\n return;\n }\n const copyWasSuccessful = await copyToClipboard(copyValue);\n\n if (copyWasSuccessful) {\n showConfirmation();\n setTimeout(() => {\n hideCopyButton();\n hideConfirmation();\n }, 1200);\n }\n };\n\n const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n copyTextToClipboard();\n };\n\n return copyValue != null && copyValue.trim().length > 0 ? (\n <CopyableFieldContainer onMouseEnter={showCopyButton} onMouseLeave={hideCopyButton}>\n {children}\n <Popover open={confirmationActive}>\n <Popover.Anchor asChild>\n <CopyButton\n id='hover-copyable-field__copy-button'\n isActive={copyButtonActive || confirmationActive}\n onClick={copyField}\n >\n <CopyIcon width={16} height={16} />\n </CopyButton>\n </Popover.Anchor>\n <Popover.Content side='top' align='center' style={{ zIndex: 2 }}>\n <StyledCard elevated>\n <Paragraph>{confirmationText}</Paragraph>\n </StyledCard>\n </Popover.Content>\n </Popover>\n </CopyableFieldContainer>\n ) : null;\n};\n\nexport default HoverCopyableField;\n","import HoverCopyableField from './HoverCopyableField';\n\nexport default HoverCopyableField;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,kBAAkB,OAAO,SAAmC;AAChE,KAAI;AACF,MAAI,eAAe,WAAW;AAC5B,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,UAAO;QAEP,QAAO,SAAS,YAAY,QAAQ,MAAM,KAAK;SAE3C;AACN,SAAO;;;AAIX,MAAM,yBAAyB,OAAO,GAAG;;SAEhC,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,OAAO,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACS,QAAQ,GAAG;WACZ,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrD,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,OAAOA,aAAK;;;;;eAKhB,OAAO,GAAA,QAA6B;;;;AAWnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoB,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9D,UAAU,MAAM;CAElB,MAAM,sBAAsB,YAAY;AACtC,MAAI,aAAa,KACf;AAIF,MAAI,MAF4B,gBAAgB,UAAU,EAEnC;AACrB,qBAAkB;AAClB,oBAAiB;AACf,oBAAgB;AAChB,sBAAkB;MACjB,KAAK;;;CAIZ,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,uBAAqB;;AAGvB,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,qBAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,qBAACC,iBAAD;GAAS,MAAM;aAAf,CACE,oBAACA,gBAAQ,QAAT;IAAgB,SAAA;cACd,oBAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,oBAAC,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,oBAACA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,oBAAC,YAAD;KAAY,UAAA;eACV,oBAAC,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB;;;;AC/GN,IAAA,6BAAe"}

package/dist/HoverCopyableField.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 //#region components/HoverCopyableField/HoverCopyableField.d.ts
 interface HoverCopyableFieldProps {

package/dist/{IconButton-DggxojBH.d.mts → IconButton-BSES_-6g.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "./Button-DcTUxRNI.mjs";
+import { r as ButtonProps } from "./Button-9p469xA1.mjs";
 import * as _$react from "react";
 //#region components/Button/IconButton.d.ts
@@ -21,4 +21,4 @@ interface IconButtonProps extends Omit<ButtonProps, 'width' | 'prefixIcon' | 'pr
 declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=IconButton-DggxojBH.d.mts.map
+//# sourceMappingURL=IconButton-BSES_-6g.d.mts.map

package/dist/{IconButton-DC4rh6ow.mjs → IconButton-CIWiEsS-.mjs} RENAMED Viewed

@@ -3,14 +3,14 @@ import { focusOutlineControlled } from "./mixins/focus.mjs";
 import "./variables/transitions.mjs";
 import { printMixins } from "./mixins/print/index.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as useToggle } from "./useToggle-3k3EkV8V.mjs";
 import { rotate } from "./variables/keyframes.mjs";
+import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
 import { forwardRef, useCallback } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { LoaderIcon } from "@persona/icons";
-import { Link } from "react-router-dom";
 import { isEmpty, isFunction } from "lodash/fp.js";
 //#region components/Button/Button.tsx
 const noop = () => void 0;
@@ -284,7 +284,7 @@ const Button = forwardRef(function Button({ id, children, prefixIcon, suffixIcon
 		}), /* @__PURE__ */ jsxs(ButtonChildren, {
 			isPending: loading,
 			children: [
-				prefixIcon != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [prefixIconType === "basic" && /* @__PURE__ */ jsx(PrefixIconContainer, { children: prefixIcon }), prefixIconType === "inherit" && /* @__PURE__ */ jsx(InheritPrefixIconContainer, { children: prefixIcon })] }),
+				prefixIcon != null && /* @__PURE__ */ jsxs(Fragment, { children: [prefixIconType === "basic" && /* @__PURE__ */ jsx(PrefixIconContainer, { children: prefixIcon }), prefixIconType === "inherit" && /* @__PURE__ */ jsx(InheritPrefixIconContainer, { children: prefixIcon })] }),
 				children && /* @__PURE__ */ jsx(ButtonText, {
 					width,
 					size,
@@ -338,4 +338,4 @@ const IconButton = forwardRef(function IconButton({ size = "xs", ...props }, ref
 //#endregion
 export { SuffixIconContainer as a, StyledButton as i, Button as n, ButtonChildren as r, IconButton as t };
-//# sourceMappingURL=IconButton-DC4rh6ow.mjs.map
+//# sourceMappingURL=IconButton-CIWiEsS-.mjs.map

package/dist/{IconButton-DC4rh6ow.mjs.map → IconButton-CIWiEsS-.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton-DC4rh6ow.mjs","names":[],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash/fp';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n};\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: Link,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n const palette = theme.color.variants[variant] as any;\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n svg path {\n stroke: ${palette.textDisabled};\n }\n\n / For backwards compatibility with current coloring scheme (targeting stroke property) /\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n / Support icons with stroke /\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${({ theme }) => theme.color.border.input};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n / To properly position loading spinner /\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return sizeStyles[size];\n }}\n ${({ width }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return widthStyles[width];\n }}\n\n / Variant styling /\n ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n let palette = theme.color.variants[variant] as any;\n\n if (variant === 'basic' && $onSecondaryBackground) {\n palette = {\n ...palette,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n default: Color.CoreSlate300,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n hover: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n active: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${({ theme }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.color.variants[variant].active;\n }};\n user-select: none;\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' \| 'sm'; width: 'full' \| 'auto' \| 'button' \| 'icon' }>`\n position: relative;\n\n / Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n /\n\n / Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work /\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n \| ((e: MouseEvent<HTMLButtonElement>) => void)\n \| ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /\n Visual style of the button.\n \n - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n \n @defaultValue 'primary'\n /\n variant?: 'basic' \| 'primary' \| 'inverse' \| 'danger' \| 'text' \| 'outline';\n /\n Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n /\n isPending?: boolean;\n /\n Icon rendered to the left of the button label.\n * Import from `@persona-id/icons`.\n /\n prefixIcon?: ReactNode;\n /\n Controls how the prefix icon inherits sizing.\n \n - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n \n @defaultValue 'basic'\n /\n prefixIconType?: 'basic' \| 'inherit';\n\n /\n Icon rendered to the right of the button label.\n * Import from `@persona-id/icons`.\n /\n suffixIcon?: ReactNode;\n\n /\n Height and typography scale of the button.\n \n @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n\n /\n Changes the button into a link.\n * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n * `https://` URL to render an `<a>` tag that opens in a new tab.\n /\n to?: LinkProps['to'];\n\n /\n Overrides the target of the link if `to` is provided and is an external link.\n /\n target?: LinkProps['target'];\n\n /\n Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Controls the width of the button.\n \n - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n \n @defaultValue 'full'\n /\n width?: 'full' \| 'auto' \| 'button' \| 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /\n In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n /\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending \|\| isResolving;\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n await maybePromise;\n disable();\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled \|\| loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] \|\| ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' \| 'prefixIcon' \| 'prefixIconType' \| 'suffixIcon' \| 'variant' \| 'size'\n> {\n /\n `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n /\n size?: IconBtnSize;\n}\n\n/\n Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}
1	+ {"version":3,"file":"IconButton-CIWiEsS-.mjs","names":[],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash/fp';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n};\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: Link,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n const palette = theme.color.variants[variant] as any;\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n svg path {\n stroke: ${palette.textDisabled};\n }\n\n / For backwards compatibility with current coloring scheme (targeting stroke property) /\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n / Support icons with stroke /\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${({ theme }) => theme.color.border.input};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n / To properly position loading spinner /\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return sizeStyles[size];\n }}\n ${({ width }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return widthStyles[width];\n }}\n\n / Variant styling /\n ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n let palette = theme.color.variants[variant] as any;\n\n if (variant === 'basic' && $onSecondaryBackground) {\n palette = {\n ...palette,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n default: Color.CoreSlate300,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n hover: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n active: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${({ theme }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.color.variants[variant].active;\n }};\n user-select: none;\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' \| 'sm'; width: 'full' \| 'auto' \| 'button' \| 'icon' }>`\n position: relative;\n\n / Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n /\n\n / Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work /\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n \| ((e: MouseEvent<HTMLButtonElement>) => void)\n \| ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /\n Visual style of the button.\n \n - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n \n @defaultValue 'primary'\n /\n variant?: 'basic' \| 'primary' \| 'inverse' \| 'danger' \| 'text' \| 'outline';\n /\n Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n /\n isPending?: boolean;\n /\n Icon rendered to the left of the button label.\n * Import from `@persona-id/icons`.\n /\n prefixIcon?: ReactNode;\n /\n Controls how the prefix icon inherits sizing.\n \n - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n \n @defaultValue 'basic'\n /\n prefixIconType?: 'basic' \| 'inherit';\n\n /\n Icon rendered to the right of the button label.\n * Import from `@persona-id/icons`.\n /\n suffixIcon?: ReactNode;\n\n /\n Height and typography scale of the button.\n \n @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n\n /\n Changes the button into a link.\n * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n * `https://` URL to render an `<a>` tag that opens in a new tab.\n /\n to?: LinkProps['to'];\n\n /\n Overrides the target of the link if `to` is provided and is an external link.\n /\n target?: LinkProps['target'];\n\n /\n Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Controls the width of the button.\n \n - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n \n @defaultValue 'full'\n /\n width?: 'full' \| 'auto' \| 'button' \| 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /\n In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n /\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending \|\| isResolving;\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n await maybePromise;\n disable();\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled \|\| loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] \|\| ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' \| 'prefixIcon' \| 'prefixIconType' \| 'suffixIcon' \| 'variant' \| 'size'\n> {\n /\n `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n /\n size?: IconBtnSize;\n}\n\n/\n Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/{IconButton-DNy7g5zh.cjs → IconButton-nlgjJQCS.cjs} RENAMED Viewed

@@ -4,15 +4,15 @@ const require_mixins_focus = require("./mixins/focus.cjs");
 require("./variables/transitions.cjs");
 const require_mixins_print_index = require("./mixins/print/index.cjs");
 const require_mixins_text = require("./mixins/text.cjs");
-const require_useToggle = require("./useToggle-CSkZWXtQ.cjs");
 const require_variables_keyframes = require("./variables/keyframes.cjs");
+const require_useToggle = require("./useToggle-DARO917w.cjs");
 let _persona_design_tokens = require("@persona/design-tokens");
 let styled_components = require("styled-components");
 styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _persona_icons = require("@persona/icons");
 let react_router_dom = require("react-router-dom");
+let react = require("react");
+let _persona_icons = require("@persona/icons");
 let lodash_fp_js = require("lodash/fp.js");
 //#region components/Button/Button.tsx
 const noop = () => void 0;
@@ -369,4 +369,4 @@ Object.defineProperty(exports, "SuffixIconContainer", {
 	}
 });
-//# sourceMappingURL=IconButton-DNy7g5zh.cjs.map
+//# sourceMappingURL=IconButton-nlgjJQCS.cjs.map

package/dist/{IconButton-DNy7g5zh.cjs.map → IconButton-nlgjJQCS.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton-DNy7g5zh.cjs","names":["paragraphMixins","Spacing","Link","Color","isHovered","isNotDisabled","isDisabled","focusOutlineControlled","printMixins","LoaderIcon","rotate","useToggle","BorderRadius"],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash/fp';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n};\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: Link,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n const palette = theme.color.variants[variant] as any;\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n svg path {\n stroke: ${palette.textDisabled};\n }\n\n / For backwards compatibility with current coloring scheme (targeting stroke property) /\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n / Support icons with stroke /\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${({ theme }) => theme.color.border.input};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n / To properly position loading spinner /\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return sizeStyles[size];\n }}\n ${({ width }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return widthStyles[width];\n }}\n\n / Variant styling /\n ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n let palette = theme.color.variants[variant] as any;\n\n if (variant === 'basic' && $onSecondaryBackground) {\n palette = {\n ...palette,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n default: Color.CoreSlate300,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n hover: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n active: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${({ theme }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.color.variants[variant].active;\n }};\n user-select: none;\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' \| 'sm'; width: 'full' \| 'auto' \| 'button' \| 'icon' }>`\n position: relative;\n\n / Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n /\n\n / Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work /\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n \| ((e: MouseEvent<HTMLButtonElement>) => void)\n \| ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /\n Visual style of the button.\n \n - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n \n @defaultValue 'primary'\n /\n variant?: 'basic' \| 'primary' \| 'inverse' \| 'danger' \| 'text' \| 'outline';\n /\n Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n /\n isPending?: boolean;\n /\n Icon rendered to the left of the button label.\n * Import from `@persona-id/icons`.\n /\n prefixIcon?: ReactNode;\n /\n Controls how the prefix icon inherits sizing.\n \n - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n \n @defaultValue 'basic'\n /\n prefixIconType?: 'basic' \| 'inherit';\n\n /\n Icon rendered to the right of the button label.\n * Import from `@persona-id/icons`.\n /\n suffixIcon?: ReactNode;\n\n /\n Height and typography scale of the button.\n \n @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n\n /\n Changes the button into a link.\n * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n * `https://` URL to render an `<a>` tag that opens in a new tab.\n /\n to?: LinkProps['to'];\n\n /\n Overrides the target of the link if `to` is provided and is an external link.\n /\n target?: LinkProps['target'];\n\n /\n Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Controls the width of the button.\n \n - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n \n @defaultValue 'full'\n /\n width?: 'full' \| 'auto' \| 'button' \| 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /\n In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n /\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending \|\| isResolving;\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n await maybePromise;\n disable();\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled \|\| loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] \|\| ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' \| 'prefixIcon' \| 'prefixIconType' \| 'suffixIcon' \| 'variant' \| 'size'\n> {\n /\n `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n /\n size?: IconBtnSize;\n}\n\n/\n Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}
1	+ {"version":3,"file":"IconButton-nlgjJQCS.cjs","names":["paragraphMixins","Spacing","Link","Color","isHovered","isNotDisabled","isDisabled","focusOutlineControlled","printMixins","LoaderIcon","rotate","useToggle","BorderRadius"],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash/fp';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n};\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: Link,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n const palette = theme.color.variants[variant] as any;\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n svg path {\n stroke: ${palette.textDisabled};\n }\n\n / For backwards compatibility with current coloring scheme (targeting stroke property) /\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n / Support icons with stroke /\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${({ theme }) => theme.color.border.input};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n / To properly position loading spinner /\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return sizeStyles[size];\n }}\n ${({ width }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return widthStyles[width];\n }}\n\n / Variant styling /\n ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n let palette = theme.color.variants[variant] as any;\n\n if (variant === 'basic' && $onSecondaryBackground) {\n palette = {\n ...palette,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n default: Color.CoreSlate300,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n hover: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n active: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${({ theme }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.color.variants[variant].active;\n }};\n user-select: none;\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' \| 'sm'; width: 'full' \| 'auto' \| 'button' \| 'icon' }>`\n position: relative;\n\n / Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n /\n\n / Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work /\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n \| ((e: MouseEvent<HTMLButtonElement>) => void)\n \| ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /\n Visual style of the button.\n \n - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n \n @defaultValue 'primary'\n /\n variant?: 'basic' \| 'primary' \| 'inverse' \| 'danger' \| 'text' \| 'outline';\n /\n Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n /\n isPending?: boolean;\n /\n Icon rendered to the left of the button label.\n * Import from `@persona-id/icons`.\n /\n prefixIcon?: ReactNode;\n /\n Controls how the prefix icon inherits sizing.\n \n - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n \n @defaultValue 'basic'\n /\n prefixIconType?: 'basic' \| 'inherit';\n\n /\n Icon rendered to the right of the button label.\n * Import from `@persona-id/icons`.\n /\n suffixIcon?: ReactNode;\n\n /\n Height and typography scale of the button.\n \n @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n\n /\n Changes the button into a link.\n * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n * `https://` URL to render an `<a>` tag that opens in a new tab.\n /\n to?: LinkProps['to'];\n\n /\n Overrides the target of the link if `to` is provided and is an external link.\n /\n target?: LinkProps['target'];\n\n /\n Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Controls the width of the button.\n \n - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n \n @defaultValue 'full'\n /\n width?: 'full' \| 'auto' \| 'button' \| 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /\n In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n /\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending \|\| isResolving;\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n await maybePromise;\n disable();\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled \|\| loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] \|\| ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' \| 'prefixIcon' \| 'prefixIconType' \| 'suffixIcon' \| 'variant' \| 'size'\n> {\n /\n `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n /\n size?: IconBtnSize;\n}\n\n/\n Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,aAAmB,KAAA;AAGzB,MAAM,YAAY,EAAE,aAAgC,SAAS,KAAK;AAGlE,MAAM,aAA0F;CAC9F,IAAI,kBAAA,GAAG;MACHA,oBAAAA,gBAAgB,GAAG;eACV,EAAE,YAAY,MAAM,OAAO,OAAO,GAAG;eACrCC,uBAAAA,QAAQ,GAAG;;;;;;CAMxB,IAAI,kBAAA,GAAG;MACHD,oBAAAA,gBAAgB,GAAG;eACV,EAAE,YAAY,MAAM,OAAO,OAAO,GAAG;eACrCC,uBAAAA,QAAQ,GAAG;;;;;;CAMzB;AAGD,MAAM,cAA4F;CAChG,MAAM,kBAAA,GAAG;;;CAGT,MAAM,kBAAA,GAAG;;;CAIT,QAAQ,kBAAA,GAAG;cACC,EAAE,YAAY,MAAM,QAAQ,MAAM,GAAG;;CAEjD,MAAM,kBAAA,GAAgB;cACV,EAAE,OAAO,WAAW;AAE5B,SAAO,MAAM,OAAO,OAAO;GAC3B;;;;CAIL;AAOD,MAAa,eAAe,kBAAA,QAAO,OAAO,OAAsC,EAAE,IAAI,aAAa;AACjG,MAAA,GAAA,aAAA,SAAY,GAAG,CACb,QAAO;UACE,OAAO,OAAO,YAAY,GAAG,WAAW,WAAW,CAC5D,QAAO;EACL,IAAI;EACJ,MAAM;EACN,QAAQ,UAAU;EAClB,KAAK;EACN;KAED,QAAO,EACL,IAAIC,iBAAAA,MACL;EAEH;;;;;KAKG,EAAE,OAAO,cAAc;CAExB,MAAM,UAAU,MAAM,MAAM,SAAS;AACrC,QAAO,kBAAA,GAAG;;4BAEc,QAAQ,SAAS;iBAC5B,QAAQ,aAAa;;oBAElB,QAAQ,aAAa;;;;;;;;;;;;;;;;;;EAkBrC;;KAEC,EAAE,cACH,YAAY,aACZ,kBAAA,GAAG;2BACoB,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;MAC5D;;;;;;;;;oBASc,EAAE,YAAY,MAAM,OAAO,aAAa;;iCAEX;;;KAG5C,EAAE,WAAW;AAEd,QAAO,WAAW;EAClB;KACC,EAAE,YAAY;AAEf,QAAO,YAAY;EACnB;;;KAGC,EAAE,OAAO,SAAS,YAAY,6BAA6B;CAE5D,IAAI,UAAU,MAAM,MAAM,SAAS;AAEnC,KAAI,YAAY,WAAW,uBACzB,WAAU;EACR,GAAG;EAEH,SAASC,uBAAAA,MAAM;EAEf,OAAOA,uBAAAA,MAAM;EAEb,QAAQA,uBAAAA,MAAM;EAEd,UAAUA,uBAAAA,MAAM;EACjB;AAGH,QAAO,kBAAA,GAAG;0BACY,QAAQ,QAAQ;eAC3B,QAAQ,KAAK;;kBAEV,QAAQ,KAAK;;;;;;;;;;;;;SAatBC,wBAAAA,YAAYC,wBAAAA,cAAc;4BACP,QAAQ,MAAM;;;SAGjCC,wBAAAA,WAAW;;;;SAIX,SAAS;4BACU,QAAQ,OAAO;;;QAGnCC,qBAAAA,uBAAuB;;QAGvB,cACA,kBAAA,GAAG;;4BAEiB,QAAQ,OAAO;;+BAEZ,EAAE,YAAY;AAEjC,SAAO,MAAM,MAAM,SAAS,SAAS;GACrC;;;;;oBAKQ,QAAQ,cAAc;;;;;;;;;;;;;QAcnC;;EAEH;;;IAGAC,2BAAAA,YAAY,KAAK;;AAKrB,MAAM,kBAAkB,kBAAA,QAAO,GAAqB;;;;;;;;;cAStC,EAAE,gBAAiB,YAAY,MAAM,IAAK;;AAGxD,MAAM,SAAS,CAAA,GAAA,kBAAA,SAAOC,eAAAA,WAAW;eAClBC,4BAAAA,OAAO;;AAGtB,MAAa,iBAAiB,CAAA,GAAA,kBAAA,SAAO,MAAM,CAAC,OAAO,EAAE,iBAAmC,GACrF,gBAAgB,WAClB,EAAE;;;;;;gCAM6C;cAClC,EAAE,gBAAiB,YAAY,MAAM,IAAK;SAC/CT,uBAAAA,QAAQ,GAAG;;AAGpB,MAAM,sBAAsB,kBAAA,QAAO,GAAG;;;;AAKtC,MAAM,6BAA6B,kBAAA,QAAO,GAAG;;;;;;;;;AAU7C,MAAa,sBAAsB,CAAA,GAAA,kBAAA,SAAO,oBAAoB;;;;;AAM9D,MAAM,aAAa,kBAAA,QAAO,IAAuE;;;;;;;;;;;;kBAY/E,EAAE,YAAa,UAAU,SAAS,MAAM,UAAW;;YAEzD,EAAE,WAAY,SAAS,OAAO,QAAQ,QAAS;;;;iBAI1C,EAAE,YAAa,UAAU,SAAS,WAAW,iBAAkB;;;AA+FhF,MAAM,UAAA,GAAA,MAAA,YAAoD,SAAS,OACjE,EACE,IACA,UACA,YACA,YACA,UACA,WACA,OAAO,UACP,iBAAiB,SACjB,UAAU,WACV,OAAO,MACP,QAAQ,QACR,SACA,uBACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,aAAa,EAAE,QAAQ,aAAaU,kBAAAA,UAAU,MAAM;CAC3D,MAAM,gBAAA,GAAA,aAAA,YAAwC,QAAQ,GAAG,UAAU;CACnE,MAAM,UAAU,aAAa;CAE7B,MAAM,eAAA,GAAA,MAAA,aACJ,OAAO,MAAqC;AAC1C,MAAI,QACF;EAGF,MAAM,eAAe,aAAa,EAAE;AAEpC,MAAI,wBAAwB,SAAS;AACnC,WAAQ;AACR,SAAM;AACN,YAAS;;IAGb,CAAC,SAAS,aAAa,CACxB;AAED,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EACM;EACE;EACN,aAAW,aAAa;EACf;EACH;EACC;EACP,UAAU,YAAY;EACtB,YAAY;EACZ,wBAAwB;EACxB,GAAI;EACJ,SAAS;EACJ;YAZP,CAcG,WACC,iBAAA,GAAA,kBAAA,KAAC,iBAAD;GAAiB,WAAW;aAC1B,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAQ,cAAY,WAAW,MAAM,iBAAiB,MAAQ,CAAA;GAC9C,CAAA,EAEpB,iBAAA,GAAA,kBAAA,MAAC,gBAAD;GAAgB,WAAW;aAA3B;IACG,cAAc,QACb,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,mBAAmB,WAAW,iBAAA,GAAA,kBAAA,KAAC,qBAAD,EAAA,UAAsB,YAAiC,CAAA,EACrF,mBAAmB,aAClB,iBAAA,GAAA,kBAAA,KAAC,4BAAD,EAAA,UAA6B,YAAwC,CAAA,CAEtE,EAAA,CAAA;IAEJ,YACC,iBAAA,GAAA,kBAAA,KAAC,YAAD;KAAmB;KAAa;KAC7B;KACU,CAAA;IAEd,cAAc,QAAQ,iBAAA,GAAA,kBAAA,KAAC,qBAAD,EAAA,UAAsB,YAAiC,CAAA;IAC/D;KACJ;;EAEjB;;;AC/dF,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,gBAAgB;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAID,MAAM,UAAU,CAAA,GAAA,kBAAA,SAAO,OAAO,CAAC,MAAM;CACnC,OAAO;CACP,SAAS;CACV,CAAC;;;mBAGiBC,uBAAAA,aAAa,GAAG;;KAE9B,EAAE,WAAW,kBAAA,GAAG;cACP,gBAAgB,MAAqB;aACtC,gBAAgB,MAAqB;;;eAGnC,cAAc,MAAqB;gBAClC,cAAc,MAAqB;;IAE/C;;;;;AAiBJ,MAAM,cAAA,GAAA,MAAA,YAA4D,SAAS,WACzE,EAAE,OAAO,MAAM,GAAG,SAClB,KACA;AACA,QAAO,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAe;EAAkC;EAAK,GAAI;EAAS,CAAA;EAC1E"}

package/dist/IconButton.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as IconButtonProps, t as IconButton } from "./IconButton-DggxojBH.mjs";
+import { n as IconButtonProps, t as IconButton } from "./IconButton-BSES_-6g.mjs";
 export { IconButtonProps, IconButton as default };

package/dist/ImageTile.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { i as TextAction } from "./Action-uduFOh2m.cjs";
+import { i as TextAction } from "./Action-E90Wvqmc.cjs";
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";

package/dist/ImageTile.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { i as TextAction } from "./Action-DSg3yZck.mjs";
-import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { i as TextAction } from "./Action-CVtzREhU.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
 //#region components/ImageTile/ImageTile.d.ts
 interface ImageTileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {

package/dist/InlineCombobox.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as InlineEditConfig } from "./TableBoxCell-CEvOcGYa.mjs";
-import { RefObject } from "react";
+import { r as InlineEditConfig } from "./TableBoxCell-By1xE6_Q.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { RefObject } from "react";
 //#region components/TableBox/InlineCombobox.d.ts
 interface InlineComboboxProps {
@@ -28,6 +28,8 @@ interface InlineComboboxProps {
    * Reference to the table row element. Used for full-width combobox dropdowns.
    */
   rowRef?: RefObject<HTMLTableRowElement>;
+  /** Whether the closed display is preceded by an error icon. */
+  hasLeadingError?: boolean;
 }
 declare const InlineCombobox: ({
   itemId,
@@ -35,7 +37,8 @@ declare const InlineCombobox: ({
   columnKey,
   inlineEditConfig,
   children,
-  rowRef
+  rowRef,
+  hasLeadingError
 }: InlineComboboxProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { InlineCombobox as default };

package/dist/InlineInput.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as InlineEditConfig } from "./TableBoxCell-CEvOcGYa.mjs";
+import { r as InlineEditConfig } from "./TableBoxCell-By1xE6_Q.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/TableBox/InlineInput.d.ts
@@ -19,6 +19,8 @@ interface InlineInputProps {
    * The inline edit configuration for this cell
    */
   inlineEditConfig?: InlineEditConfig;
+  /** Notifies the cell that this inline editor committed or canceled. */
+  onEditingEnd?: () => void;
   /**
    * The content to display when not editing. If no children are passed, the value will be displayed.
    */
@@ -29,6 +31,7 @@ declare const InlineInput: ({
   value,
   columnKey,
   inlineEditConfig,
+  onEditingEnd,
   children
 }: InlineInputProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/{Input-Bl7633Ux.mjs → Input-BFI_e7aU.mjs} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { i as Paragraph } from "./Text-hEoPeOc9.mjs";
-import { n as Button } from "./IconButton-DC4rh6ow.mjs";
-import { n as useFormField, t as FormControlContext } from "./useFormField-D0RTrPld.mjs";
+import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
+import { n as Button } from "./IconButton-CIWiEsS-.mjs";
+import { n as useFormField, t as FormControlContext } from "./useFormField-DhYd6bNn.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
-import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
 import { CircleXInverseIcon } from "@persona/icons";
 import { CircleXInverseIcon as CircleXInverseIcon$1 } from "@persona/icons/12px";
 //#region components/Input/Input.tsx
@@ -187,4 +187,4 @@ const InputGroup = forwardRef(function InputGroup({ size = "md", leftIcon, onCle
 //#endregion
 export { Input as n, InputGroup as r, ClearButton as t };
-//# sourceMappingURL=Input-Bl7633Ux.mjs.map
+//# sourceMappingURL=Input-BFI_e7aU.mjs.map

package/dist/{Input-Bl7633Ux.mjs.map → Input-BFI_e7aU.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input-Bl7633Ux.mjs","names":["SmallCircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactElement,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n display: flex;\n position: relative;\n width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n left: ${Spacing[2]};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n color: ${Color.BorderIconSecondary};\n height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n pointer-events: none;\n\n svg {\n height: 100%;\n width: 100%;\n }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n display: flex;\n gap: ${Spacing[2]};\n right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n border-radius: ${BorderRadius.Md};\n color: ${Color.BorderIconSecondary};\n\n ${({ disabled }) =>\n disabled &&\n css`\n color: ${Color.BorderIconDisabled};\n `}\n\n &${isHovered}${isNotDisabled} {\n background-color: transparent;\n }\n\n svg {\n height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n position: absolute;\n right: ${Spacing[2]};\n top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n $leftIcon?: ReactNode;\n $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n /*\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n `size` HTML attr on `<input>`\n /\n inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n leftIcon?: StyledInputProps['$leftIcon'];\n hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n ${inputMixin};\n line-height: 1;\n\n &::placeholder {\n color: ${({ theme }) => theme.color.text.secondary};\n }\n\n ${({ $size, $leftIcon, $hasRightItem }) => {\n let btnSpacing: string;\n switch ($size) {\n default:\n case 'md':\n btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n `;\n case 'sm':\n btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n `;\n }\n }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n return (\n <InputBase\n $size={size}\n $leftIcon={leftIcon}\n $hasRightItem={hasRightItem}\n ref={ref}\n id={field.inputId}\n aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n aria-errormessage={field.hasError ? field.errorTextId : undefined}\n aria-invalid={field.hasError}\n hasWarning={field.hasWarning}\n hasError={field.hasError}\n disabled={field.disabled}\n maxLength={field.maxLength}\n {...props}\n size={props.inputSize}\n />\n );\n});\n\nexport interface InputGroupProps\n extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n /\n Input\n /\n children: ReactElement<InputProps>;\n\n /\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n Icon to render to the left of the input field.\n \n Import icon from `@persona-id/icons`. Use 24px for `lg` input size.\n /\n leftIcon?: ReactNode;\n\n /\n Renders clear button to the right and calls function upon click.\n /\n onClear?: MouseEventHandler<HTMLButtonElement>;\n\n /\n Button to be rendered to the right of the input\n /\n rightButton?: ReactElement<ButtonProps>;\n\n /\n Disabled prop will be passed down to `<Input>`\n /\n disabled?: boolean;\n\n /\n Suffix text to be shown to the right of the input (inside the input field)\n /\n suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n size = 'md',\n leftIcon,\n onClear,\n rightButton,\n children,\n disabled,\n hasWarning,\n hasError,\n suffix,\n ...props\n },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled });\n const inputButtonContainerRef = useRef<HTMLDivElement>();\n const [inputPaddingRight, setInputPaddingRight] = useState<string \| null>(null);\n\n const suffixContainerRef = useRef<HTMLDivElement \| null>(null);\n const [suffixPaddingRight, setSuffixPaddingRight] = useState<string \| null>(null);\n\n useEffect(() => {\n // We only need to calculate padding in presence of the right button\n if (rightButton && inputButtonContainerRef.current) {\n setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n }\n }, [setInputPaddingRight]);\n\n useEffect(() => {\n if (suffix && suffixContainerRef.current) {\n // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n }\n }, [suffix, setSuffixPaddingRight]);\n\n const rightButtonStyles: CSSProperties =\n size === 'sm'\n ? {\n height: '18px',\n }\n : {};\n\n return (\n <FormControlContext.Provider value={field}>\n <Container ref={ref} {...props}>\n {leftIcon && <LeftIcon $size={size}>{leftIcon}</LeftIcon>}\n {cloneElement(children, {\n size,\n leftIcon: leftIcon,\n ...(rightButton ? { rightButton } : {}),\n hasRightItem: onClear \|\| suffix,\n style:\n inputPaddingRight \|\| suffixPaddingRight\n ? {\n paddingRight: inputPaddingRight \|\| suffixPaddingRight,\n }\n : {},\n })}\n\n {/ Renders only if there's a suffix and NO button /}\n {/ At some point, this should be moved so that it's not absolutely positioned, and\n these are both wrapped within an \"input\" container /}\n {suffix && !(onClear \|\| rightButton) && (\n <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n <Paragraph size={size}>{suffix}</Paragraph>\n </SuffixTextContainer>\n )}\n\n {(onClear \|\| rightButton) && ( // TODO: Render only if value is present\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n {onClear && (\n <ClearButton\n onClick={onClear}\n disabled={field.disabled}\n aria-label='Clear'\n size={size}\n >\n {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n </ClearButton>\n )}\n {rightButton &&\n cloneElement(rightButton, {\n size: 'sm',\n width: rightButton.props.width \|\| 'auto',\n style: rightButtonStyles,\n })}\n </InputButtonContainer>\n )}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Input-BFI_e7aU.mjs","names":["SmallCircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactElement,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n display: flex;\n position: relative;\n width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n left: ${Spacing[2]};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n color: ${Color.BorderIconSecondary};\n height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n pointer-events: none;\n\n svg {\n height: 100%;\n width: 100%;\n }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n display: flex;\n gap: ${Spacing[2]};\n right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n border-radius: ${BorderRadius.Md};\n color: ${Color.BorderIconSecondary};\n\n ${({ disabled }) =>\n disabled &&\n css`\n color: ${Color.BorderIconDisabled};\n `}\n\n &${isHovered}${isNotDisabled} {\n background-color: transparent;\n }\n\n svg {\n height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n position: absolute;\n right: ${Spacing[2]};\n top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n $leftIcon?: ReactNode;\n $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n /*\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n `size` HTML attr on `<input>`\n /\n inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n leftIcon?: StyledInputProps['$leftIcon'];\n hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n ${inputMixin};\n line-height: 1;\n\n &::placeholder {\n color: ${({ theme }) => theme.color.text.secondary};\n }\n\n ${({ $size, $leftIcon, $hasRightItem }) => {\n let btnSpacing: string;\n switch ($size) {\n default:\n case 'md':\n btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n `;\n case 'sm':\n btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n `;\n }\n }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n return (\n <InputBase\n $size={size}\n $leftIcon={leftIcon}\n $hasRightItem={hasRightItem}\n ref={ref}\n id={field.inputId}\n aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n aria-errormessage={field.hasError ? field.errorTextId : undefined}\n aria-invalid={field.hasError}\n hasWarning={field.hasWarning}\n hasError={field.hasError}\n disabled={field.disabled}\n maxLength={field.maxLength}\n {...props}\n size={props.inputSize}\n />\n );\n});\n\nexport interface InputGroupProps\n extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n /\n Input\n /\n children: ReactElement<InputProps>;\n\n /\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n Icon to render to the left of the input field.\n \n Import icon from `@persona-id/icons`. Use 24px for `lg` input size.\n /\n leftIcon?: ReactNode;\n\n /\n Renders clear button to the right and calls function upon click.\n /\n onClear?: MouseEventHandler<HTMLButtonElement>;\n\n /\n Button to be rendered to the right of the input\n /\n rightButton?: ReactElement<ButtonProps>;\n\n /\n Disabled prop will be passed down to `<Input>`\n /\n disabled?: boolean;\n\n /\n Suffix text to be shown to the right of the input (inside the input field)\n /\n suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n size = 'md',\n leftIcon,\n onClear,\n rightButton,\n children,\n disabled,\n hasWarning,\n hasError,\n suffix,\n ...props\n },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled });\n const inputButtonContainerRef = useRef<HTMLDivElement>();\n const [inputPaddingRight, setInputPaddingRight] = useState<string \| null>(null);\n\n const suffixContainerRef = useRef<HTMLDivElement \| null>(null);\n const [suffixPaddingRight, setSuffixPaddingRight] = useState<string \| null>(null);\n\n useEffect(() => {\n // We only need to calculate padding in presence of the right button\n if (rightButton && inputButtonContainerRef.current) {\n setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n }\n }, [setInputPaddingRight]);\n\n useEffect(() => {\n if (suffix && suffixContainerRef.current) {\n // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n }\n }, [suffix, setSuffixPaddingRight]);\n\n const rightButtonStyles: CSSProperties =\n size === 'sm'\n ? {\n height: '18px',\n }\n : {};\n\n return (\n <FormControlContext.Provider value={field}>\n <Container ref={ref} {...props}>\n {leftIcon && <LeftIcon $size={size}>{leftIcon}</LeftIcon>}\n {cloneElement(children, {\n size,\n leftIcon: leftIcon,\n ...(rightButton ? { rightButton } : {}),\n hasRightItem: onClear \|\| suffix,\n style:\n inputPaddingRight \|\| suffixPaddingRight\n ? {\n paddingRight: inputPaddingRight \|\| suffixPaddingRight,\n }\n : {},\n })}\n\n {/ Renders only if there's a suffix and NO button /}\n {/ At some point, this should be moved so that it's not absolutely positioned, and\n these are both wrapped within an \"input\" container /}\n {suffix && !(onClear \|\| rightButton) && (\n <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n <Paragraph size={size}>{suffix}</Paragraph>\n </SuffixTextContainer>\n )}\n\n {(onClear \|\| rightButton) && ( // TODO: Render only if value is present\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n {onClear && (\n <ClearButton\n onClick={onClear}\n disabled={field.disabled}\n aria-label='Clear'\n size={size}\n >\n {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n </ClearButton>\n )}\n {rightButton &&\n cloneElement(rightButton, {\n size: 'sm',\n width: rightButton.props.width \|\| 'auto',\n style: rightButtonStyles,\n })}\n </InputButtonContainer>\n )}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}

package/dist/{Input-XppkvfUf.d.cts → Input-BM0DzWEf.d.cts} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
 import { r as ButtonProps } from "./Button-C_3p5Xfi.cjs";
-import { n as InputSizes, t as InputMixinProps } from "./input-Bm_anD8X.cjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-DPB0cX2m.cjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -62,4 +62,4 @@ interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, Omit<InputMix
 declare const InputGroup: _$react.ForwardRefExoticComponent<InputGroupProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { InputProps as a, InputGroupProps as i, Input as n, InputGroup as r, ClearButton as t };
-//# sourceMappingURL=Input-XppkvfUf.d.cts.map
+//# sourceMappingURL=Input-BM0DzWEf.d.cts.map

package/dist/{Input-DW7oacjc.d.mts → Input-BPClVzwD.d.mts} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { t as PseudoClassProps } from "./PseudoClassProps--MiDp2l2.mjs";
-import { r as ButtonProps } from "./Button-DcTUxRNI.mjs";
-import { n as InputSizes, t as InputMixinProps } from "./input-FEaQ66an.mjs";
+import { t as PseudoClassProps } from "./PseudoClassProps-DLxPxo7T.mjs";
+import { r as ButtonProps } from "./Button-9p469xA1.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-Bv5fKt5J.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode } from "react";
@@ -62,4 +62,4 @@ interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, Omit<InputMix
 declare const InputGroup: _$react.ForwardRefExoticComponent<InputGroupProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { InputProps as a, InputGroupProps as i, Input as n, InputGroup as r, ClearButton as t };
-//# sourceMappingURL=Input-DW7oacjc.d.mts.map
+//# sourceMappingURL=Input-BPClVzwD.d.mts.map