@hashicorp/mds-react 0.9.13 → 0.9.14

package/components/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/modal/index.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState, useCallback, useEffect } from 'react'\nimport FocusLock from 'react-focus-lock'\nimport { Dialog } from '../dialog-primitive'\nimport { ModalContext, useModal } from './use-modal'\nimport type { ReactNode } from 'react'\nimport type { ModalContextState } from './use-modal'\nimport s from './modal.module.css'\n\ninterface ModalProps {\n\tinitialIsOpen?: boolean\n\tinitialModalContent?: ReactNode\n\tonClose?: () => void\n\tchildren: ReactNode\n}\n\nconst ModalProvider = ({\n\tonClose,\n\tinitialIsOpen = false,\n\tinitialModalContent = null,\n\tchildren,\n}: ModalProps) => {\n\tconst [modalContent, setModalContent] = useState<ReactNode | null>(\n\t\tinitialModalContent\n\t)\n\tconst [isOpen, setIsOpen] = useState(initialIsOpen)\n\n\tconst closeModal = useCallback(() => {\n\t\tsetIsOpen(false)\n\t\tsetModalContent(null)\n\t\tif (onClose) {\n\t\t\tonClose()\n\t\t}\n\t}, [setIsOpen, onClose])\n\n\tconst openModal = useCallback(\n\t\t(content: ReactNode) => {\n\t\t\tsetModalContent(content)\n\t\t\tsetIsOpen(true)\n\t\t},\n\t\t[setIsOpen]\n\t)\n\n\tconst contextValue: ModalContextState = useMemo(\n\t\t() => ({\n\t\t\tisOpen,\n\t\t\topenModal,\n\t\t\tmodalContent,\n\t\t\tcloseModal,\n\t\t}),\n\t\t[isOpen, openModal, closeModal, modalContent]\n\t)\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === 'Escape' && isOpen) {\n\t\t\t\tcloseModal()\n\t\t\t}\n\t\t}\n\t\tif (isOpen) {\n\t\t\twindow.addEventListener('keydown', handleKeyDown)\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (isOpen) {\n\t\t\t\twindow.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t}\n\t}, [isOpen, closeModal])\n\n\treturn (\n\t\t<ModalContext.Provider value={contextValue}>\n\t\t\t{children}\n\t\t\t{isOpen && modalContent && (\n\t\t\t\t<>\n\t\t\t\t\t<FocusLock>\n\t\t\t\t\t\t<Dialog.Wrapper\n\t\t\t\t\t\t\tonDismiss={closeModal}\n\t\t\t\t\t\t\tclassName={s.modal}\n\t\t\t\t\t\t\topen={isOpen}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{modalContent}\n\t\t\t\t\t\t</Dialog.Wrapper>\n\t\t\t\t\t</FocusLock>\n\t\t\t\t\t<Dialog.Overlay />\n\t\t\t\t</>\n\t\t\t)}\n\t\t</ModalContext.Provider>\n\t)\n}\n\nModalProvider.displayName = 'ModalProvider'\n\nexport { useModal, ModalProvider }\n"],"names":["ModalProvider","onClose","initialIsOpen","initialModalContent","children","modalContent","setModalContent","useState","isOpen","setIsOpen","closeModal","useCallback","content","contextValue","useMemo","openModal","useEffect","handleKeyDown","event","jsxs","ModalContext","jsx","FocusLock","Dialog","s"],"mappings":";;;;;;;;AAiBuB,MACtBA,IAAA,CAAA;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,qBAAAC,IAAA;AAAA,EACD,UAAAC;AACC;AAAwC,QACvC,CAAAC,GAAAC,CAAA,IAAAC;AAAA,IACDJ;AAAA,EACA,GAEM,CAAAK,GAAAC,CAAa,IAAAF,EAAkBL,CAAA,GACpCQ,IAAeC,EAAA,MAAA;AACf,IAAAF,EAAA,EAAA,GACAH,EAAa,IAAA,QAEbL,EAAA;AAAA,EAGD,GAAA,CAAAQ,GAAMR,CAAY,CAAA,OACOU;AAAA,IACvB,CAAAC,MAAA;AACA,MAAAN,EAAcM,CAAA,GACfH,EAAA,EAAA;AAAA,IACA;AAAA,IACD,CAAAA,CAAA;AAAA,EAEA,GACCI,IAAOC;AAAA,IAAA,OACN;AAAA,MACA,QAAAN;AAAA,MACA,WAAAO;AAAA,MACA,cAAAV;AAAA,MACD,YAAAK;AAAA,IACA;AAAA,IACD,CAAAF,GAAAO,GAAAL,GAAAL,CAAA;AAAA,EAEA;AACC,SAAAW,EAAM,MAAA;AACL,UAAIC,IAAc,CAAAC;AACjB,gBAAW,YAAAV,KACZE,EAAA;AAAA,IAED;AACC,gBACD,OAAA,iBAAA,WAAAO,CAAA,SAGK;AACH,WACD,OAAA,oBAAA,WAAAA,CAAA;AAAA,IAEF;AAAA,EAEA,GAAA,CAAAT,GAAAE,CAAA,CACC,GACE,gBAAAS,EAAAC,EAAA,UAAA,EAAA,OAAAP,GAAA,UAAA;AAAA,IACAT;AAAA,IAECI,KAAAH,KACC,gBAAAc,iBAAA;AAAA,MAAQ,gBAAAE,EAAAC,GAAA,EAAA,UAAA,gBAAAD;AAAA,QAAPE,EAAA;AAAA,QAAA;AAAA,UAEA,WAAWb;AAAA,UACX,WAAMc,EAAA;AAAA,UAEL;UAAA,UAAAnB;AAAA;MAEH,EAAA,CAAA;AAAA,MAED,gBAAAgB,EAAAE,EAAA,SAAA,CAAA,CAAA;AAAA,MAEF,CAAA;AAAA,EAEF,EAAA,CAAA;AAEA;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/modal/index.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, useState, useCallback, useEffect } from 'react'\nimport FocusLock from 'react-focus-lock'\nimport { Dialog } from '../dialog-primitive'\nimport { ModalContext, useModal } from './use-modal'\nimport type { ReactNode } from 'react'\nimport type { ModalContextState } from './use-modal'\nimport s from './modal.module.css'\n\ninterface ModalProps {\n\tinitialIsOpen?: boolean\n\tinitialModalContent?: ReactNode\n\tonClose?: () => void\n\tchildren: ReactNode\n}\n\nconst ModalProvider = ({\n\tonClose,\n\tinitialIsOpen = false,\n\tinitialModalContent = null,\n\tchildren,\n}: ModalProps) => {\n\tconst [modalContent, setModalContent] = useState<ReactNode | null>(\n\t\tinitialModalContent,\n\t)\n\tconst [isOpen, setIsOpen] = useState(initialIsOpen)\n\n\tconst closeModal = useCallback(() => {\n\t\tsetIsOpen(false)\n\t\tsetModalContent(null)\n\t\tif (onClose) {\n\t\t\tonClose()\n\t\t}\n\t}, [setIsOpen, onClose])\n\n\tconst openModal = useCallback(\n\t\t(content: ReactNode) => {\n\t\t\tsetModalContent(content)\n\t\t\tsetIsOpen(true)\n\t\t},\n\t\t[setIsOpen],\n\t)\n\n\tconst contextValue: ModalContextState = useMemo(\n\t\t() => ({\n\t\t\tisOpen,\n\t\t\topenModal,\n\t\t\tmodalContent,\n\t\t\tcloseModal,\n\t\t}),\n\t\t[isOpen, openModal, closeModal, modalContent],\n\t)\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === 'Escape' && isOpen) {\n\t\t\t\tcloseModal()\n\t\t\t}\n\t\t}\n\t\tif (isOpen) {\n\t\t\twindow.addEventListener('keydown', handleKeyDown)\n\t\t}\n\n\t\treturn () => {\n\t\t\tif (isOpen) {\n\t\t\t\twindow.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t}\n\t}, [isOpen, closeModal])\n\n\treturn (\n\t\t<ModalContext.Provider value={contextValue}>\n\t\t\t{children}\n\t\t\t{isOpen && modalContent && (\n\t\t\t\t<>\n\t\t\t\t\t<FocusLock>\n\t\t\t\t\t\t<Dialog.Wrapper\n\t\t\t\t\t\t\tonDismiss={closeModal}\n\t\t\t\t\t\t\tclassName={s.modal}\n\t\t\t\t\t\t\topen={isOpen}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{modalContent}\n\t\t\t\t\t\t</Dialog.Wrapper>\n\t\t\t\t\t</FocusLock>\n\t\t\t\t\t<Dialog.Overlay />\n\t\t\t\t</>\n\t\t\t)}\n\t\t</ModalContext.Provider>\n\t)\n}\n\nModalProvider.displayName = 'ModalProvider'\n\nexport { useModal, ModalProvider }\n"],"names":["ModalProvider","onClose","initialIsOpen","initialModalContent","children","modalContent","setModalContent","useState","isOpen","setIsOpen","closeModal","useCallback","content","contextValue","useMemo","openModal","useEffect","handleKeyDown","event","jsxs","ModalContext","jsx","FocusLock","Dialog","s"],"mappings":";;;;;;;;AAiBuB,MACtBA,IAAA,CAAA;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAA;AAAA,EACA,qBAAAC,IAAA;AAAA,EACD,UAAAC;AACC;AAAwC,QACvC,CAAAC,GAAAC,CAAA,IAAAC;AAAA,IACDJ;AAAA,EACA,GAEM,CAAAK,GAAAC,CAAa,IAAAF,EAAkBL,CAAA,GACpCQ,IAAeC,EAAA,MAAA;AACf,IAAAF,EAAA,EAAA,GACAH,EAAa,IAAA,QAEbL,EAAA;AAAA,EAGD,GAAA,CAAAQ,GAAMR,CAAY,CAAA,OACOU;AAAA,IACvB,CAAAC,MAAA;AACA,MAAAN,EAAcM,CAAA,GACfH,EAAA,EAAA;AAAA,IACA;AAAA,IACD,CAAAA,CAAA;AAAA,EAEA,GACCI,IAAOC;AAAA,IAAA,OACN;AAAA,MACA,QAAAN;AAAA,MACA,WAAAO;AAAA,MACA,cAAAV;AAAA,MACD,YAAAK;AAAA,IACA;AAAA,IACD,CAAAF,GAAAO,GAAAL,GAAAL,CAAA;AAAA,EAEA;AACC,SAAAW,EAAM,MAAA;AACL,UAAIC,IAAc,CAAAC;AACjB,gBAAW,YAAAV,KACZE,EAAA;AAAA,IAED;AACC,gBACD,OAAA,iBAAA,WAAAO,CAAA,SAGK;AACH,WACD,OAAA,oBAAA,WAAAA,CAAA;AAAA,IAEF;AAAA,EAEA,GAAA,CAAAT,GAAAE,CAAA,CACC,GACE,gBAAAS,EAAAC,EAAA,UAAA,EAAA,OAAAP,GAAA,UAAA;AAAA,IACAT;AAAA,IAECI,KAAAH,KACC,gBAAAc,iBAAA;AAAA,MAAQ,gBAAAE,EAAAC,GAAA,EAAA,UAAA,gBAAAD;AAAA,QAAPE,EAAA;AAAA,QAAA;AAAA,UAEA,WAAWb;AAAA,UACX,WAAMc,EAAA;AAAA,UAEL;UAAA,UAAAnB;AAAA;MAEH,EAAA,CAAA;AAAA,MAED,gBAAAgB,EAAAE,EAAA,SAAA,CAAA,CAAA;AAAA,MAEF,CAAA;AAAA,EAEF,EAAA,CAAA;AAEA;;"}

package/components/modal/use-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal.js","sources":["../../../src/components/modal/use-modal.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nexport interface ModalContextState {\n\tisOpen: boolean\n\topenModal: (content: ReactNode) => void\n\tcloseModal: () => void\n}\n\nexport const ModalContext = createContext<ModalContextState | undefined>(\n\tundefined\n)\nModalContext.displayName = 'ModalContext'\n\nexport function useModal(): ModalContextState {\n\tconst context = useContext(ModalContext)\n\tif (context === undefined) {\n\t\tthrow new Error('useModal must be used within a ModalContext.Provider')\n\t}\n\treturn context\n}\n"],"names":["ModalContext","createContext","useModal","context","useContext"],"mappings":";;AAW4B,MAC3BA,IAAAC;AAAA,EACD;AACA;AAEOD,gBAAuC;AAC7C,SAAME,IAAU;AAChB,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AACX,UAAA,IAAA,MAAA,sDAAA;AAED,SAAAA;;"}
+{"version":3,"file":"use-modal.js","sources":["../../../src/components/modal/use-modal.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nexport interface ModalContextState {\n\tisOpen: boolean\n\topenModal: (content: ReactNode) => void\n\tcloseModal: () => void\n}\n\nexport const ModalContext = createContext<ModalContextState | undefined>(\n\tundefined,\n)\nModalContext.displayName = 'ModalContext'\n\nexport function useModal(): ModalContextState {\n\tconst context = useContext(ModalContext)\n\tif (context === undefined) {\n\t\tthrow new Error('useModal must be used within a ModalContext.Provider')\n\t}\n\treturn context\n}\n"],"names":["ModalContext","createContext","useModal","context","useContext"],"mappings":";;AAW4B,MAC3BA,IAAAC;AAAA,EACD;AACA;AAEOD,gBAAuC;AAC7C,SAAME,IAAU;AAChB,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AACX,UAAA,IAAA,MAAA,sDAAA;AAED,SAAAA;;"}

package/components/skeleton/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const SKELETON_COLOR: readonly ["faint", "strong"];
+export type SkeletonColor = (typeof SKELETON_COLOR)[number];
+export interface SkeletonProps extends React.PropsWithChildren {
+    animate?: boolean;
+    border?: boolean;
+    className?: string;
+    color?: SkeletonColor;
+    style?: React.CSSProperties;
+}
+export declare const Skeleton: {
+    ({ animate, border, children, className, color, style, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/components/skeleton/index.js

@@ -0,0 +1,30 @@
+import { jsx as i } from "react/jsx-runtime";
+import e from "./skeleton.module.css.js";
+import n from "classnames";
+const l = ({
+  animate: r = !0,
+  border: t = !0,
+  children: o,
+  className: s,
+  color: a = "strong",
+  style: m
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: n(
+      e.skeleton,
+      e[a],
+      t && e.border,
+      r && e.animate,
+      s
+    ),
+    style: m,
+    "aria-hidden": "true",
+    children: o
+  }
+);
+l.displayName = "Skeleton";
+export {
+  l as Skeleton
+};
+//# sourceMappingURL=index.js.map

package/components/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/skeleton/index.tsx"],"sourcesContent":["import s from './skeleton.module.css'\nimport classNames from 'classnames'\n\nexport const SKELETON_COLOR = ['faint', 'strong'] as const\nexport type SkeletonColor = (typeof SKELETON_COLOR)[number]\n\nexport interface SkeletonProps extends React.PropsWithChildren {\n\tanimate?: boolean\n\tborder?: boolean\n\tclassName?: string\n\tcolor?: SkeletonColor\n\tstyle?: React.CSSProperties\n}\n\nexport const Skeleton = ({\n\tanimate = true,\n\tborder = true,\n\tchildren,\n\tclassName,\n\tcolor = 'strong',\n\tstyle,\n}: SkeletonProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\ts.skeleton,\n\t\t\t\ts[color],\n\t\t\t\tborder && s.border,\n\t\t\t\tanimate && s.animate,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={style}\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nSkeleton.displayName = 'Skeleton'\n"],"names":["Skeleton","animate","border","children","className","color","style","jsx","classNames","s"],"mappings":";;;AAcO,MAAMA,IAAW,CAAC;AAAA,EACxB,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,OAAAC;AACD,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEJ,CAAK;AAAA,MACPH,KAAUO,EAAE;AAAA,MACZR,KAAWQ,EAAE;AAAA,MACbL;AAAA,IAAA;AAAA,IAED,OAAAE;AAAA,IACA,eAAY;AAAA,IAEX,UAAAH;AAAA,EAAA;AAAA;AAKJH,EAAS,cAAc;"}

package/components/skeleton/skeleton-form/index.d.ts

@@ -0,0 +1,7 @@
+export interface SkeletonFormProps {
+    showHeading?: boolean;
+}
+export declare const SkeletonForm: {
+    ({ showHeading }: SkeletonFormProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/components/skeleton/skeleton-form/index.js

@@ -0,0 +1,19 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import l from "classnames";
+import { Skeleton as e } from "../index.js";
+import a from "./skeleton-form.module.css.js";
+const i = ({ showHeading: m }) => /* @__PURE__ */ t(e, { className: a["skeleton-form"], animate: !1, color: "faint", children: [
+  m ? /* @__PURE__ */ s("div", { className: a["span-all"], children: /* @__PURE__ */ s(e, { className: l(a.item, a["max-width"]) }) }) : null,
+  /* @__PURE__ */ s(e, { className: l(a.item, a["span-all"]) }),
+  /* @__PURE__ */ s(e, { className: a.item }),
+  /* @__PURE__ */ s(e, { className: a.item }),
+  /* @__PURE__ */ s(e, { className: l(a.item, a["span-all"]) }),
+  /* @__PURE__ */ s(e, { className: l(a.item, a["span-all"]) }),
+  /* @__PURE__ */ s(e, { className: l(a.item, a["span-all"]) }),
+  /* @__PURE__ */ s("div", { className: a["span-all"], children: /* @__PURE__ */ s(e, { className: l(a.item, a["max-width"]) }) })
+] });
+i.displayName = "Skeleton";
+export {
+  i as SkeletonForm
+};
+//# sourceMappingURL=index.js.map

package/components/skeleton/skeleton-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/skeleton/skeleton-form/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Skeleton } from '..'\nimport style from './skeleton-form.module.css'\n\nexport interface SkeletonFormProps {\n\tshowHeading?: boolean\n}\n\nexport const SkeletonForm = ({ showHeading }: SkeletonFormProps) => {\n\treturn (\n\t\t<Skeleton className={style['skeleton-form']} animate={false} color=\"faint\">\n\t\t\t{showHeading ? (\n\t\t\t\t<div className={style['span-all']}>\n\t\t\t\t\t<Skeleton className={classNames(style.item, style['max-width'])} />\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<Skeleton className={classNames(style.item, style['span-all'])} />\n\t\t\t<Skeleton className={style.item} />\n\t\t\t<Skeleton className={style.item} />\n\t\t\t<Skeleton className={classNames(style.item, style['span-all'])} />\n\t\t\t<Skeleton className={classNames(style.item, style['span-all'])} />\n\t\t\t<Skeleton className={classNames(style.item, style['span-all'])} />\n\t\t\t<div className={style['span-all']}>\n\t\t\t\t<Skeleton className={classNames(style.item, style['max-width'])} />\n\t\t\t</div>\n\t\t</Skeleton>\n\t)\n}\n\nSkeletonForm.displayName = 'Skeleton'\n"],"names":["SkeletonForm","showHeading","jsxs","Skeleton","style","jsx","classNames"],"mappings":";;;;AAQO,MAAMA,IAAe,CAAC,EAAE,aAAAC,QAE7B,gBAAAC,EAACC,KAAS,WAAWC,EAAM,eAAe,GAAG,SAAS,IAAO,OAAM,SACjE,UAAA;AAAA,EAAAH,sBACC,OAAA,EAAI,WAAWG,EAAM,UAAU,GAC/B,UAAA,gBAAAC,EAACF,GAAA,EAAS,WAAWG,EAAWF,EAAM,MAAMA,EAAM,WAAW,CAAC,EAAA,CAAG,GAClE,IACG;AAAA,EACJ,gBAAAC,EAACF,KAAS,WAAWG,EAAWF,EAAM,MAAMA,EAAM,UAAU,CAAC,GAAG;AAAA,EAChE,gBAAAC,EAACF,GAAA,EAAS,WAAWC,EAAM,KAAA,CAAM;AAAA,EACjC,gBAAAC,EAACF,GAAA,EAAS,WAAWC,EAAM,KAAA,CAAM;AAAA,EACjC,gBAAAC,EAACF,KAAS,WAAWG,EAAWF,EAAM,MAAMA,EAAM,UAAU,CAAC,GAAG;AAAA,EAChE,gBAAAC,EAACF,KAAS,WAAWG,EAAWF,EAAM,MAAMA,EAAM,UAAU,CAAC,GAAG;AAAA,EAChE,gBAAAC,EAACF,KAAS,WAAWG,EAAWF,EAAM,MAAMA,EAAM,UAAU,CAAC,GAAG;AAAA,oBAC/D,OAAA,EAAI,WAAWA,EAAM,UAAU,GAC/B,UAAA,gBAAAC,EAACF,GAAA,EAAS,WAAWG,EAAWF,EAAM,MAAMA,EAAM,WAAW,CAAC,GAAG,EAAA,CAClE;AAAA,GACD;AAIFJ,EAAa,cAAc;"}

package/components/skeleton/skeleton-form/skeleton-form.module.css

@@ -0,0 +1,32 @@
+.skeleton-form {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	padding: var(--mds-spacing-08);
+	gap: var(--mds-spacing-08) var(--mds-spacing-05);
+
+	@media (--medium) {
+		padding: var(--mds-spacing-09);
+		gap: var(--mds-spacing-09) var(--mds-spacing-06);
+	}
+
+	@media (--large) {
+		padding: var(--mds-spacing-10);
+		gap: var(--mds-spacing-10) var(--mds-spacing-07);
+	}
+}
+
+.item {
+	height: 48px;
+}
+
+.span-all {
+	grid-column: 1 / -1;
+}
+
+.max-width {
+	max-width: 75%;
+
+	@media (--medium) {
+		max-width: 565px;
+	}
+}

package/components/skeleton/skeleton-form/skeleton-form.module.css.js

@@ -0,0 +1,11 @@
+const t = "item__lK3rt", e = {
+  "skeleton-form": "skeleton-form__6qi4Q",
+  item: t,
+  "span-all": "span-all__UHTwV",
+  "max-width": "max-width__BwZzr"
+};
+export {
+  e as default,
+  t as item
+};
+//# sourceMappingURL=skeleton-form.module.css.js.map

package/components/skeleton/skeleton-form/skeleton-form.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-form.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/skeleton/skeleton.module.css

@@ -0,0 +1,87 @@
+.skeleton {
+	/* defaults */
+	--pulse-opacity: 0.5;
+	--wipe-angle: 90deg;
+	--wipe-size: 340%;
+	--wipe-band: 5%;
+	--wipe-soft: 25%;
+	--wipe-duration: 2.6s;
+
+	position: relative;
+	border-radius: 5px;
+}
+
+.border {
+	border: 1px solid var(--mds-color-border-primary);
+}
+
+/* The “surface fill” layer */
+.skeleton::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+}
+
+.faint::before {
+	background: var(--mds-color-surface-faint);
+}
+
+.strong::before {
+	background: var(--mds-color-surface-strong);
+}
+
+:global(.mds-dark-mode) .skeleton {
+	--pulse-opacity: 0.7;
+}
+
+:global(.mds-light-mode) .skeleton {
+	--pulse-opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	/* Wipe variant overlay */
+	.animate::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: var(--mds-color-palette-neutral-200);
+		opacity: 0.6;
+		-webkit-mask-image: linear-gradient(var(--wipe-angle), transparent calc(50% - var(--wipe-band) - var(--wipe-soft)), rgba(0, 0, 0, 1) calc(50% - var(--wipe-band)), rgba(0, 0, 0, 1) calc(50% + var(--wipe-band)), transparent calc(50% + var(--wipe-band) + var(--wipe-soft)));
+		mask-image: linear-gradient(var(--wipe-angle), transparent calc(50% - var(--wipe-band) - var(--wipe-soft)), rgba(0, 0, 0, 1) calc(50% - var(--wipe-band)), rgba(0, 0, 0, 1) calc(50% + var(--wipe-band)), transparent calc(50% + var(--wipe-band) + var(--wipe-soft)));
+		-webkit-mask-size: var(--wipe-size) var(--wipe-size);
+		mask-size: var(--wipe-size) var(--wipe-size);
+		-webkit-mask-repeat: no-repeat;
+		mask-repeat: no-repeat;
+		animation: skeleton-wipe var(--wipe-duration) linear infinite;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	/* Pulse variant */
+	.animate {
+		animation: pulse 2.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+}
+
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: var(--pulse-opacity);
+	}
+}
+
+@keyframes skeleton-wipe {
+	0% {
+		-webkit-mask-position: 120% 0%;
+		mask-position: 120% 0%;
+	}
+	100% {
+		-webkit-mask-position: -120% 0%;
+		mask-position: -120% 0%;
+	}
+}

package/components/skeleton/skeleton.module.css.js

@@ -0,0 +1,19 @@
+const e = "skeleton__fula5", t = "border__NB2r5", n = "faint__UPSew", s = "strong__QSJRI", o = "animate__NIadM", a = "pulse__YLysm", _ = {
+  skeleton: e,
+  border: t,
+  faint: n,
+  strong: s,
+  animate: o,
+  "skeleton-wipe": "skeleton-wipe__cblaB",
+  pulse: a
+};
+export {
+  o as animate,
+  t as border,
+  _ as default,
+  n as faint,
+  a as pulse,
+  e as skeleton,
+  s as strong
+};
+//# sourceMappingURL=skeleton.module.css.js.map

package/components/skeleton/skeleton.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/components/standalone-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/standalone-link/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport classNames from 'classnames'\nimport type { InteractiveProps } from '../interactive'\nimport { Interactive } from '../interactive'\nimport { FlightIcon } from '../flight-icon'\nimport s from './styles.module.scss'\n\nconst STANDALONE_LINK_SIZES = ['small', 'medium', 'large'] as const\ntype StandaloneLinkSize = (typeof STANDALONE_LINK_SIZES)[number]\n\nconst STANDALONE_LINK_COLORS = [\n\t'primary',\n\t'secondary',\n\t'secondary-inverted',\n] as const\ntype StandaloneLinkColor = (typeof STANDALONE_LINK_COLORS)[number]\n\nconst STANDALONE_LINK_ICON_POSITIONS = ['leading', 'trailing'] as const\ntype StandaloneLinkIconPosition =\n\t(typeof STANDALONE_LINK_ICON_POSITIONS)[number]\n\ninterface StandaloneLinkProps extends Omit<InteractiveProps, 'color' | 'size'> {\n\ttext: string\n\tsize?: StandaloneLinkSize\n\tcolor?: StandaloneLinkColor\n\ticon?: string\n\ticonPosition?: StandaloneLinkIconPosition\n\thref?: string\n\tlocale?: string\n\tisHrefExternal?: boolean\n\tonClick?: () => void\n\tclassName?: string\n\t'data-testid'?: string\n}\n\nconst StandaloneLink = forwardRef<\n\tHTMLAnchorElement | HTMLButtonElement,\n\tStandaloneLinkProps\n>(\n\t(\n\t\t{\n\t\t\ttext,\n\t\t\tsize = 'medium',\n\t\t\tcolor = 'primary',\n\t\t\ticon,\n\t\t\ticonPosition = 'leading',\n\t\t\tclassName,\n\t\t\t'data-testid': dataTestId,\n\t\t\tlocale,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst iconElement = icon && <FlightIcon name={icon} size={16} />\n\n\t\treturn (\n\t\t\t<Interactive\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['standalone-link'],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${color}`],\n\t\t\t\t\ts[`icon-position-${iconPosition}`],\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tlocale={locale}\n\t\t\t>\n\t\t\t\t{iconElement && iconPosition === 'leading' && iconElement}\n\t\t\t\t<span className={s.text}>{text}</span>\n\t\t\t\t{iconElement && iconPosition === 'trailing' && iconElement}\n\t\t\t</Interactive>\n\t\t)\n\t}\n)\n\nStandaloneLink.displayName = 'StandaloneLink'\n\nexport type {\n\tStandaloneLinkSize,\n\tStandaloneLinkColor,\n\tStandaloneLinkIconPosition,\n\tStandaloneLinkProps,\n}\nexport {\n\tSTANDALONE_LINK_SIZES,\n\tSTANDALONE_LINK_COLORS,\n\tSTANDALONE_LINK_ICON_POSITIONS,\n\tStandaloneLink,\n}\n"],"names":["STANDALONE_LINK_SIZES","STANDALONE_LINK_COLORS","STANDALONE_LINK_ICON_POSITIONS","StandaloneLink","forwardRef","text","size","color","icon","iconPosition","className","dataTestId","locale","props","ref","iconElement","jsx","FlightIcon","jsxs","Interactive","classNames","s"],"mappings":";;;;;;AAOA,MAAMA,IAAwB,CAAC,SAAS,UAAU,OAAO,GAGnDC,IAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,GAGMC,IAAiC,CAAC,WAAW,UAAU,GAkBvDC,IAAiBC;AAAA,EAItB,CACC;AAAA,IACC,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC;AAAA,IACA,eAAeC;AAAA,IACf,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAcP,KAAQ,gBAAAQ,EAACC,KAAW,MAAMT,GAAM,MAAM,IAAI;AAE9D,WACC,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,GAAGN;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWM;AAAA,UACVC,EAAE,iBAAiB;AAAA,UACnBA,EAAE,QAAQf,CAAI,EAAE;AAAA,UAChBe,EAAE,SAASd,CAAK,EAAE;AAAA,UAClBc,EAAE,iBAAiBZ,CAAY,EAAE;AAAA,UACjCC;AAAA,QAAA;AAAA,QAED,eAAaC;AAAA,QACb,QAAAC;AAAA,QAEC,UAAA;AAAA,UAAAG,KAAeN,MAAiB,aAAaM;AAAA,UAC9C,gBAAAC,EAAC,QAAA,EAAK,WAAWK,EAAE,MAAO,UAAAhB,GAAK;AAAA,UAC9BU,KAAeN,MAAiB,cAAcM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlD;AACD;AAEAZ,EAAe,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/standalone-link/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport classNames from 'classnames'\nimport type { InteractiveProps } from '../interactive'\nimport { Interactive } from '../interactive'\nimport { FlightIcon } from '../flight-icon'\nimport s from './styles.module.scss'\n\nconst STANDALONE_LINK_SIZES = ['small', 'medium', 'large'] as const\ntype StandaloneLinkSize = (typeof STANDALONE_LINK_SIZES)[number]\n\nconst STANDALONE_LINK_COLORS = [\n\t'primary',\n\t'secondary',\n\t'secondary-inverted',\n] as const\ntype StandaloneLinkColor = (typeof STANDALONE_LINK_COLORS)[number]\n\nconst STANDALONE_LINK_ICON_POSITIONS = ['leading', 'trailing'] as const\ntype StandaloneLinkIconPosition =\n\t(typeof STANDALONE_LINK_ICON_POSITIONS)[number]\n\ninterface StandaloneLinkProps extends Omit<InteractiveProps, 'color' | 'size'> {\n\ttext: string\n\tsize?: StandaloneLinkSize\n\tcolor?: StandaloneLinkColor\n\ticon?: string\n\ticonPosition?: StandaloneLinkIconPosition\n\thref?: string\n\tlocale?: string\n\tisHrefExternal?: boolean\n\tonClick?: () => void\n\tclassName?: string\n\t'data-testid'?: string\n}\n\nconst StandaloneLink = forwardRef<\n\tHTMLAnchorElement | HTMLButtonElement,\n\tStandaloneLinkProps\n>(\n\t(\n\t\t{\n\t\t\ttext,\n\t\t\tsize = 'medium',\n\t\t\tcolor = 'primary',\n\t\t\ticon,\n\t\t\ticonPosition = 'leading',\n\t\t\tclassName,\n\t\t\t'data-testid': dataTestId,\n\t\t\tlocale,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst iconElement = icon && <FlightIcon name={icon} size={16} />\n\n\t\treturn (\n\t\t\t<Interactive\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['standalone-link'],\n\t\t\t\t\ts[`size-${size}`],\n\t\t\t\t\ts[`color-${color}`],\n\t\t\t\t\ts[`icon-position-${iconPosition}`],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tlocale={locale}\n\t\t\t>\n\t\t\t\t{iconElement && iconPosition === 'leading' && iconElement}\n\t\t\t\t<span className={s.text}>{text}</span>\n\t\t\t\t{iconElement && iconPosition === 'trailing' && iconElement}\n\t\t\t</Interactive>\n\t\t)\n\t},\n)\n\nStandaloneLink.displayName = 'StandaloneLink'\n\nexport type {\n\tStandaloneLinkSize,\n\tStandaloneLinkColor,\n\tStandaloneLinkIconPosition,\n\tStandaloneLinkProps,\n}\nexport {\n\tSTANDALONE_LINK_SIZES,\n\tSTANDALONE_LINK_COLORS,\n\tSTANDALONE_LINK_ICON_POSITIONS,\n\tStandaloneLink,\n}\n"],"names":["STANDALONE_LINK_SIZES","STANDALONE_LINK_COLORS","STANDALONE_LINK_ICON_POSITIONS","StandaloneLink","forwardRef","text","size","color","icon","iconPosition","className","dataTestId","locale","props","ref","iconElement","jsx","FlightIcon","jsxs","Interactive","classNames","s"],"mappings":";;;;;;AAOA,MAAMA,IAAwB,CAAC,SAAS,UAAU,OAAO,GAGnDC,IAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,GAGMC,IAAiC,CAAC,WAAW,UAAU,GAkBvDC,IAAiBC;AAAA,EAItB,CACC;AAAA,IACC,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC;AAAA,IACA,eAAeC;AAAA,IACf,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAcP,KAAQ,gBAAAQ,EAACC,KAAW,MAAMT,GAAM,MAAM,IAAI;AAE9D,WACC,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,GAAGN;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWM;AAAA,UACVC,EAAE,iBAAiB;AAAA,UACnBA,EAAE,QAAQf,CAAI,EAAE;AAAA,UAChBe,EAAE,SAASd,CAAK,EAAE;AAAA,UAClBc,EAAE,iBAAiBZ,CAAY,EAAE;AAAA,UACjCC;AAAA,QAAA;AAAA,QAED,eAAaC;AAAA,QACb,QAAAC;AAAA,QAEC,UAAA;AAAA,UAAAG,KAAeN,MAAiB,aAAaM;AAAA,UAC9C,gBAAAC,EAAC,QAAA,EAAK,WAAWK,EAAE,MAAO,UAAAhB,GAAK;AAAA,UAC9BU,KAAeN,MAAiB,cAAcM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlD;AACD;AAEAZ,EAAe,cAAc;"}

package/components/standalone-link/styles.module.scss

@@ -30,11 +30,7 @@ $standalone-link-focus-shift: 4px;
 	$shift-extra: $shift + 2px;
 
 	// notice: this is used not only for the focus, but also to increase the clickable area
-	@include hds-focus-ring-with-pseudo-element(
-		$right: -$shift,
-		$left: -$shift,
-		$radius: $standalone-link-focus-border-radius
-	);
+	@include hds-focus-ring-with-pseudo-element($right: -$shift, $left: -$shift, $radius: $standalone-link-focus-border-radius);
 
 	// we need to override a couple of values for better visual alignment
 	&.icon-position-leading::before {
@@ -54,7 +50,9 @@ $standalone-link-focus-shift: 4px;
 	flex: 1 0 0;
 	text-decoration: underline;
 	text-decoration-color: transparent;
-	transition: text-decoration-color 0.15s ease-in, color 0.15s ease-in;
+	transition:
+		text-decoration-color 0.15s ease-in,
+		color 0.15s ease-in;
 }
 
 .size-small {

package/components/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { TD } from './td'\nimport { TH } from './th'\nimport { TR } from './tr'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport {\n\tDEFAULT_DENSITY,\n\tDEFAULT_VERTICAL_ALIGNMENT,\n\ttype Density,\n\ttype VerticalAlignment,\n} from './utils'\nimport s from './table.module.scss'\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n\t/**\n\t * Define on the table invocation. If set to `true`, even-numbered rows will have a different background color from odd-numbered rows.\n\t */\n\tisStriped?: boolean\n\t/**\n\t * If set to `true`, the `table-display`(CSS) property will be set to fixed. See [MDN reference on table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) for more details.\n\t */\n\tisFixedLayout?: boolean\n\t/**\n\t * If set, determines the density (height) of the table body’s rows.\n\t */\n\tdensity?: Density\n\t/**\n\t * Determines the vertical alignment for content in a table. Does not apply to table headers (`th`). See [MDN reference on vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) for more details.\n\t */\n\tvalign?: VerticalAlignment\n\t/**\n\t * Adds a (non-visible) caption for users with assistive technology. If set on a sortable table, the provided table caption is paired with the automatically generated sorted message text.\n\t */\n\tcaption?: string\n}\n\nfunction Root({\n\tcaption,\n\tdensity = DEFAULT_DENSITY,\n\tvalign = DEFAULT_VERTICAL_ALIGNMENT,\n\tisStriped,\n\tisFixedLayout,\n\tchildren,\n\tclassName,\n\t...rest\n}: TableProps) {\n\treturn (\n\t\t<table\n\t\t\tclassName={classNames(\n\t\t\t\ts.table,\n\t\t\t\ts[`density-${density}`],\n\t\t\t\ts[`valign-${valign}`],\n\t\t\t\t{\n\t\t\t\t\t[s.striped]: isStriped,\n\t\t\t\t\t[s['layout-fixed']]: isFixedLayout,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{caption && <caption className=\"sr-only\">{caption}</caption>}\n\t\t\t{children}\n\t\t</table>\n\t)\n}\nRoot.displayName = 'Table'\n\nfunction THead({ children }: { children: ReactNode }) {\n\treturn <thead className={s.thead}>{children}</thead>\n}\nTHead.displayName = 'T.Head'\n\nfunction TBody({ children }: { children: ReactNode }) {\n\treturn <tbody className={s.tbody}>{children}</tbody>\n}\nTBody.displayName = 'T.Body'\n\nconst Table = { Root, TR, THead, TH, TBody, TD }\n\nexport { Table }\n"],"names":["Root","caption","density","DEFAULT_DENSITY","valign","DEFAULT_VERTICAL_ALIGNMENT","isStriped","isFixedLayout","children","className","rest","jsxs","classNames","s","jsx","THead","TBody","Table","TR","TH","TD"],"mappings":";;;;;;;AAoCA,SAASA,EAAK;AAAA,EACb,SAAAC;AAAA,EACA,SAAAC,IAAUC;AAAA,EACV,QAAAC,IAASC;AAAA,EACT,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,GAAe;AACd,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACVC,EAAE;AAAA,QACFA,EAAE,WAAWX,CAAO,EAAE;AAAA,QACtBW,EAAE,UAAUT,CAAM,EAAE;AAAA,QACpB;AAAA,UACC,CAACS,EAAE,OAAO,GAAGP;AAAA,UACb,CAACO,EAAE,cAAc,CAAC,GAAGN;AAAA,QAAA;AAAA,QAEtBE;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAT,KAAW,gBAAAa,EAAC,WAAA,EAAQ,WAAU,WAAW,UAAAb,GAAQ;AAAA,QACjDO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;AACAR,EAAK,cAAc;AAEnB,SAASe,EAAM,EAAE,UAAAP,KAAqC;AACrD,SAAO,gBAAAM,EAAC,SAAA,EAAM,WAAWD,EAAE,OAAQ,UAAAL,GAAS;AAC7C;AACAO,EAAM,cAAc;AAEpB,SAASC,EAAM,EAAE,UAAAR,KAAqC;AACrD,SAAO,gBAAAM,EAAC,SAAA,EAAM,WAAWD,EAAE,OAAQ,UAAAL,GAAS;AAC7C;AACAQ,EAAM,cAAc;AAEpB,MAAMC,IAAQ,EAAE,MAAAjB,GAAM,IAAAkB,GAAI,OAAAH,GAAO,IAAAI,GAAI,OAAAH,GAAO,IAAAI,EAAA;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { TD } from './td'\nimport { TH } from './th'\nimport { TR } from './tr'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport {\n\tDEFAULT_DENSITY,\n\tDEFAULT_VERTICAL_ALIGNMENT,\n\ttype Density,\n\ttype VerticalAlignment,\n} from './utils'\nimport s from './table.module.scss'\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n\t/**\n\t * Define on the table invocation. If set to `true`, even-numbered rows will have a different background color from odd-numbered rows.\n\t */\n\tisStriped?: boolean\n\t/**\n\t * If set to `true`, the `table-display`(CSS) property will be set to fixed. See [MDN reference on table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) for more details.\n\t */\n\tisFixedLayout?: boolean\n\t/**\n\t * If set, determines the density (height) of the table body’s rows.\n\t */\n\tdensity?: Density\n\t/**\n\t * Determines the vertical alignment for content in a table. Does not apply to table headers (`th`). See [MDN reference on vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) for more details.\n\t */\n\tvalign?: VerticalAlignment\n\t/**\n\t * Adds a (non-visible) caption for users with assistive technology. If set on a sortable table, the provided table caption is paired with the automatically generated sorted message text.\n\t */\n\tcaption?: string\n}\n\nfunction Root({\n\tcaption,\n\tdensity = DEFAULT_DENSITY,\n\tvalign = DEFAULT_VERTICAL_ALIGNMENT,\n\tisStriped,\n\tisFixedLayout,\n\tchildren,\n\tclassName,\n\t...rest\n}: TableProps) {\n\treturn (\n\t\t<table\n\t\t\tclassName={classNames(\n\t\t\t\ts.table,\n\t\t\t\ts[`density-${density}`],\n\t\t\t\ts[`valign-${valign}`],\n\t\t\t\t{\n\t\t\t\t\t[s.striped]: isStriped,\n\t\t\t\t\t[s['layout-fixed']]: isFixedLayout,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{caption && <caption className=\"sr-only\">{caption}</caption>}\n\t\t\t{children}\n\t\t</table>\n\t)\n}\nRoot.displayName = 'Table'\n\nfunction THead({ children }: { children: ReactNode }) {\n\treturn <thead className={s.thead}>{children}</thead>\n}\nTHead.displayName = 'T.Head'\n\nfunction TBody({ children }: { children: ReactNode }) {\n\treturn <tbody className={s.tbody}>{children}</tbody>\n}\nTBody.displayName = 'T.Body'\n\nconst Table = { Root, TR, THead, TH, TBody, TD }\n\nexport { Table }\n"],"names":["Root","caption","density","DEFAULT_DENSITY","valign","DEFAULT_VERTICAL_ALIGNMENT","isStriped","isFixedLayout","children","className","rest","jsxs","classNames","s","jsx","THead","TBody","Table","TR","TH","TD"],"mappings":";;;;;;;AAoCA,SAASA,EAAK;AAAA,EACb,SAAAC;AAAA,EACA,SAAAC,IAAUC;AAAA,EACV,QAAAC,IAASC;AAAA,EACT,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,GAAe;AACd,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC;AAAA,QACVC,EAAE;AAAA,QACFA,EAAE,WAAWX,CAAO,EAAE;AAAA,QACtBW,EAAE,UAAUT,CAAM,EAAE;AAAA,QACpB;AAAA,UACC,CAACS,EAAE,OAAO,GAAGP;AAAA,UACb,CAACO,EAAE,cAAc,CAAC,GAAGN;AAAA,QAAA;AAAA,QAEtBE;AAAA,MAAA;AAAA,MAEA,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAT,KAAW,gBAAAa,EAAC,WAAA,EAAQ,WAAU,WAAW,UAAAb,GAAQ;AAAA,QACjDO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;AACAR,EAAK,cAAc;AAEnB,SAASe,EAAM,EAAE,UAAAP,KAAqC;AACrD,SAAO,gBAAAM,EAAC,SAAA,EAAM,WAAWD,EAAE,OAAQ,UAAAL,GAAS;AAC7C;AACAO,EAAM,cAAc;AAEpB,SAASC,EAAM,EAAE,UAAAR,KAAqC;AACrD,SAAO,gBAAAM,EAAC,SAAA,EAAM,WAAWD,EAAE,OAAQ,UAAAL,GAAS;AAC7C;AACAQ,EAAM,cAAc;AAEpB,MAAMC,IAAQ,EAAE,MAAAjB,GAAM,IAAAkB,GAAI,OAAAH,GAAO,IAAAI,GAAI,OAAAH,GAAO,IAAAI,EAAA;"}

package/components/table/td.js.map

@@ -1 +1 @@
-{"version":3,"file":"td.js","sources":["../../../src/components/table/td.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DEFAULT_ALIGNMENT, type HorizontalAlignment } from './utils'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './table.module.scss'\n\nexport interface TDProps extends HTMLAttributes<HTMLTableCellElement> {\n\t/**\n\t * Determines the horizontal content alignment (sometimes referred to as text alignment) for the cell (make sure it is also set for the column header).\n\t */\n\talign?: HorizontalAlignment\n\t/**\n\t * Elements passed as children are yielded as inner content of a <td> HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TD = ({\n\talign = DEFAULT_ALIGNMENT,\n\tchildren,\n\tclassName,\n\t...rest\n}: TDProps) => {\n\treturn (\n\t\t<td\n\t\t\tclassName={classNames(\n\t\t\t\ts.td,\n\t\t\t\ts[`align-${align}`],\n\t\t\t\t'mds-typography-legacy-body-200',\n\t\t\t\t'mds-typography-font-weight-regular',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div className={s.content}>{children}</div>\n\t\t</td>\n\t)\n}\n\nTD.displayName = 'B.Td'\n\nexport { TD }\n"],"names":["TD","align","DEFAULT_ALIGNMENT","children","className","rest","jsx","classNames","s"],"mappings":";;;;AAgBA,MAAMA,IAAK,CAAC;AAAA,EACX,OAAAC,IAAQC;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,SAASP,CAAK,EAAE;AAAA,MAClB;AAAA,MACA;AAAA,MACAG;AAAA,IAAA;AAAA,IAEA,GAAGC;AAAA,IAEJ,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAE,SAAU,UAAAL,EAAA,CAAS;AAAA,EAAA;AAAA;AAKxCH,EAAG,cAAc;"}
+{"version":3,"file":"td.js","sources":["../../../src/components/table/td.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DEFAULT_ALIGNMENT, type HorizontalAlignment } from './utils'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport s from './table.module.scss'\n\nexport interface TDProps extends HTMLAttributes<HTMLTableCellElement> {\n\t/**\n\t * Determines the horizontal content alignment (sometimes referred to as text alignment) for the cell (make sure it is also set for the column header).\n\t */\n\talign?: HorizontalAlignment\n\t/**\n\t * Elements passed as children are yielded as inner content of a <td> HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TD = ({\n\talign = DEFAULT_ALIGNMENT,\n\tchildren,\n\tclassName,\n\t...rest\n}: TDProps) => {\n\treturn (\n\t\t<td\n\t\t\tclassName={classNames(\n\t\t\t\ts.td,\n\t\t\t\ts[`align-${align}`],\n\t\t\t\t'mds-typography-legacy-body-200',\n\t\t\t\t'mds-typography-font-weight-regular',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<div className={s.content}>{children}</div>\n\t\t</td>\n\t)\n}\n\nTD.displayName = 'B.Td'\n\nexport { TD }\n"],"names":["TD","align","DEFAULT_ALIGNMENT","children","className","rest","jsx","classNames","s"],"mappings":";;;;AAgBA,MAAMA,IAAK,CAAC;AAAA,EACX,OAAAC,IAAQC;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC;AAAA,MACVC,EAAE;AAAA,MACFA,EAAE,SAASP,CAAK,EAAE;AAAA,MAClB;AAAA,MACA;AAAA,MACAG;AAAA,IAAA;AAAA,IAEA,GAAGC;AAAA,IAEJ,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAE,SAAU,UAAAL,EAAA,CAAS;AAAA,EAAA;AAAA;AAKxCH,EAAG,cAAc;"}

package/components/table/th.js.map

@@ -1 +1 @@
-{"version":3,"file":"th.js","sources":["../../../src/components/table/th.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DEFAULT_ALIGNMENT, DEFAULT_SCOPE } from './utils'\nimport { useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { ThButtonTooltip } from './th-button-tooltip'\nimport type { HorizontalAlignment, Scope } from './utils'\nimport s from './table.module.scss'\n\nexport interface THProps extends HTMLAttributes<HTMLTableCellElement> {\n\t/**\n\t * Determines the horizontal content alignment (sometimes referred to as text alignment) for the column header.\n\t */\n\talign?: HorizontalAlignment\n\t/**\n\t * If used as the first item in a table body’s row, scope should be set to row for accessibility purposes.\n\t */\n\tscope?: Scope\n\t/**\n\t * Any valid CSS\n\t * If set, determines the column’s width.\n\t */\n\twidth?: string\n\t/**\n\t * Text string which will appear in the tooltip. May contain basic HTML tags for formatting text such as strong and em tags. Not intended for multi-paragraph text or other more complex content. May not contain interactive content such as links or buttons. The placement and offset are automatically set and can’t be overwritten.\n\t */\n\ttooltip?: string\n\t/**\n\t * If set to `true`, it visually hides the column’s text content (it will still be available to screen readers for accessibility).\n\t */\n\tisVisuallyHidden?: boolean\n\t/**\n\t * Elements passed as children are yielded as inner content of a `<th>` HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TH = ({\n\talign = DEFAULT_ALIGNMENT,\n\twidth,\n\tscope = DEFAULT_SCOPE,\n\ttooltip,\n\tisVisuallyHidden,\n\tchildren,\n\tclassName,\n\t...rest\n}: THProps) => {\n\tconst labelId = useId()\n\tlet content: React.ReactNode\n\n\tif (isVisuallyHidden) {\n\t\tcontent = <span className=\"sr-only\">{children}</span>\n\t} else if (tooltip) {\n\t\tcontent = (\n\t\t\t<div className={s.content}>\n\t\t\t\t<span id={labelId}>{children}</span>\n\t\t\t\t<ThButtonTooltip tooltip={tooltip} labelId={labelId} />\n\t\t\t</div>\n\t\t)\n\t} else {\n\t\tcontent = <div className={s.content}>{children}</div>\n\t}\n\n\treturn (\n\t\t<th\n\t\t\tclassName={classNames(\n\t\t\t\ts.th,\n\t\t\t\ts[`align-${align}`],\n\t\t\t\t'mds-typography-legacy-body-200',\n\t\t\t\t'mds-typography-font-weight-semibold',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={width ? { width, minWidth: width } : {}}\n\t\t\t{...rest}\n\t\t\tscope={scope}\n\t\t>\n\t\t\t{content}\n\t\t</th>\n\t)\n}\n\nTH.displayName = 'H.TH'\n\nexport { TH }\n"],"names":["TH","align","DEFAULT_ALIGNMENT","width","scope","DEFAULT_SCOPE","tooltip","isVisuallyHidden","children","className","rest","labelId","useId","content","jsx","jsxs","s","ThButtonTooltip","classNames"],"mappings":";;;;;;AAmCA,MAAMA,IAAK,CAAC;AAAA,EACX,OAAAC,IAAQC;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQC;AAAA,EACR,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAe;AACd,QAAMC,IAAUC,EAAA;AAChB,MAAIC;AAEJ,SAAIN,IACHM,IAAU,gBAAAC,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAN,GAAS,IACpCF,IACVO,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAE,SACjB,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAA,EAAK,IAAIH,GAAU,UAAAH,EAAA,CAAS;AAAA,IAC7B,gBAAAM,EAACG,GAAA,EAAgB,SAAAX,GAAkB,SAAAK,EAAA,CAAkB;AAAA,EAAA,GACtD,IAGDE,IAAU,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAE,SAAU,UAAAR,GAAS,GAI/C,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWI;AAAA,QACVF,EAAE;AAAA,QACFA,EAAE,SAASf,CAAK,EAAE;AAAA,QAClB;AAAA,QACA;AAAA,QACAQ;AAAA,MAAA;AAAA,MAED,OAAON,IAAQ,EAAE,OAAAA,GAAO,UAAUA,EAAA,IAAU,CAAA;AAAA,MAC3C,GAAGO;AAAA,MACJ,OAAAN;AAAA,MAEC,UAAAS;AAAA,IAAA;AAAA,EAAA;AAGJ;AAEAb,EAAG,cAAc;"}
+{"version":3,"file":"th.js","sources":["../../../src/components/table/th.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { DEFAULT_ALIGNMENT, DEFAULT_SCOPE } from './utils'\nimport { useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { ThButtonTooltip } from './th-button-tooltip'\nimport type { HorizontalAlignment, Scope } from './utils'\nimport s from './table.module.scss'\n\nexport interface THProps extends HTMLAttributes<HTMLTableCellElement> {\n\t/**\n\t * Determines the horizontal content alignment (sometimes referred to as text alignment) for the column header.\n\t */\n\talign?: HorizontalAlignment\n\t/**\n\t * If used as the first item in a table body’s row, scope should be set to row for accessibility purposes.\n\t */\n\tscope?: Scope\n\t/**\n\t * Any valid CSS\n\t * If set, determines the column’s width.\n\t */\n\twidth?: string\n\t/**\n\t * Text string which will appear in the tooltip. May contain basic HTML tags for formatting text such as strong and em tags. Not intended for multi-paragraph text or other more complex content. May not contain interactive content such as links or buttons. The placement and offset are automatically set and can’t be overwritten.\n\t */\n\ttooltip?: string\n\t/**\n\t * If set to `true`, it visually hides the column’s text content (it will still be available to screen readers for accessibility).\n\t */\n\tisVisuallyHidden?: boolean\n\t/**\n\t * Elements passed as children are yielded as inner content of a `<th>` HTML element.\n\t */\n\tchildren: ReactNode\n}\n\nconst TH = ({\n\talign = DEFAULT_ALIGNMENT,\n\twidth,\n\tscope = DEFAULT_SCOPE,\n\ttooltip,\n\tisVisuallyHidden,\n\tchildren,\n\tclassName,\n\t...rest\n}: THProps) => {\n\tconst labelId = useId()\n\tlet content: React.ReactNode\n\n\tif (isVisuallyHidden) {\n\t\tcontent = <span className=\"sr-only\">{children}</span>\n\t} else if (tooltip) {\n\t\tcontent = (\n\t\t\t<div className={s.content}>\n\t\t\t\t<span id={labelId}>{children}</span>\n\t\t\t\t<ThButtonTooltip tooltip={tooltip} labelId={labelId} />\n\t\t\t</div>\n\t\t)\n\t} else {\n\t\tcontent = <div className={s.content}>{children}</div>\n\t}\n\n\treturn (\n\t\t<th\n\t\t\tclassName={classNames(\n\t\t\t\ts.th,\n\t\t\t\ts[`align-${align}`],\n\t\t\t\t'mds-typography-legacy-body-200',\n\t\t\t\t'mds-typography-font-weight-semibold',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={width ? { width, minWidth: width } : {}}\n\t\t\t{...rest}\n\t\t\tscope={scope}\n\t\t>\n\t\t\t{content}\n\t\t</th>\n\t)\n}\n\nTH.displayName = 'H.TH'\n\nexport { TH }\n"],"names":["TH","align","DEFAULT_ALIGNMENT","width","scope","DEFAULT_SCOPE","tooltip","isVisuallyHidden","children","className","rest","labelId","useId","content","jsx","jsxs","s","ThButtonTooltip","classNames"],"mappings":";;;;;;AAmCA,MAAMA,IAAK,CAAC;AAAA,EACX,OAAAC,IAAQC;AAAA,EACR,OAAAC;AAAA,EACA,OAAAC,IAAQC;AAAA,EACR,SAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAe;AACd,QAAMC,IAAUC,EAAA;AAChB,MAAIC;AAEJ,SAAIN,IACHM,IAAU,gBAAAC,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAN,GAAS,IACpCF,IACVO,IACC,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAE,SACjB,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAA,EAAK,IAAIH,GAAU,UAAAH,EAAA,CAAS;AAAA,IAC7B,gBAAAM,EAACG,GAAA,EAAgB,SAAAX,GAAkB,SAAAK,EAAA,CAAkB;AAAA,EAAA,GACtD,IAGDE,IAAU,gBAAAC,EAAC,OAAA,EAAI,WAAWE,EAAE,SAAU,UAAAR,GAAS,GAI/C,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWI;AAAA,QACVF,EAAE;AAAA,QACFA,EAAE,SAASf,CAAK,EAAE;AAAA,QAClB;AAAA,QACA;AAAA,QACAQ;AAAA,MAAA;AAAA,MAED,OAAON,IAAQ,EAAE,OAAAA,GAAO,UAAUA,EAAA,IAAU,CAAA;AAAA,MAC3C,GAAGO;AAAA,MACJ,OAAAN;AAAA,MAEC,UAAAS;AAAA,IAAA;AAAA,EAAA;AAGJ;AAEAb,EAAG,cAAc;"}

package/components/table/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/table/utils.ts"],"sourcesContent":["export const DEFAULT_DENSITY = 'medium'\nexport const DENSITIES = ['default', 'medium', 'short', 'tall'] as const\nexport type Density = (typeof DENSITIES)[number]\nexport const getDensity = (densityStr: string): Density => {\n\tconst density = densityStr as Density\n\treturn DENSITIES.includes(density) ? density : DEFAULT_DENSITY\n}\n\nexport const DEFAULT_VERTICAL_ALIGNMENT = 'top'\nexport const VERTICAL_ALIGNMENTS = ['baseline', 'middle', 'top'] as const\nexport type VerticalAlignment = (typeof VERTICAL_ALIGNMENTS)[number]\nexport const getVerticalAlignment = (valignStr: string): VerticalAlignment => {\n\tconst valign = valignStr as VerticalAlignment\n\treturn VERTICAL_ALIGNMENTS.includes(valign)\n\t\t? valign\n\t\t: DEFAULT_VERTICAL_ALIGNMENT\n}\n\nexport const DEFAULT_ALIGNMENT = 'left'\nexport const ALIGNMENTS = ['left', 'center', 'right'] as const\nexport type HorizontalAlignment = (typeof ALIGNMENTS)[number]\nexport const getHorizontalAlignment = (\n\talignStr: string\n): HorizontalAlignment => {\n\tconst align = alignStr as HorizontalAlignment\n\treturn ALIGNMENTS.includes(align) ? align : DEFAULT_ALIGNMENT\n}\n\nexport const DEFAULT_SCOPE = 'col'\nexport const SCOPES = ['col', 'row'] as const\nexport type Scope = (typeof SCOPES)[number]\nexport const getScope = (scopeStr: string): Scope => {\n\tconst scope = scopeStr as Scope\n\treturn SCOPES.includes(scope) ? scope : DEFAULT_SCOPE\n}\n"],"names":["DEFAULT_DENSITY","DENSITIES","getDensity","densityStr","density","DEFAULT_VERTICAL_ALIGNMENT","VERTICAL_ALIGNMENTS","getVerticalAlignment","valignStr","valign","DEFAULT_ALIGNMENT","ALIGNMENTS","getHorizontalAlignment","alignStr","align","DEFAULT_SCOPE","SCOPES","getScope","scopeStr","scope"],"mappings":"AAAO,MAAMA,IAAkB,UAClBC,IAAY,CAAC,WAAW,UAAU,SAAS,MAAM,GAEjDC,IAAa,CAACC,MAAgC;AAC1D,QAAMC,IAAUD;AAChB,SAAOF,EAAU,SAASG,CAAO,IAAIA,IAAUJ;AAChD,GAEaK,IAA6B,OAC7BC,IAAsB,CAAC,YAAY,UAAU,KAAK,GAElDC,IAAuB,CAACC,MAAyC;AAC7E,QAAMC,IAASD;AACf,SAAOF,EAAoB,SAASG,CAAM,IACvCA,IACAJ;AACJ,GAEaK,IAAoB,QACpBC,IAAa,CAAC,QAAQ,UAAU,OAAO,GAEvCC,IAAyB,CACrCC,MACyB;AACzB,QAAMC,IAAQD;AACd,SAAOF,EAAW,SAASG,CAAK,IAAIA,IAAQJ;AAC7C,GAEaK,IAAgB,OAChBC,IAAS,CAAC,OAAO,KAAK,GAEtBC,IAAW,CAACC,MAA4B;AACpD,QAAMC,IAAQD;AACd,SAAOF,EAAO,SAASG,CAAK,IAAIA,IAAQJ;AACzC;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/table/utils.ts"],"sourcesContent":["export const DEFAULT_DENSITY = 'medium'\nexport const DENSITIES = ['default', 'medium', 'short', 'tall'] as const\nexport type Density = (typeof DENSITIES)[number]\nexport const getDensity = (densityStr: string): Density => {\n\tconst density = densityStr as Density\n\treturn DENSITIES.includes(density) ? density : DEFAULT_DENSITY\n}\n\nexport const DEFAULT_VERTICAL_ALIGNMENT = 'top'\nexport const VERTICAL_ALIGNMENTS = ['baseline', 'middle', 'top'] as const\nexport type VerticalAlignment = (typeof VERTICAL_ALIGNMENTS)[number]\nexport const getVerticalAlignment = (valignStr: string): VerticalAlignment => {\n\tconst valign = valignStr as VerticalAlignment\n\treturn VERTICAL_ALIGNMENTS.includes(valign)\n\t\t? valign\n\t\t: DEFAULT_VERTICAL_ALIGNMENT\n}\n\nexport const DEFAULT_ALIGNMENT = 'left'\nexport const ALIGNMENTS = ['left', 'center', 'right'] as const\nexport type HorizontalAlignment = (typeof ALIGNMENTS)[number]\nexport const getHorizontalAlignment = (\n\talignStr: string,\n): HorizontalAlignment => {\n\tconst align = alignStr as HorizontalAlignment\n\treturn ALIGNMENTS.includes(align) ? align : DEFAULT_ALIGNMENT\n}\n\nexport const DEFAULT_SCOPE = 'col'\nexport const SCOPES = ['col', 'row'] as const\nexport type Scope = (typeof SCOPES)[number]\nexport const getScope = (scopeStr: string): Scope => {\n\tconst scope = scopeStr as Scope\n\treturn SCOPES.includes(scope) ? scope : DEFAULT_SCOPE\n}\n"],"names":["DEFAULT_DENSITY","DENSITIES","getDensity","densityStr","density","DEFAULT_VERTICAL_ALIGNMENT","VERTICAL_ALIGNMENTS","getVerticalAlignment","valignStr","valign","DEFAULT_ALIGNMENT","ALIGNMENTS","getHorizontalAlignment","alignStr","align","DEFAULT_SCOPE","SCOPES","getScope","scopeStr","scope"],"mappings":"AAAO,MAAMA,IAAkB,UAClBC,IAAY,CAAC,WAAW,UAAU,SAAS,MAAM,GAEjDC,IAAa,CAACC,MAAgC;AAC1D,QAAMC,IAAUD;AAChB,SAAOF,EAAU,SAASG,CAAO,IAAIA,IAAUJ;AAChD,GAEaK,IAA6B,OAC7BC,IAAsB,CAAC,YAAY,UAAU,KAAK,GAElDC,IAAuB,CAACC,MAAyC;AAC7E,QAAMC,IAASD;AACf,SAAOF,EAAoB,SAASG,CAAM,IACvCA,IACAJ;AACJ,GAEaK,IAAoB,QACpBC,IAAa,CAAC,QAAQ,UAAU,OAAO,GAEvCC,IAAyB,CACrCC,MACyB;AACzB,QAAMC,IAAQD;AACd,SAAOF,EAAW,SAASG,CAAK,IAAIA,IAAQJ;AAC7C,GAEaK,IAAgB,OAChBC,IAAS,CAAC,OAAO,KAAK,GAEtBC,IAAW,CAACC,MAA4B;AACpD,QAAMC,IAAQD;AACd,SAAOF,EAAO,SAASG,CAAK,IAAIA,IAAQJ;AACzC;"}

package/components/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tconsole.error('Only one tab may use isSelected argument')\n\t\t}\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView]\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[]\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length]\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t]\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","selectedCount","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex,\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tconsole.error('Only one tab may use isSelected argument')\n\t\t}\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView],\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[],\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length],\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t],\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","selectedCount","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":"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"}

package/components/tabs/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sources":["../../../src/components/tabs/tab-panel.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo, type HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport { useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\ntype TabPanelProps = HTMLAttributes<HTMLDivElement>\n\nconst TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n\tconst { panelIds, tabIds, selectedTabIndex, panelNodes } = useTabsContext()\n\tconst panelId = 'panel-' + useId()\n\n\tconst nodeIndex = useMemo(\n\t\t() => panelIds.indexOf(panelId),\n\t\t[panelIds, panelId]\n\t)\n\n\tconst tabId = useMemo(\n\t\t() => (nodeIndex > -1 ? tabIds[nodeIndex] : undefined),\n\t\t[tabIds, nodeIndex]\n\t)\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex]\n\t)\n\n\treturn (\n\t\t<section\n\t\t\tclassName={classNames(s.panel, className)}\n\t\t\t{...rest}\n\t\t\trole=\"tabpanel\"\n\t\t\taria-labelledby={tabId}\n\t\t\tid={panelId}\n\t\t\thidden={!isSelected}\n\t\t\tref={(el: HTMLDivElement) => panelNodes.current.push(el)}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t)\n}\n\nexport type { TabPanelProps }\nexport { TabPanel }\n"],"names":["TabPanel","children","className","rest","panelIds","tabIds","panelNodes","useTabsContext","panelId","useId","useMemo","tabId","nodeIndex","isSelected","selectedTabIndex","jsx","classNames","s","el"],"mappings":";;;;;;AAUC,MAAAA,IAAQ,CAAA,EAAU,UAAAC,GAAQ,WAAAC,GAAA,GAAAC,EAAkB,MAAA;AAC5C,QAAM,EAAA,UAAAC,GAAU,QAAAC,wBAAiB,YAAAC,EAAA,IAAAC,EAAA,GAE3BC,IAAA,WAAYC,EAAA,OACFC;AAAA,IACf,MAACN,EAAU,QAAOI,CAAA;AAAA,IACnB,CAAAJ,GAAAI,CAAA;AAAA,EAEA,GACCG,IAAOD;AAAA,IACP,MAACE,IAAiB,KAAAP,EAAAO,CAAA,IAAA;AAAA,IACnB,CAAAP,GAAAO,CAAA;AAAA,EAEA,GACCC,IAAMH;AAAA,IACN,MAACE,MAAWE;AAAA,IACb,CAAAF,GAAAE,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGC,EAAAC,EAAA,OAAAf,CAAA;AAAA,MACJ,GAAAC;AAAA,MACA,MAAA;AAAA,MACA,mBAAIQ;AAAA,MACJ,IAAAH;AAAA,MACA,QAAM,CAAAK;AAAA,MAEL,KAAA,CAAAK,MAAAZ,EAAA,QAAA,KAAAY,CAAA;AAAA,MAAA,UAAAjB;AAAA,IACF;AAAA,EAEF;;"}
+{"version":3,"file":"tab-panel.js","sources":["../../../src/components/tabs/tab-panel.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo, type HTMLAttributes } from 'react'\nimport classNames from 'classnames'\nimport { useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\ntype TabPanelProps = HTMLAttributes<HTMLDivElement>\n\nconst TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n\tconst { panelIds, tabIds, selectedTabIndex, panelNodes } = useTabsContext()\n\tconst panelId = 'panel-' + useId()\n\n\tconst nodeIndex = useMemo(\n\t\t() => panelIds.indexOf(panelId),\n\t\t[panelIds, panelId],\n\t)\n\n\tconst tabId = useMemo(\n\t\t() => (nodeIndex > -1 ? tabIds[nodeIndex] : undefined),\n\t\t[tabIds, nodeIndex],\n\t)\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex],\n\t)\n\n\treturn (\n\t\t<section\n\t\t\tclassName={classNames(s.panel, className)}\n\t\t\t{...rest}\n\t\t\trole=\"tabpanel\"\n\t\t\taria-labelledby={tabId}\n\t\t\tid={panelId}\n\t\t\thidden={!isSelected}\n\t\t\tref={(el: HTMLDivElement) => panelNodes.current.push(el)}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t)\n}\n\nexport type { TabPanelProps }\nexport { TabPanel }\n"],"names":["TabPanel","children","className","rest","panelIds","tabIds","panelNodes","useTabsContext","panelId","useId","useMemo","tabId","nodeIndex","isSelected","selectedTabIndex","jsx","classNames","s","el"],"mappings":";;;;;;AAUC,MAAAA,IAAQ,CAAA,EAAU,UAAAC,GAAQ,WAAAC,GAAA,GAAAC,EAAkB,MAAA;AAC5C,QAAM,EAAA,UAAAC,GAAU,QAAAC,wBAAiB,YAAAC,EAAA,IAAAC,EAAA,GAE3BC,IAAA,WAAYC,EAAA,OACFC;AAAA,IACf,MAACN,EAAU,QAAOI,CAAA;AAAA,IACnB,CAAAJ,GAAAI,CAAA;AAAA,EAEA,GACCG,IAAOD;AAAA,IACP,MAACE,IAAiB,KAAAP,EAAAO,CAAA,IAAA;AAAA,IACnB,CAAAP,GAAAO,CAAA;AAAA,EAEA,GACCC,IAAMH;AAAA,IACN,MAACE,MAAWE;AAAA,IACb,CAAAF,GAAAE,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,WAAGC,EAAAC,EAAA,OAAAf,CAAA;AAAA,MACJ,GAAAC;AAAA,MACA,MAAA;AAAA,MACA,mBAAIQ;AAAA,MACJ,IAAAH;AAAA,MACA,QAAM,CAAAK;AAAA,MAEL,KAAA,CAAAK,MAAAZ,EAAA,QAAA,KAAAY,CAAA;AAAA,MAAA,UAAAjB;AAAA,IACF;AAAA,EAEF;;"}

package/components/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../src/components/tabs/tab.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { BadgeCount } from '../badge-count'\nimport { useId, type HTMLAttributes, useMemo } from 'react'\nimport { useTabsContext } from './use-tabs-context'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './tabs.module.scss'\n\ninterface TabProps extends HTMLAttributes<HTMLLIElement> {\n\ttabIndicatorTheme?: 'primary' | 'secondary'\n\t/**\n\t * Displays a count indicator in the tab. Accepts the text value that should go in Badge Count. (optional)\n\t */\n\tcount?: string\n\t/**\n\t * Displays an icon in the tab. (optional)\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Customizes the initial tab to display when the page is loaded. The first tab is selected on page load by default. (optional)\n\t */\n\tisSelected?: boolean\n\t/**\n\t * Used to append analytics and tracking related data attributes to any interactive element internal to this component.\n\t */\n\ttrackingKey?: string\n}\n\nconst Tab = ({\n\tcount,\n\ticon,\n\tisSelected: isInitialTab,\n\tchildren,\n\tclassName,\n\ttrackingKey,\n\ttabIndicatorTheme = 'primary',\n\t...rest\n}: TabProps) => {\n\tconst { tabNodes, tabIds, selectedTabIndex, onClick, onKeyUp, size } =\n\t\tuseTabsContext()\n\tconst tabId = 'tab-' + useId()\n\n\tconst nodeIndex = useMemo(() => tabIds.indexOf(tabId), [tabIds, tabId])\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex]\n\t)\n\n\treturn (\n\t\t<li\n\t\t\tclassName={classNames(\n\t\t\t\ts.tab,\n\t\t\t\ts[tabIndicatorTheme],\n\t\t\t\t{\n\t\t\t\t\t[s.selected]: isSelected,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\trole=\"presentation\"\n\t\t>\n\t\t\t<button\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['tab-button'],\n\t\t\t\t\t'mds-typography-font-weight-medium',\n\t\t\t\t\t{\n\t\t\t\t\t\t['mds-typography-legacy-body-200']: size === 'medium',\n\t\t\t\t\t\t['mds-typography-legacy-body-300']: size === 'large',\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tid={tabId}\n\t\t\t\taria-selected={isSelected}\n\t\t\t\ttabIndex={!isSelected ? -1 : undefined}\n\t\t\t\tonClick={(e) => onClick(nodeIndex, e)}\n\t\t\t\tonKeyUp={(e) => onKeyUp(nodeIndex, e)}\n\t\t\t\tdata-is-selected={isInitialTab}\n\t\t\t\tdata-analytics={trackingKey}\n\t\t\t\tref={(el: HTMLButtonElement) => tabNodes.current.push(el)}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={16} role=\"presentation\" />}\n\n\t\t\t\t{children}\n\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" role=\"presentation\" />}\n\t\t\t</button>\n\t\t</li>\n\t)\n}\n\nexport type { TabProps }\nexport { Tab }\n"],"names":["Tab","count","icon","isInitialTab","children","className","trackingKey","tabIndicatorTheme","rest","tabNodes","tabIds","onClick","onKeyUp","size","useTabsContext","tabId","nodeIndex","useMemo","isSelected","selectedTabIndex","jsx","classNames","s","jsxs","el","FlightIcon","BadgeCount"],"mappings":";;;;;;;;AA8Ba,MACZA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAG;AAAA,EACJ,GAAAC;AACC;AAEA,QAAM,EAAA,UAAAC,GAAQ,QAAAC,wBAAe,SAAAC,GAAA,SAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAA,GAEvBC,IAAA,WAAoB,GAEpBC,IAAAC,EAAa,MAAAP,EAAA,QAAAK,CAAA,GAAA,CAAAL,GAAAK,CAAA,CAAA,GAClBG,IAAMD;AAAA,IACN,MAACD,MAAWG;AAAA,IACb,CAAAH,GAAAG,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACFC,EAAE;AAAA,QACFA,EAAAf,CAAA;AAAA,QAAA;AAAA,UAEA,CAAAe,EAAA,QAAA,GAAAJ;AAAA,QACA;AAAA,QACDb;AAAA,MACC;AAAA,MACD,GAAAG;AAAA,MAEA,MAAA;AAAA,MAAA,UAAC,gBAAAe;AAAA,QAAA;AAAA,QAAA;AAAA,UACW,WACRF;AAAA,YACFC,EAAA,YAAA;AAAA,YACA;AAAA,YAAA;AAAA,cAEE,kCAAmCT,MAAS;AAAA,cAAA,kCAAAA,MAAA;AAAA,YAE/C;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,MAAI;AAAA,UACJ,IAAAE;AAAA,UACA;UACA,UAAUG,IAAc,SAAA;AAAA,UACxB,SAAS,CAAC,MAAMP,EAAQK,GAAW,CAAC;AAAA,UACpC,SAAA,CAAA,MAAAJ,EAAkBI,GAAA,CAAA;AAAA,UAClB,oBAAgBb;AAAA,UAChB,kBAAgCG;AAAA,UAE/B,YAAAG,EAAA,QAAA,KAAAe,CAAA;AAAA,UAAA,UAAA;AAAA,YAEAtB,KAAA,gBAAAkB,EAAAK,GAAA,EAAA,MAAAvB,GAAA,MAAA,IAAA,MAAA,eAAA,CAAA;AAAA,YAEAE;AAAA,YAAmEH,KAAA,gBAAAmB,EAAAM,GAAA,EAAA,MAAAzB,GAAA,MAAA,SAAA,MAAA,eAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrE;AAAA,IACD;AAAA,EAEF;;"}
+{"version":3,"file":"tab.js","sources":["../../../src/components/tabs/tab.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport { BadgeCount } from '../badge-count'\nimport { useId, type HTMLAttributes, useMemo } from 'react'\nimport { useTabsContext } from './use-tabs-context'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\nimport s from './tabs.module.scss'\n\ninterface TabProps extends HTMLAttributes<HTMLLIElement> {\n\ttabIndicatorTheme?: 'primary' | 'secondary'\n\t/**\n\t * Displays a count indicator in the tab. Accepts the text value that should go in Badge Count. (optional)\n\t */\n\tcount?: string\n\t/**\n\t * Displays an icon in the tab. (optional)\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Customizes the initial tab to display when the page is loaded. The first tab is selected on page load by default. (optional)\n\t */\n\tisSelected?: boolean\n\t/**\n\t * Used to append analytics and tracking related data attributes to any interactive element internal to this component.\n\t */\n\ttrackingKey?: string\n}\n\nconst Tab = ({\n\tcount,\n\ticon,\n\tisSelected: isInitialTab,\n\tchildren,\n\tclassName,\n\ttrackingKey,\n\ttabIndicatorTheme = 'primary',\n\t...rest\n}: TabProps) => {\n\tconst { tabNodes, tabIds, selectedTabIndex, onClick, onKeyUp, size } =\n\t\tuseTabsContext()\n\tconst tabId = 'tab-' + useId()\n\n\tconst nodeIndex = useMemo(() => tabIds.indexOf(tabId), [tabIds, tabId])\n\n\tconst isSelected = useMemo(\n\t\t() => nodeIndex === selectedTabIndex,\n\t\t[nodeIndex, selectedTabIndex],\n\t)\n\n\treturn (\n\t\t<li\n\t\t\tclassName={classNames(\n\t\t\t\ts.tab,\n\t\t\t\ts[tabIndicatorTheme],\n\t\t\t\t{\n\t\t\t\t\t[s.selected]: isSelected,\n\t\t\t\t},\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...rest}\n\t\t\trole=\"presentation\"\n\t\t>\n\t\t\t<button\n\t\t\t\tclassName={classNames(\n\t\t\t\t\ts['tab-button'],\n\t\t\t\t\t'mds-typography-font-weight-medium',\n\t\t\t\t\t{\n\t\t\t\t\t\t['mds-typography-legacy-body-200']: size === 'medium',\n\t\t\t\t\t\t['mds-typography-legacy-body-300']: size === 'large',\n\t\t\t\t\t},\n\t\t\t\t)}\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tid={tabId}\n\t\t\t\taria-selected={isSelected}\n\t\t\t\ttabIndex={!isSelected ? -1 : undefined}\n\t\t\t\tonClick={(e) => onClick(nodeIndex, e)}\n\t\t\t\tonKeyUp={(e) => onKeyUp(nodeIndex, e)}\n\t\t\t\tdata-is-selected={isInitialTab}\n\t\t\t\tdata-analytics={trackingKey}\n\t\t\t\tref={(el: HTMLButtonElement) => tabNodes.current.push(el)}\n\t\t\t>\n\t\t\t\t{icon && <FlightIcon name={icon} size={16} role=\"presentation\" />}\n\n\t\t\t\t{children}\n\n\t\t\t\t{count && <BadgeCount text={count} size=\"small\" role=\"presentation\" />}\n\t\t\t</button>\n\t\t</li>\n\t)\n}\n\nexport type { TabProps }\nexport { Tab }\n"],"names":["Tab","count","icon","isInitialTab","children","className","trackingKey","tabIndicatorTheme","rest","tabNodes","tabIds","onClick","onKeyUp","size","useTabsContext","tabId","nodeIndex","useMemo","isSelected","selectedTabIndex","jsx","classNames","s","jsxs","el","FlightIcon","BadgeCount"],"mappings":";;;;;;;;AA8Ba,MACZA,IAAA,CAAA;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC,IAAG;AAAA,EACJ,GAAAC;AACC;AAEA,QAAM,EAAA,UAAAC,GAAQ,QAAAC,wBAAe,SAAAC,GAAA,SAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAA,GAEvBC,IAAA,WAAoB,GAEpBC,IAAAC,EAAa,MAAAP,EAAA,QAAAK,CAAA,GAAA,CAAAL,GAAAK,CAAA,CAAA,GAClBG,IAAMD;AAAA,IACN,MAACD,MAAWG;AAAA,IACb,CAAAH,GAAAG,CAAA;AAAA,EAEA;AACC,SAAC,gBAAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MACW,WACRC;AAAA,QACFC,EAAE;AAAA,QACFA,EAAAf,CAAA;AAAA,QAAA;AAAA,UAEA,CAAAe,EAAA,QAAA,GAAAJ;AAAA,QACA;AAAA,QACDb;AAAA,MACC;AAAA,MACD,GAAAG;AAAA,MAEA,MAAA;AAAA,MAAA,UAAC,gBAAAe;AAAA,QAAA;AAAA,QAAA;AAAA,UACW,WACRF;AAAA,YACFC,EAAA,YAAA;AAAA,YACA;AAAA,YAAA;AAAA,cAEE,kCAAmCT,MAAS;AAAA,cAAA,kCAAAA,MAAA;AAAA,YAE/C;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,MAAI;AAAA,UACJ,IAAAE;AAAA,UACA;UACA,UAAUG,IAAc,SAAA;AAAA,UACxB,SAAS,CAAC,MAAMP,EAAQK,GAAW,CAAC;AAAA,UACpC,SAAA,CAAA,MAAAJ,EAAkBI,GAAA,CAAA;AAAA,UAClB,oBAAgBb;AAAA,UAChB,kBAAgCG;AAAA,UAE/B,YAAAG,EAAA,QAAA,KAAAe,CAAA;AAAA,UAAA,UAAA;AAAA,YAEAtB,KAAA,gBAAAkB,EAAAK,GAAA,EAAA,MAAAvB,GAAA,MAAA,IAAA,MAAA,eAAA,CAAA;AAAA,YAEAE;AAAA,YAAmEH,KAAA,gBAAAmB,EAAAM,GAAA,EAAA,MAAAzB,GAAA,MAAA,SAAA,MAAA,eAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrE;AAAA,IACD;AAAA,EAEF;;"}

package/components/tabs/tabs.module.scss

@@ -7,14 +7,10 @@
 	&::before {
 		position: absolute;
 		right: 0;
-		bottom: calc(
-			(var(--mds-tabs-indicator-height) - var(--mds-tabs-divider-height)) /
-				2
-		);
+		bottom: calc((var(--mds-tabs-indicator-height) - var(--mds-tabs-divider-height)) / 2);
 		left: 0;
 		display: block;
-		border-top: var(--mds-tabs-divider-height) solid
-			var(--mds-color-border-primary);
+		border-top: var(--mds-tabs-divider-height) solid var(--mds-color-border-primary);
 		content: '';
 	}
 }
@@ -34,54 +30,26 @@
 	align-items: center;
 	height: var(--mds-tabs-tab-height-medium);
 	margin: 0;
-	padding: var(--mds-tabs-tab-padding-vertical)
-		var(--mds-tabs-tab-padding-horizontal-medium);
+	padding: var(--mds-tabs-tab-padding-vertical) var(--mds-tabs-tab-padding-horizontal-medium);
 	white-space: nowrap;
 	text-decoration: none;
 	list-style: none;
 
 	&.primary {
-		color: var(
-			--mds-accent-tab-color-foreground,
-			var(--mds-color-foreground-primary)
-		);
+		color: var(--mds-accent-tab-color-foreground, var(--mds-color-foreground-primary));
 
 		&:hover {
-			color: var(
-				--mds-accent-tab-color-foreground-hover,
-				var(
-					--mds-accent-tab-color-foreground,
-					var(--mds-color-foreground-action)
-				)
-			);
+			color: var(--mds-accent-tab-color-foreground-hover, var(--mds-accent-tab-color-foreground, var(--mds-color-foreground-action)));
 		}
 
 		&.selected {
-			color: var(
-				--mds-accent-tab-selected-color-foreground,
-				var(
-					--mds-accent-tab-color-foreground,
-					var(--mds-color-foreground-action)
-				)
-			);
+			color: var(--mds-accent-tab-selected-color-foreground, var(--mds-accent-tab-color-foreground, var(--mds-color-foreground-action)));
 
 			&:hover {
-				color: var(
-					--mds-accent-tab-selected-color-foreground-hover,
-					var(
-						--mds-accent-tab-selected-color-foreground,
-						var(
-							--mds-accent-tab-color-foreground,
-							var(--mds-color-foreground-action-hover)
-						)
-					)
-				);
+				color: var(--mds-accent-tab-selected-color-foreground-hover, var(--mds-accent-tab-selected-color-foreground, var(--mds-accent-tab-color-foreground, var(--mds-color-foreground-action-hover))));
 
 				& ~ .indicator {
-					background: var(
-						--mds-accent-tab-indicator-color,
-						var(--mds-color-foreground-action-hover)
-					);
+					background: var(--mds-accent-tab-indicator-color, var(--mds-color-foreground-action-hover));
 				}
 			}
 		}
@@ -99,21 +67,13 @@
 		}
 
 		& ~ .indicator {
-			background: var(
-				--mds-accent-tab-indicator-color,
-				var(--mds-color-foreground-strong)
-			);
+			background: var(--mds-accent-tab-indicator-color, var(--mds-color-foreground-strong));
 		}
 	}
 }
 
 .tab-button {
-	@include hds-focus-ring-with-pseudo-element(
-		$top: var(--mds-tabs-tab-focus-inset),
-		$right: var(--mds-tabs-tab-focus-inset),
-		$bottom: var(--mds-tabs-tab-focus-inset),
-		$left: var(--mds-tabs-tab-focus-inset)
-	);
+	@include hds-focus-ring-with-pseudo-element($top: var(--mds-tabs-tab-focus-inset), $right: var(--mds-tabs-tab-focus-inset), $bottom: var(--mds-tabs-tab-focus-inset), $left: var(--mds-tabs-tab-focus-inset));
 	position: static;
 	display: flex;
 	gap: var(--mds-tabs-tab-gutter);
@@ -144,10 +104,7 @@
 	// notice: this custom prop is set dynamically via JavaScript
 	width: var(--indicator-width);
 	height: var(--mds-tabs-indicator-height);
-	background: var(
-		--mds-accent-tab-indicator-color,
-		var(--mds-color-foreground-action)
-	);
+	background: var(--mds-accent-tab-indicator-color, var(--mds-color-foreground-action));
 	border-radius: var(--mds-tabs-indicator-height);
 
 	@media screen and (prefers-reduced-motion: no-preference) {

package/components/tabs/use-tabs-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tabs-context.js","sources":["../../../src/components/tabs/use-tabs-context.ts"],"sourcesContent":["'use client'\n\nimport {\n\ttype MutableRefObject,\n\ttype MouseEvent,\n\ttype KeyboardEvent,\n\tcreateContext,\n\tuseContext,\n} from 'react'\n\ninterface TabsContextState {\n\ttabNodes: MutableRefObject<Array<HTMLButtonElement>>\n\tpanelNodes: MutableRefObject<Array<HTMLDivElement>>\n\ttabIds: Array<string>\n\tpanelIds: Array<string>\n\tselectedTabIndex: number\n\tonClick: (tabIndex: number, event: MouseEvent<HTMLButtonElement>) => void\n\tonKeyUp: (tabIndex: number, event: KeyboardEvent<HTMLButtonElement>) => void\n\tsize: 'medium' | 'large'\n\ttabsListRef: MutableRefObject<HTMLUListElement | null>\n}\n\nexport const TabsContext = createContext<TabsContextState | undefined>(\n\tundefined\n)\n\nexport function useTabsContext(): TabsContextState {\n\tconst context = useContext(TabsContext)\n\tif (context === undefined) {\n\t\tthrow new Error('useTabsContext must be used within a TabsContext.Provider')\n\t}\n\treturn context\n}\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext"],"mappings":";;AAsB2B,MAC1BA,IAAAC;AAAA,EACD;AAEO;AACN,SAAMC,IAAU;AAChB,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AACX,UAAA,IAAA,MAAA,2DAAA;AAED,SAAAA;;"}
+{"version":3,"file":"use-tabs-context.js","sources":["../../../src/components/tabs/use-tabs-context.ts"],"sourcesContent":["'use client'\n\nimport {\n\ttype MutableRefObject,\n\ttype MouseEvent,\n\ttype KeyboardEvent,\n\tcreateContext,\n\tuseContext,\n} from 'react'\n\ninterface TabsContextState {\n\ttabNodes: MutableRefObject<Array<HTMLButtonElement>>\n\tpanelNodes: MutableRefObject<Array<HTMLDivElement>>\n\ttabIds: Array<string>\n\tpanelIds: Array<string>\n\tselectedTabIndex: number\n\tonClick: (tabIndex: number, event: MouseEvent<HTMLButtonElement>) => void\n\tonKeyUp: (tabIndex: number, event: KeyboardEvent<HTMLButtonElement>) => void\n\tsize: 'medium' | 'large'\n\ttabsListRef: MutableRefObject<HTMLUListElement | null>\n}\n\nexport const TabsContext = createContext<TabsContextState | undefined>(\n\tundefined,\n)\n\nexport function useTabsContext(): TabsContextState {\n\tconst context = useContext(TabsContext)\n\tif (context === undefined) {\n\t\tthrow new Error('useTabsContext must be used within a TabsContext.Provider')\n\t}\n\treturn context\n}\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext"],"mappings":";;AAsB2B,MAC1BA,IAAAC;AAAA,EACD;AAEO;AACN,SAAMC,IAAU;AAChB,QAAIC,IAAYC,EAAWJ,CAAA;AAC1B,MAAAG,MAAU;AACX,UAAA,IAAA,MAAA,2DAAA;AAED,SAAAA;;"}