@narmi/design_system 4.5.3 → 4.6.1

package/dist/tokens/css/rgbColors.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Jan 2025 16:39:48 GMT
+ * Generated on Tue, 28 Jan 2025 19:54:50 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Jan 2025 16:39:48 GMT
+ * Generated on Tue, 28 Jan 2025 19:54:50 GMT
  */
 
 :root {

package/dist/tokens/js/colors.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Jan 2025 16:39:48 GMT
+ * Generated on Tue, 28 Jan 2025 19:54:50 GMT
  */
 
 module.exports = {

package/dist/tokens/js/manifest.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Jan 2025 16:39:48 GMT
+ * Generated on Tue, 28 Jan 2025 19:54:50 GMT
  */
 
 module.exports = {

package/dist/tokens/js/reactNativeWeb.js

@@ -1,6 +1,6 @@
 /**
 * DO NOT EDIT
-* Generated by style-dictionary on Mon Jan 13 2025 16:39:48 GMT+0000 (Coordinated Universal Time)
+* Generated by style-dictionary on Tue Jan 28 2025 19:54:50 GMT+0000 (Coordinated Universal Time)
 * github.com/narmi/design_system/
 */
 

package/dist/types/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,UAAU,WAAW;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACxE,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;;OAKG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;IACxB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,MAAM,kIAeT,WAAW,4CA0Eb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,UAAU,WAAW;IACnB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACxE,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;;OAKG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACpB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;IACxB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,MAAM,kIAeT,WAAW,4CAwEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/types/Checkbox/index.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+interface CheckboxProps {
+    /** Content of `label` element */
+    label?: string;
+    /** Markdown to use in place of the `label` field */
+    markdownLabel?: string;
+    /** Change callback invoked when the value of the `input` changes */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** `id` attribute of `input` */
+    id?: string | number;
+    /** `name` attribute of `input` */
+    name?: string;
+    /**
+     * ⚠️ DEPRECATED
+     *
+     * Uncontrolled Checkbox props will be removed in a future release.
+     * Use `checked` instead to use Checkbox as a fully controlled input.
+     */
+    defaultChecked?: boolean;
+    /** Sets the checkbox checked value */
+    checked?: boolean;
+    /**
+     * Checkbox renders in
+     * [indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)
+     * when `true`.
+     */
+    indeterminate?: boolean;
+    /**
+     * Checkbox renders as disabled and ignores click/check events.
+     */
+    disabled?: boolean;
+    /** Sets the `value` attribute of the `input` */
+    value?: string;
+    /** Sets whether the checkbox has an error. To be used with multiple checkboxes */
+    hasError?: boolean;
+    /** Text of error message to display under the checkbox */
+    error?: string;
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+    /**
+     * `normal` - visually matches a checkbox input
+     *
+     * `condensed` - like `normal`, but without added top margin when there are multiple checkboxes
+     *
+     * `card` - visually present as a toggleable card
+     */
+    kind?: "normal" | "condensed" | "card" | "table";
+}
+/**
+ * Narmi styled checkbox with built-in label.
+ */
+declare const Checkbox: ({ label, markdownLabel, onChange, id, name, defaultChecked, checked, disabled, indeterminate, value, hasError, error, kind, testId, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,UAAU,aAAa;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;CAClD;AAED;;GAEG;AACH,QAAA,MAAM,QAAQ,kJAgBX,aAAa,4CA0Gf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/ContentCard/index.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+interface ContentCardProps {
+    /** Accepts any content as children */
+    children: React.ReactNode;
+    /**
+     * Amount of padding to add on all sides of card.
+     * For custom padding control, use `none` and compose your own element(s)
+     * in ContentCard children.
+     */
+    paddingSize?: "xs" | "s" | "m" | "l" | "xl" | "none";
+    /**
+     * Kind of card to render.
+     *
+     * `plain`: flat, rounded rect
+     *
+     * `elevated`: rounded rect with shadow
+     *
+     * `toggle`: toggle button (checkbox-like)
+     *
+     * `button`: action button (button-like)
+     *
+     * `bordered`: flat, rounded rect with border
+     */
+    kind?: "plain" | "elevated" | "toggle" | "button" | "bordered" | "interactive";
+    /**
+     * Amount of border radius to add on all sides of card.
+     */
+    radiusSize?: "s" | "m" | "l";
+    onClick?: () => void;
+    /**
+     * Only applicable for `toggle` type.
+     * Renders card in visually selected state with appropriate attributes.
+     */
+    isSelected?: boolean;
+    /**
+     * Only applicable for `toggle` type.
+     * Renders card in visually selected state with appropriate attributes.
+     */
+    testId?: string;
+}
+/**
+ * Narmi style content containers, with support for rendering as an interactive button.
+ */
+declare const ContentCard: {
+    ({ kind, paddingSize, onClick, isSelected, children, testId, radiusSize, }: ContentCardProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        onClick: (props: any, propName: any) => Error;
+    };
+};
+export default ContentCard;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ContentCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ContentCard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,gBAAgB;IACxB,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;IACrD;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EACD,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,aAAa,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW;gFAQd,gBAAgB;;;;CAyClB,CAAC;AA4BF,eAAe,WAAW,CAAC"}

package/dist/types/LoadingSkeleton/index.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+interface LoadingSkeletonProps {
+    /** Loadable content area - will render normally unless `isLoading` is true. */
+    children?: React.ReactNode;
+    /** When `true`, the child content is replaced by the skeleton imitation. */
+    isLoading?: boolean;
+    /** The mask type that best represents the content. */
+    content?: "paragraph" | "headerText";
+    /**
+     * Only applies if `content` prop is set to `paragraph`.
+     * The number of lines to be shown by the skeleton.
+     */
+    lines?: number;
+    /**
+     * Only applies if `content` prop is set to `paragraph`.
+     * When `true`, a skeletal title row will be shown above the first line.
+     */
+    showTitle?: boolean;
+    /**
+     * Only applies if `content` prop is set to `headerText`.
+     * The size of the skeletal header text.
+     */
+    size?: "small" | "medium" | "large";
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+}
+/**
+ * Used to mask a limited block of loadable content. When `isLoading` is set to true,
+ * the content area will be replaced by a shadowed, skeletal imitation of the
+ * pending content.
+ */
+declare const LoadingSkeleton: ({ children, isLoading, content, lines, showTitle, size, testId, }: LoadingSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default LoadingSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/LoadingSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/LoadingSkeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,oBAAoB;IAC5B,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,OAAO,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IACrC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,QAAA,MAAM,eAAe,sEAQlB,oBAAoB,4CAgBtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/types/Radio/index.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+interface RadioProps {
+    /** The `name` attribute for radio input. Use this to group radio sets. */
+    name: string;
+    /** The `value attribute for the radio input */
+    value: string;
+    /** Custom label for the Radio input*/
+    children: React.ReactNode | string;
+    /**
+     * Optional callback when the Radio is checked by a user.
+     * Called with the `value` of the currently checked input
+     */
+    onCheck: (value: string) => void;
+    /**
+     * Optional prop to set the Radio to checked, making the Radio fully controlled.
+     * When fully controlled track the checked state by value in the parent component.
+     * e.g. `checked={currentlyCheckedValue === thisRadioValue}`
+     */
+    checked?: boolean;
+    /** Disables the input when `true` */
+    isDisabled?: boolean;
+    /** Error text */
+    error?: string;
+}
+/**
+ * Single radio input that takes arbitrary JSX children as a label.
+ */
+declare const Radio: ({ name, value, isDisabled, onCheck, checked, children, error, }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export default Radio;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,UAAU;IAClB,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,KAAK,oEAQR,UAAU,4CA+BZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/RadioButtons/index.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+type OptionType = {
+    value: string;
+    details?: string;
+} | string;
+interface RadioButtonsProps {
+    /** Map of label strings to input values
+     *
+     * ```
+     * type OptionType = {
+     *       value: string;
+     *       details?: string;
+     *     }
+     *   | string;
+     * ```
+     * */
+    options: Record<string, OptionType>;
+    /** name of radiogroup */
+    name: string;
+    /** initially selected option by input value (uncontrolled) */
+    initialValue?: unknown;
+    /**
+     * selected option by input value (fully controlled)
+     * When passing a `value` prop, you must use the `onChange`
+     * handler to update the `value`
+     */
+    value?: string;
+    /** change callback invoked with input value */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * `normal` - display input and label normally
+     *
+     * `card` - display input and label as a toggleable card
+     *
+     * `input-card` - display toggleable card with a faux radio input
+     *
+     * `checkmark` - uses a checkmark icon instead of a faux radio
+     */
+    kind?: "normal" | "row" | "row-start" | "card" | "input-card" | "checkmark";
+    /**
+     * Error message. When passed, the `error` prop will
+     * render the radio group in an error state.
+     */
+    error?: string;
+    /**
+     * Always show details. When `true`, the details will
+     * always be shown, regardless of if an radio button is selected.
+     * When `false`, the details will only be shown when a radio
+     * button is selected. Defaults to `false`
+     */
+    alwaysShowDetails?: boolean;
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+}
+/**
+The Narmi RadioButtons component expects an "options" Prop, which is an object where the keys are the radiobutton
+labels and the values are the radiobutton values. An "initialvalue" Prop can be passed to set a default checked
+radiobutton.
+```
+  options={{
+    "First Label": { value: "firstValue", details: "This is the explanation of the firstValue" },
+    "Second Label": { value: "secondValue", details: "This is the explanation of the secondValue" }
+  }
+```
+
+The other options configuration without details would be:
+```
+  options={{ "First Label": "firstValue", "Second Label": "secondValue" }}
+```
+
+*/
+declare const RadioButtons: ({ options, name, initialValue, value, kind, onChange, testId, error, alwaysShowDetails, ...containerProps }: RadioButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioButtons;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/RadioButtons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioButtons/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,KAAK,UAAU,GACX;IACE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,GACD,MAAM,CAAC;AAEX,UAAU,iBAAiB;IACzB;;;;;;;;;SASK;IACL,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACpC,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,CAAC;IAC5E;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;EAgBE;AACF,QAAA,MAAM,YAAY,gHAWf,iBAAiB,4CA2GnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/types/Tabs/Arrow.d.ts

@@ -0,0 +1,8 @@
+interface ArrowProps {
+    direction: string;
+    onClick?: () => void;
+    show?: boolean;
+}
+declare const Arrow: ({ direction, onClick, show }: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+export default Arrow;
+//# sourceMappingURL=Arrow.d.ts.map

package/dist/types/Tabs/Arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrow.d.ts","sourceRoot":"","sources":["../../../src/Tabs/Arrow.tsx"],"names":[],"mappings":"AAKA,UAAU,UAAU;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,QAAA,MAAM,KAAK,iCAAkC,UAAU,4CAyBtD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/Tabs/TabsList.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface TabsListProps {
+    /** Children must be of type `Tabs.Tab` */
+    children: React.ReactNode;
+    /**
+     * Amount of padding to apply on the x axis to indent tabs
+     * from edges of the `Tabs.Panel`
+     * */
+    xPadding?: "xxs" | "xs" | "s" | "m" | "l" | "xl" | "none";
+}
+declare const TabsList: ({ children, xPadding }: TabsListProps) => import("react/jsx-runtime").JSX.Element;
+export default TabsList;
+//# sourceMappingURL=TabsList.d.ts.map

package/dist/types/Tabs/TabsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../src/Tabs/TabsList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAM1E,MAAM,WAAW,aAAa;IAC5B,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;SAGK;IACL,QAAQ,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;CAC3D;AAED,QAAA,MAAM,QAAQ,2BAAqC,aAAa,4CAqI/D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/Tabs/TabsPanel.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface TabsPanelProps {
+    /** The content of the tab panel (any node type) */
+    children: React.ReactNode;
+    /** String ID used to link the `Tabs.Panel` to a `Tabs.Tab` */
+    tabId: string;
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+}
+declare const TabsPanel: ({ children, tabId, testId }: TabsPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default TabsPanel;
+//# sourceMappingURL=TabsPanel.d.ts.map

package/dist/types/Tabs/TabsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanel.d.ts","sourceRoot":"","sources":["../../../src/Tabs/TabsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,SAAS,gCAAiC,cAAc,4CA4B7D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/Tabs/TabsTab.d.ts

@@ -0,0 +1,11 @@
+export interface TabsTabProps {
+    /** Label of the tab button */
+    label: string;
+    /** String ID used to link the `Tabs.Tab` to a `Tabs.Panel` */
+    tabId: string;
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+}
+declare const TabsTab: ({ label, tabId, testId }: TabsTabProps) => import("react/jsx-runtime").JSX.Element;
+export default TabsTab;
+//# sourceMappingURL=TabsTab.d.ts.map

package/dist/types/Tabs/TabsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTab.d.ts","sourceRoot":"","sources":["../../../src/Tabs/TabsTab.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IAC3B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,OAAO,6BAA8B,YAAY,4CAyCtD,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/Tabs/context.d.ts

@@ -0,0 +1,14 @@
+interface TabsContextProps {
+    tabIds: string[];
+    setTabIds: (ids: string[]) => void;
+    currentIndex: number;
+    hasPanels: boolean;
+    setHasPanels: (hasPanels: boolean) => void;
+    changeTabs: (index: string) => void;
+    tabsListRef: React.RefObject<HTMLElement>;
+    isResponsive: boolean;
+    setIsResponsive: (isResponsive: boolean) => void;
+}
+declare const TabsContext: import("react").Context<TabsContextProps>;
+export default TabsContext;
+//# sourceMappingURL=context.d.ts.map

package/dist/types/Tabs/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/Tabs/context.ts"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAEnC,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE3C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,QAAA,MAAM,WAAW,2CAmBf,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/types/Tabs/index.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+interface TabsProps {
+    /**
+     * Direct children of `Tabs` should be one of:
+     * `Tabs.List` or `Tabs.Panel`
+     */
+    children: React.ReactNode;
+    /** Sets _default_ tab selection by index in source order */
+    defaultSelectedIndex?: number;
+    /**
+     * Sets selected tab by index, making Tabs **fully controlled**.
+     * When using this prop, you must use the `onTabChange` callback
+     * to update the value of this prop to update the selected tab.
+     */
+    selectedIndex?: number;
+    /** Callback invoked with the index of the tab the user is moving selection to */
+    onTabChange?: (index: number) => void;
+    /** Shows bottom border when `true` */
+    hasBorder?: boolean;
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+}
+/**
+ * Component that handles tabs and tab panels based on WAI-ARIA [best practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel)
+ * for the "tabs" design pattern.
+ *
+ * The `Tabs` component manages its own state, changing the visible tab panel based
+ * on user events. Use the `onTabChange` callback to add any custom behaviors.
+ */
+declare const Tabs: {
+    ({ children, defaultSelectedIndex, selectedIndex, onTabChange, hasBorder, testId, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    List: ({ children, xPadding }: import("./TabsList").TabsListProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ label, tabId, testId }: import("./TabsTab").TabsTabProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, tabId, testId }: import("./TabsPanel").TabsPanelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Tabs;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tabs/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAQ3D,UAAU,SAAS;IACjB;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,QAAA,MAAM,IAAI;yFAOP,SAAS;;;;CAoEX,CAAC;AAMF,eAAe,IAAI,CAAC"}

package/dist/types/index.d.ts

@@ -5,19 +5,23 @@ import Alert from "./Alert";
 import AutocompleteModal from "./AutocompleteModal";
 import Avatar from "./Avatar";
 import Button from "./Button";
+import ContentCard from "./ContentCard";
+import Checkbox from "./Checkbox";
 import ContextMenu from "./ContextMenu";
 import Dialog from "./Dialog";
 import DisabledShim from "./DisabledShim";
+import Radio from "./Radio";
+import RadioButtons from "./RadioButtons";
 import Row from "./Row";
 import SeparatorList from "./SeparatorList";
 import Slider from "./Slider";
 import Snackbar from "./Snackbar";
+import LoadingSkeleton from "./LoadingSkeleton";
+import Tabs from "./Tabs";
 import Tooltip from "./Tooltip";
 /**
  * Untyped Components
  */
-declare const Checkbox: any;
-declare const ContentCard: any;
 declare const CollapsibleCard: any;
 declare const Combobox: any;
 declare const DateInput: any;
@@ -30,18 +34,15 @@ declare const FormSection: any;
 declare const IconButton: any;
 declare const Input: any;
 declare const LoadingShim: any;
-declare const LoadingSkeleton: any;
 declare const MenuButton: any;
 declare const MultiSelect: any;
 declare const Pagination: any;
 declare const PlainButton: any;
 declare const ProgressBar: any;
 declare const Popover: any;
-declare const RadioButtons: any;
 declare const ResponsiveFlex: any;
 declare const Select: any;
 declare const Sidebar: any;
-declare const Tabs: any;
 declare const Tag: any;
 declare const TextInput: any;
 declare const TimelineEvent: any;
@@ -53,5 +54,5 @@ declare const useLockBodyScroll: any;
 declare const formatNumber: any;
 declare const formatDate: any;
 export * from "./types/Icon.types";
-export { AutocompleteModal, Avatar, Button, ContextMenu, DisabledShim, Row, SeparatorList, Slider, Snackbar, Alert, Checkbox, ContentCard, CollapsibleCard, Combobox, DateInput, Dialog, Drawer, Dropdown, DropdownTrigger, Error, FieldToken, FormSection, IconButton, Input, LoadingShim, LoadingSkeleton, MenuButton, MultiSelect, Pagination, PlainButton, ProgressBar, Popover, RadioButtons, ResponsiveFlex, Select, Sidebar, Tabs, Tag, TextInput, TimelineEvent, Toggle, TokenInput, Tooltip, TruncatedAccount, useBreakpoints, useLockBodyScroll, formatNumber, formatDate, };
+export { AutocompleteModal, Avatar, Button, ContentCard, ContextMenu, Checkbox, DisabledShim, Radio, RadioButtons, Row, SeparatorList, Slider, Snackbar, Alert, CollapsibleCard, Combobox, DateInput, Dialog, Drawer, Dropdown, DropdownTrigger, Error, FieldToken, FormSection, IconButton, Input, LoadingShim, LoadingSkeleton, MenuButton, MultiSelect, Pagination, PlainButton, ProgressBar, Popover, ResponsiveFlex, Select, Sidebar, Tabs, Tag, TextInput, TimelineEvent, Toggle, TokenInput, Tooltip, TruncatedAccount, useBreakpoints, useLockBodyScroll, formatNumber, formatDate, };
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@narmi/design_system",
-  "version": "4.5.3",
+  "version": "4.6.1",
   "description": "⚡ A consistent look-and-feel and extensible interface for Narmi experiences 🔥",
   "main": "dist/index.js",
   "files": [
@@ -46,20 +46,23 @@
     "@babel/preset-typescript": "^7.23.2",
     "@commitlint/cli": "^19",
     "@commitlint/config-conventional": "^19.2.2",
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/mdx": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@semantic-release/changelog": "^6.0.0",
     "@semantic-release/git": "^10.0.0",
-    "@storybook/addon-a11y": "^7.5.2",
-    "@storybook/addon-actions": "^7.5.2",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/addon-mdx-gfm": "^7.5.2",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-webpack5": "^7.5.2",
-    "@storybook/theming": "^7.5.2",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.1.2",
+    "@storybook/addon-a11y": "^8.6.0-alpha.0",
+    "@storybook/addon-actions": "^8.6.0-alpha.0",
+    "@storybook/addon-essentials": "^8.6.0-alpha.0",
+    "@storybook/addon-links": "^8.6.0-alpha.0",
+    "@storybook/addon-mdx-gfm": "^8.6.0-alpha.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/manager-api": "^8.6.0-alpha.0",
+    "@storybook/preview-api": "^8.6.0-alpha.0",
+    "@storybook/react": "^8.6.0-alpha.0",
+    "@storybook/react-webpack5": "^8.6.0-alpha.0",
+    "@storybook/theming": "^8.6.0-alpha.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/jest": "^27.0.2",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
@@ -90,13 +93,13 @@
     "prettier": "^3.2.5",
     "pretty-quick": "^4",
     "prop-types": "^15.7.2",
-    "react": "^16",
+    "react": "^18.3.1",
     "react-docgen-typescript-plugin": "^1.0.5",
-    "react-dom": "^16",
+    "react-dom": "^18.3.1",
     "sass": "^1.45.0",
     "sass-loader": "^12.1.0",
     "semantic-release": "^19.0.0",
-    "storybook": "^7.5.2",
+    "storybook": "^8.6.0-alpha.0",
     "style-dictionary": "^3.9.2",
     "style-loader": "^0.23.1",
     "tinycolor2": "^1.4.2",