@telia/teddy 0.0.25 → 0.0.27

package/dist/assets/{sprite.5636ec8e-teddy.svg → sprite.269ba410-teddy.svg}

@@ -102,6 +102,9 @@
 <symbol fill="none" viewBox="0 0 24 25" id="share">
   <path fill="currentColor" fill-rule="evenodd" d="M18 4.4a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm-3.9 2.1a3.9 3.9 0 1 1 .892 2.483l-6.188 2.652a3.913 3.913 0 0 1 0 1.73l6.188 2.652a3.9 3.9 0 1 1-.796 1.617l-6.188-2.652a3.9 3.9 0 1 1 0-4.965l6.188-2.652A3.915 3.915 0 0 1 14.1 6.5ZM5 10.4a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Zm13 6a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2Z" clip-rule="evenodd"></path>
 </symbol>
+<symbol viewBox="0 0 24 24" fill="none" id="shortcut">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.36348 5.99998C8.36348 5.50292 8.76642 5.09998 9.26348 5.09998L17.2635 5.09998C17.7605 5.09998 18.1635 5.50292 18.1635 5.99998V14C18.1635 14.497 17.7605 14.9 17.2635 14.9C16.7664 14.9 16.3635 14.497 16.3635 14V8.17276L6.6364 17.8998C6.28493 18.2512 5.71508 18.2512 5.36361 17.8998C5.01214 17.5483 5.01214 16.9784 5.36361 16.627L15.0907 6.89998H9.26348C8.76642 6.89998 8.36348 6.49703 8.36348 5.99998Z" fill="currentColor"></path>
+</symbol>
 <symbol fill="none" viewBox="0 0 24 24" id="shuffle">
   <path fill="currentColor" fill-rule="evenodd" d="M18.844 4.625a.9.9 0 0 1 1.273 0l2.235 2.235a.9.9 0 0 1 0 1.273l-2.235 2.235a.9.9 0 1 1-1.273-1.272l.7-.7h-3.057l-1.98 1.98a.9.9 0 1 1-1.273-1.272l2.244-2.244a.9.9 0 0 1 .636-.263h3.43l-.7-.7a.9.9 0 0 1 0-1.272ZM1.47 7.502a.9.9 0 0 1 .9-.9h4.77a.9.9 0 0 1 .637.264L12.2 11.29a.892.892 0 0 1 .12.12l4.167 4.167h3.056l-.699-.7a.9.9 0 1 1 1.273-1.272l2.235 2.235a.9.9 0 0 1 0 1.273l-2.235 2.235a.9.9 0 1 1-1.273-1.272l.7-.7h-3.43a.9.9 0 0 1-.636-.263l-3.854-3.854-3.848 3.849a.9.9 0 0 1-.636.263H2.37a.9.9 0 0 1 0-1.8h4.397l3.584-3.584-3.584-3.585H2.369a.9.9 0 0 1-.9-.9Z" clip-rule="evenodd"></path>
 </symbol>

package/dist/components/accordion/accordion-indicator.cjs

@@ -4,12 +4,23 @@ const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("clsx");
 const React = require("react");
 const components_accordion_accordionRoot = require("./accordion-root.cjs");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
+const components_accordion_accordionItem = require("./accordion-item.cjs");
 const Indicator = React.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
-    const classes = clsx([components_accordion_accordionRoot.styles[`${components_accordion_accordionRoot.rootClassName}__indicator`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { "aria-hidden": true, name: "chevron-down", ...props, ref: forwardRef, className: classes, children });
+    var _a, _b;
+    const isOpen = (_a = React.useContext(components_accordion_accordionItem.ItemContext)) == null ? void 0 : _a.isOpen;
+    const variant = (_b = React.useContext(components_accordion_accordionRoot.RootContext)) == null ? void 0 : _b.variant;
+    const classes = clsx(
+      [components_accordion_accordionRoot.styles[`${components_accordion_accordionRoot.rootClassName}__indicator`]],
+      {
+        [components_accordion_accordionRoot.styles[`${components_accordion_accordionRoot.rootClassName}__indicator--rotate`]]: variant !== "info-area"
+      },
+      className
+    );
+    const icon = variant === "info-area" && isOpen ? "minus" : variant === "info-area" ? "info" : "chevron-down";
+    return /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { "aria-hidden": true, name: icon, ...props, ref: forwardRef, className: classes, children });
   }
 );
 Indicator.displayName = "Indicator";

package/dist/components/accordion/accordion-indicator.js

@@ -1,13 +1,24 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React__default from "react";
-import { s as styles, rootClassName } from "./accordion-root.js";
-import "../../assets/sprite.5636ec8e-teddy.svg";
+import { RootContext, s as styles, rootClassName } from "./accordion-root.js";
+import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";
+import { ItemContext } from "./accordion-item.js";
 const Indicator = React__default.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}__indicator`]], className);
-    return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, name: "chevron-down", ...props, ref: forwardRef, className: classes, children });
+    var _a, _b;
+    const isOpen = (_a = React__default.useContext(ItemContext)) == null ? void 0 : _a.isOpen;
+    const variant = (_b = React__default.useContext(RootContext)) == null ? void 0 : _b.variant;
+    const classes = clsx(
+      [styles[`${rootClassName}__indicator`]],
+      {
+        [styles[`${rootClassName}__indicator--rotate`]]: variant !== "info-area"
+      },
+      className
+    );
+    const icon = variant === "info-area" && isOpen ? "minus" : variant === "info-area" ? "info" : "chevron-down";
+    return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, name: icon, ...props, ref: forwardRef, className: classes, children });
   }
 );
 Indicator.displayName = "Indicator";

package/dist/components/accordion/accordion-item.cjs

@@ -22,11 +22,16 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
+const ItemContext = React.createContext({ isOpen: false });
 const Item = React.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
+    var _a;
     const classes = clsx([components_accordion_accordionRoot.styles[`${components_accordion_accordionRoot.rootClassName}__item`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { ...props, ref: forwardRef, className: classes, children });
+    const openValues = (_a = React.useContext(components_accordion_accordionRoot.RootContext)) == null ? void 0 : _a.value;
+    const isOpen = typeof openValues === "string" ? openValues === props.value : openValues == null ? void 0 : openValues.includes(props.value);
+    return /* @__PURE__ */ jsxRuntime.jsx(ItemContext.Provider, { value: { isOpen }, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { ...props, ref: forwardRef, className: classes, children }) });
   }
 );
 Item.displayName = "Item";
 exports.Item = Item;
+exports.ItemContext = ItemContext;

package/dist/components/accordion/accordion-item.d.ts

@@ -2,6 +2,9 @@ import { default as React } from 'react';
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 export type ItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+export declare const ItemContext: React.Context<{
+    isOpen: boolean | undefined;
+}>;
 /**
  * Contains all the parts of a collapsible section.
  */

package/dist/components/accordion/accordion-item.js

@@ -1,15 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React__default from "react";
-import { s as styles, rootClassName } from "./accordion-root.js";
+import { s as styles, rootClassName, RootContext } from "./accordion-root.js";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
+const ItemContext = React__default.createContext({ isOpen: false });
 const Item = React__default.forwardRef(
   ({ className, children, ...props }, forwardRef) => {
+    var _a;
     const classes = clsx([styles[`${rootClassName}__item`]], className);
-    return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ...props, ref: forwardRef, className: classes, children });
+    const openValues = (_a = React__default.useContext(RootContext)) == null ? void 0 : _a.value;
+    const isOpen = typeof openValues === "string" ? openValues === props.value : openValues == null ? void 0 : openValues.includes(props.value);
+    return /* @__PURE__ */ jsx(ItemContext.Provider, { value: { isOpen }, children: /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ...props, ref: forwardRef, className: classes, children }) });
   }
 );
 Item.displayName = "Item";
 export {
-  Item
+  Item,
+  ItemContext
 };

package/dist/components/accordion/accordion-root.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("clsx");
 const React = require("react");
 const AccordionPrimitive = require("@radix-ui/react-accordion");
+const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -21,36 +22,62 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
-const slideDown = "_slideDown_1seck_1";
-const slideUp = "_slideUp_1seck_1";
+const slideDown = "_slideDown_1u2y1_1";
+const slideUp = "_slideUp_1u2y1_1";
 const styles = {
-  "teddy-accordion--indented": "_teddy-accordion--indented_1seck_3",
-  "teddy-accordion__header": "_teddy-accordion__header_1seck_3",
-  "teddy-accordion__content": "_teddy-accordion__content_1seck_11",
-  "teddy-accordion--negative": "_teddy-accordion--negative_1seck_19",
-  "teddy-accordion__title": "_teddy-accordion__title_1seck_23",
-  "teddy-accordion__trigger": "_teddy-accordion__trigger_1seck_26",
-  "teddy-accordion__item": "_teddy-accordion__item_1seck_34",
-  "teddy-accordion": "_teddy-accordion_1seck_3",
-  "teddy-accordion__indicator": "_teddy-accordion__indicator_1seck_103",
+  "teddy-accordion--indented": "_teddy-accordion--indented_1u2y1_3",
+  "teddy-accordion__header": "_teddy-accordion__header_1u2y1_3",
+  "teddy-accordion__content": "_teddy-accordion__content_1u2y1_6",
+  "teddy-accordion--negative": "_teddy-accordion--negative_1u2y1_9",
+  "teddy-accordion__title": "_teddy-accordion__title_1u2y1_13",
+  "teddy-accordion__trigger": "_teddy-accordion__trigger_1u2y1_16",
+  "teddy-accordion__item": "_teddy-accordion__item_1u2y1_24",
+  "teddy-accordion--info-area": "_teddy-accordion--info-area_1u2y1_30",
+  "teddy-accordion": "_teddy-accordion_1u2y1_3",
+  "teddy-accordion__indicator": "_teddy-accordion__indicator_1u2y1_136",
+  "teddy-accordion__indicator--rotate": "_teddy-accordion__indicator--rotate_1u2y1_147",
   slideDown,
   slideUp
 };
 const rootClassName = "teddy-accordion";
+const RootContext = React.createContext({ value: void 0, variant: void 0 });
+const AccordionSingle = React.forwardRef(
+  ({ variant, value: valueProp, defaultValue, onValueChange = () => {
+  }, ...props }, forwardRef) => {
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(RootContext.Provider, { value: { value, variant }, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { ...props, type: "single", value, onValueChange: setValue, ref: forwardRef }) });
+  }
+);
+const AccordionMultiple = React.forwardRef(
+  ({ variant, value: valueProp, defaultValue, onValueChange = () => {
+  }, ...props }, forwardRef) => {
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(RootContext.Provider, { value: { value, variant }, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { ...props, type: "multiple", value, onValueChange: setValue, ref: forwardRef }) });
+  }
+);
 const Root = React.forwardRef(
   ({ className, variant = "default", children, indented = false, ...props }, forwardRef) => {
     const classes = clsx(
       styles[rootClassName],
       styles[`${rootClassName}--${variant}`],
       {
-        [styles[`${rootClassName}--indented`]]: indented
+        [styles[`${rootClassName}--indented`]]: indented || variant === "info-area"
       },
       className
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { ...props, ref: forwardRef, className: classes, children });
+    return props.type === "single" ? /* @__PURE__ */ jsxRuntime.jsx(AccordionSingle, { ...props, variant, ref: forwardRef, className: classes, children }) : /* @__PURE__ */ jsxRuntime.jsx(AccordionMultiple, { ...props, variant, ref: forwardRef, className: classes, children });
   }
 );
 Root.displayName = "Root";
 exports.Root = Root;
+exports.RootContext = RootContext;
 exports.rootClassName = rootClassName;
 exports.styles = styles;

package/dist/components/accordion/accordion-root.d.ts

@@ -2,13 +2,17 @@ import { default as React } from 'react';
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 export declare const rootClassName = "teddy-accordion";
-/** -------------------------------------------------------------------------------------------------
- * Root
- * -----------------------------------------------------------------------------------------------*/
-export type RootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+export declare const RootContext: React.Context<{
+    value: string | string[] | undefined;
+    variant: RootProps['variant'];
+}>;
+export type RootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & ({
     variant?: 'default' | 'negative';
     indented?: boolean;
-};
+} | {
+    variant: 'info-area';
+    indented?: never;
+});
 /**
  * The Accordion component is used to render the root element.
  */

package/dist/components/accordion/accordion-root.js

@@ -2,38 +2,65 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React__default from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-const slideDown = "_slideDown_1seck_1";
-const slideUp = "_slideUp_1seck_1";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+const slideDown = "_slideDown_1u2y1_1";
+const slideUp = "_slideUp_1u2y1_1";
 const styles = {
-  "teddy-accordion--indented": "_teddy-accordion--indented_1seck_3",
-  "teddy-accordion__header": "_teddy-accordion__header_1seck_3",
-  "teddy-accordion__content": "_teddy-accordion__content_1seck_11",
-  "teddy-accordion--negative": "_teddy-accordion--negative_1seck_19",
-  "teddy-accordion__title": "_teddy-accordion__title_1seck_23",
-  "teddy-accordion__trigger": "_teddy-accordion__trigger_1seck_26",
-  "teddy-accordion__item": "_teddy-accordion__item_1seck_34",
-  "teddy-accordion": "_teddy-accordion_1seck_3",
-  "teddy-accordion__indicator": "_teddy-accordion__indicator_1seck_103",
+  "teddy-accordion--indented": "_teddy-accordion--indented_1u2y1_3",
+  "teddy-accordion__header": "_teddy-accordion__header_1u2y1_3",
+  "teddy-accordion__content": "_teddy-accordion__content_1u2y1_6",
+  "teddy-accordion--negative": "_teddy-accordion--negative_1u2y1_9",
+  "teddy-accordion__title": "_teddy-accordion__title_1u2y1_13",
+  "teddy-accordion__trigger": "_teddy-accordion__trigger_1u2y1_16",
+  "teddy-accordion__item": "_teddy-accordion__item_1u2y1_24",
+  "teddy-accordion--info-area": "_teddy-accordion--info-area_1u2y1_30",
+  "teddy-accordion": "_teddy-accordion_1u2y1_3",
+  "teddy-accordion__indicator": "_teddy-accordion__indicator_1u2y1_136",
+  "teddy-accordion__indicator--rotate": "_teddy-accordion__indicator--rotate_1u2y1_147",
   slideDown,
   slideUp
 };
 const rootClassName = "teddy-accordion";
+const RootContext = React__default.createContext({ value: void 0, variant: void 0 });
+const AccordionSingle = React__default.forwardRef(
+  ({ variant, value: valueProp, defaultValue, onValueChange = () => {
+  }, ...props }, forwardRef) => {
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { value, variant }, children: /* @__PURE__ */ jsx(AccordionPrimitive.Root, { ...props, type: "single", value, onValueChange: setValue, ref: forwardRef }) });
+  }
+);
+const AccordionMultiple = React__default.forwardRef(
+  ({ variant, value: valueProp, defaultValue, onValueChange = () => {
+  }, ...props }, forwardRef) => {
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange
+    });
+    return /* @__PURE__ */ jsx(RootContext.Provider, { value: { value, variant }, children: /* @__PURE__ */ jsx(AccordionPrimitive.Root, { ...props, type: "multiple", value, onValueChange: setValue, ref: forwardRef }) });
+  }
+);
 const Root = React__default.forwardRef(
   ({ className, variant = "default", children, indented = false, ...props }, forwardRef) => {
     const classes = clsx(
       styles[rootClassName],
       styles[`${rootClassName}--${variant}`],
       {
-        [styles[`${rootClassName}--indented`]]: indented
+        [styles[`${rootClassName}--indented`]]: indented || variant === "info-area"
       },
       className
     );
-    return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { ...props, ref: forwardRef, className: classes, children });
+    return props.type === "single" ? /* @__PURE__ */ jsx(AccordionSingle, { ...props, variant, ref: forwardRef, className: classes, children }) : /* @__PURE__ */ jsx(AccordionMultiple, { ...props, variant, ref: forwardRef, className: classes, children });
   }
 );
 Root.displayName = "Root";
 export {
   Root,
+  RootContext,
   rootClassName,
   styles as s
 };

package/dist/components/badge/alert-badge.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+const components_badge_badge = require("./badge.cjs");
+const reactSlot = require("@radix-ui/react-slot");
+const AlertBadge = React.forwardRef(
+  ({ className, variant, asChild, ...props }, forwardRef) => {
+    const classes = clsx(
+      [components_badge_badge.styles[`${components_badge_badge.rootClassName}`], components_badge_badge.styles[`${components_badge_badge.rootClassName}--alert-badge`], components_badge_badge.styles[`${components_badge_badge.rootClassName}--${variant}`]],
+      className
+    );
+    const Comp = asChild ? reactSlot.Slot : "span";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props, ref: forwardRef, className: classes });
+  }
+);
+AlertBadge.displayName = "AlertBadge";
+exports.AlertBadge = AlertBadge;

package/dist/components/badge/alert-badge.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { BadgeProps } from './badge';
+
+type AlertBadgeProps = Omit<BadgeProps, 'hideIcon' | 'children'>;
+/**
+ * The Alert badge is used to indicate a status, like new notifications or an items availability.
+ */
+declare const AlertBadge: React.ForwardRefExoticComponent<AlertBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { AlertBadge };
+export type { AlertBadgeProps };

package/dist/components/badge/alert-badge.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+import { s as styles, rootClassName } from "./badge.js";
+import { Slot } from "@radix-ui/react-slot";
+const AlertBadge = React__default.forwardRef(
+  ({ className, variant, asChild, ...props }, forwardRef) => {
+    const classes = clsx(
+      [styles[`${rootClassName}`], styles[`${rootClassName}--alert-badge`], styles[`${rootClassName}--${variant}`]],
+      className
+    );
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(Comp, { ...props, ref: forwardRef, className: classes });
+  }
+);
+AlertBadge.displayName = "AlertBadge";
+export {
+  AlertBadge
+};

package/dist/components/badge/badge.cjs

@@ -4,17 +4,19 @@ const jsxRuntime = require("react/jsx-runtime");
 const clsx = require("clsx");
 const React = require("react");
 const reactSlot = require("@radix-ui/react-slot");
-require("../../assets/sprite.5636ec8e-teddy.svg");
+require("../../assets/sprite.269ba410-teddy.svg");
 const components_icon_icon = require("../icon/icon.cjs");
 const styles = {
-  "teddy-badge": "_teddy-badge_sg6ab_1",
-  "teddy-badge--attention": "_teddy-badge--attention_sg6ab_13",
-  "teddy-badge--special": "_teddy-badge--special_sg6ab_17",
-  "teddy-badge--neutral": "_teddy-badge--neutral_sg6ab_21",
-  "teddy-badge--information": "_teddy-badge--information_sg6ab_25",
-  "teddy-badge--success": "_teddy-badge--success_sg6ab_29",
-  "teddy-badge--warning": "_teddy-badge--warning_sg6ab_33",
-  "teddy-badge--error": "_teddy-badge--error_sg6ab_37"
+  "teddy-badge": "_teddy-badge_1fsdh_1",
+  "teddy-badge--counter-badge": "_teddy-badge--counter-badge_1fsdh_13",
+  "teddy-badge--alert-badge": "_teddy-badge--alert-badge_1fsdh_19",
+  "teddy-badge--attention": "_teddy-badge--attention_1fsdh_29",
+  "teddy-badge--special": "_teddy-badge--special_1fsdh_36",
+  "teddy-badge--neutral": "_teddy-badge--neutral_1fsdh_40",
+  "teddy-badge--information": "_teddy-badge--information_1fsdh_48",
+  "teddy-badge--success": "_teddy-badge--success_1fsdh_56",
+  "teddy-badge--warning": "_teddy-badge--warning_1fsdh_64",
+  "teddy-badge--error": "_teddy-badge--error_1fsdh_72"
 };
 const rootClassName = "teddy-badge";
 function getIcon(variant) {
@@ -41,3 +43,5 @@ const Badge = React.forwardRef(
 );
 Badge.displayName = "Badge";
 exports.Badge = Badge;
+exports.rootClassName = rootClassName;
+exports.styles = styles;

package/dist/components/badge/badge.d.ts

@@ -1,9 +1,10 @@
 import { default as React } from 'react';
 
+export declare const rootClassName = "teddy-badge";
 /** -------------------------------------------------------------------------------------------------
  * Badge
  * -----------------------------------------------------------------------------------------------*/
-type Variant = 'attention' | 'special' | 'neutral' | 'information' | 'success' | 'warning' | 'error';
+export type Variant = 'attention' | 'special' | 'neutral' | 'information' | 'success' | 'warning' | 'error';
 type BadgeProps = React.ComponentPropsWithoutRef<'span'> & {
     asChild?: boolean;
     variant: Variant;

package/dist/components/badge/badge.js

@@ -2,17 +2,19 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import React__default from "react";
 import { Slottable, Slot } from "@radix-ui/react-slot";
-import "../../assets/sprite.5636ec8e-teddy.svg";
+import "../../assets/sprite.269ba410-teddy.svg";
 import { Icon } from "../icon/icon.js";
 const styles = {
-  "teddy-badge": "_teddy-badge_sg6ab_1",
-  "teddy-badge--attention": "_teddy-badge--attention_sg6ab_13",
-  "teddy-badge--special": "_teddy-badge--special_sg6ab_17",
-  "teddy-badge--neutral": "_teddy-badge--neutral_sg6ab_21",
-  "teddy-badge--information": "_teddy-badge--information_sg6ab_25",
-  "teddy-badge--success": "_teddy-badge--success_sg6ab_29",
-  "teddy-badge--warning": "_teddy-badge--warning_sg6ab_33",
-  "teddy-badge--error": "_teddy-badge--error_sg6ab_37"
+  "teddy-badge": "_teddy-badge_1fsdh_1",
+  "teddy-badge--counter-badge": "_teddy-badge--counter-badge_1fsdh_13",
+  "teddy-badge--alert-badge": "_teddy-badge--alert-badge_1fsdh_19",
+  "teddy-badge--attention": "_teddy-badge--attention_1fsdh_29",
+  "teddy-badge--special": "_teddy-badge--special_1fsdh_36",
+  "teddy-badge--neutral": "_teddy-badge--neutral_1fsdh_40",
+  "teddy-badge--information": "_teddy-badge--information_1fsdh_48",
+  "teddy-badge--success": "_teddy-badge--success_1fsdh_56",
+  "teddy-badge--warning": "_teddy-badge--warning_1fsdh_64",
+  "teddy-badge--error": "_teddy-badge--error_1fsdh_72"
 };
 const rootClassName = "teddy-badge";
 function getIcon(variant) {
@@ -39,5 +41,7 @@ const Badge = React__default.forwardRef(
 );
 Badge.displayName = "Badge";
 export {
-  Badge
+  Badge,
+  rootClassName,
+  styles as s
 };

package/dist/components/badge/counter-badge.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+const components_badge_badge = require("./badge.cjs");
+const reactSlot = require("@radix-ui/react-slot");
+const CounterBadge = React.forwardRef(
+  ({ className, variant, asChild, ...props }, forwardRef) => {
+    const classes = clsx(
+      [components_badge_badge.styles[`${components_badge_badge.rootClassName}`], components_badge_badge.styles[`${components_badge_badge.rootClassName}--counter-badge`], components_badge_badge.styles[`${components_badge_badge.rootClassName}--${variant}`]],
+      className
+    );
+    const Comp = asChild ? reactSlot.Slot : "span";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props, ref: forwardRef, className: classes });
+  }
+);
+CounterBadge.displayName = "CounterBadge";
+exports.CounterBadge = CounterBadge;

package/dist/components/badge/counter-badge.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { BadgeProps } from './badge';
+
+type CounterBadgeProps = Omit<BadgeProps, 'hideIcon'>;
+/**
+ * The Alert badge is used to indicate a numeric value, commonly used for Cart items.
+ */
+declare const CounterBadge: React.ForwardRefExoticComponent<CounterBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { CounterBadge };
+export type { CounterBadgeProps };

package/dist/components/badge/counter-badge.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+import { s as styles, rootClassName } from "./badge.js";
+import { Slot } from "@radix-ui/react-slot";
+const CounterBadge = React__default.forwardRef(
+  ({ className, variant, asChild, ...props }, forwardRef) => {
+    const classes = clsx(
+      [styles[`${rootClassName}`], styles[`${rootClassName}--counter-badge`], styles[`${rootClassName}--${variant}`]],
+      className
+    );
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(Comp, { ...props, ref: forwardRef, className: classes });
+  }
+);
+CounterBadge.displayName = "CounterBadge";
+export {
+  CounterBadge
+};

package/dist/components/badge/index.cjs

@@ -1,4 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_badge_badge = require("./badge.cjs");
+const components_badge_alertBadge = require("./alert-badge.cjs");
+const components_badge_counterBadge = require("./counter-badge.cjs");
 exports.Badge = components_badge_badge.Badge;
+exports.AlertBadge = components_badge_alertBadge.AlertBadge;
+exports.CounterBadge = components_badge_counterBadge.CounterBadge;

package/dist/components/badge/index.d.ts

@@ -1,2 +1,6 @@
 export { Badge } from './badge';
 export type { BadgeProps } from './badge';
+export { AlertBadge } from './alert-badge';
+export type { AlertBadgeProps } from './alert-badge';
+export { CounterBadge } from './counter-badge';
+export type { CounterBadgeProps } from './counter-badge';

package/dist/components/badge/index.js

@@ -1,4 +1,8 @@
 import { Badge } from "./badge.js";
+import { AlertBadge } from "./alert-badge.js";
+import { CounterBadge } from "./counter-badge.js";
 export {
-  Badge
+  AlertBadge,
+  Badge,
+  CounterBadge
 };

package/dist/components/button/button.cjs

@@ -23,32 +23,33 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const fadeInAnimation = "_fadeInAnimation_124k8_1";
-const scaleInAnimation = "_scaleInAnimation_124k8_1";
+const fadeInAnimation = "_fadeInAnimation_aswkh_1";
+const scaleInAnimation = "_scaleInAnimation_aswkh_1";
 const styles = {
-  "teddy-button": "_teddy-button_124k8_18",
-  "teddy-button--sm": "_teddy-button--sm_124k8_53",
-  "teddy-button--icon-only": "_teddy-button--icon-only_124k8_56",
-  "teddy-button--md": "_teddy-button--md_124k8_59",
-  "teddy-button--lg": "_teddy-button--lg_124k8_65",
-  "teddy-button--full-width": "_teddy-button--full-width_124k8_71",
-  "teddy-button--primary": "_teddy-button--primary_124k8_74",
-  "teddy-button--disabled": "_teddy-button--disabled_124k8_78",
-  "teddy-button--primary-negative": "_teddy-button--primary-negative_124k8_84",
-  "teddy-button--secondary": "_teddy-button--secondary_124k8_96",
-  "teddy-button--secondary-negative": "_teddy-button--secondary-negative_124k8_107",
-  "teddy-button--expressive": "_teddy-button--expressive_124k8_118",
-  "teddy-button--expressive-negative": "_teddy-button--expressive-negative_124k8_128",
-  "teddy-button--negative": "_teddy-button--negative_124k8_140",
-  "teddy-button--destructive": "_teddy-button--destructive_124k8_147",
-  "teddy-button--destructive-negative": "_teddy-button--destructive-negative_124k8_157",
-  "teddy-button--tertiary-purple": "_teddy-button--tertiary-purple_124k8_167",
-  "teddy-button--tertiary-purple-negative": "_teddy-button--tertiary-purple-negative_124k8_180",
-  "teddy-button--text-negative": "_teddy-button--text-negative_124k8_195",
-  "teddy-button--text": "_teddy-button--text_124k8_195",
-  "teddy-button__loading": "_teddy-button__loading_124k8_242",
+  "teddy-button": "_teddy-button_aswkh_18",
+  "teddy-button--sm": "_teddy-button--sm_aswkh_53",
+  "teddy-button--icon-only": "_teddy-button--icon-only_aswkh_56",
+  "teddy-button--md": "_teddy-button--md_aswkh_59",
+  "teddy-button--lg": "_teddy-button--lg_aswkh_65",
+  "teddy-button--full-width": "_teddy-button--full-width_aswkh_71",
+  "teddy-button--primary": "_teddy-button--primary_aswkh_74",
+  "teddy-button--disabled": "_teddy-button--disabled_aswkh_78",
+  "teddy-button--primary-negative": "_teddy-button--primary-negative_aswkh_84",
+  "teddy-button--secondary": "_teddy-button--secondary_aswkh_96",
+  "teddy-button--secondary-negative": "_teddy-button--secondary-negative_aswkh_107",
+  "teddy-button--expressive": "_teddy-button--expressive_aswkh_118",
+  "teddy-button--expressive-negative": "_teddy-button--expressive-negative_aswkh_128",
+  "teddy-button--negative": "_teddy-button--negative_aswkh_140",
+  "teddy-button--destructive": "_teddy-button--destructive_aswkh_147",
+  "teddy-button--destructive-negative": "_teddy-button--destructive-negative_aswkh_157",
+  "teddy-button--tertiary-purple": "_teddy-button--tertiary-purple_aswkh_167",
+  "teddy-button--tertiary-purple-negative": "_teddy-button--tertiary-purple-negative_aswkh_180",
+  "teddy-button--list-item": "_teddy-button--list-item_aswkh_195",
+  "teddy-button--text-negative": "_teddy-button--text-negative_aswkh_214",
+  "teddy-button--text": "_teddy-button--text_aswkh_214",
+  "teddy-button__loading": "_teddy-button__loading_aswkh_261",
   fadeInAnimation,
-  "teddy-button__spinner": "_teddy-button__spinner_124k8_253",
+  "teddy-button__spinner": "_teddy-button__spinner_aswkh_272",
   scaleInAnimation
 };
 const rootClassName = "teddy-button";
@@ -64,7 +65,8 @@ const variants = [
   "destructive-negative",
   "tertiary-purple-negative",
   "text-negative",
-  "expressive-negative"
+  "expressive-negative",
+  "list-item"
 ];
 const Root = React__namespace.forwardRef((args, ref) => {
   const {

package/dist/components/button/button.d.ts

@@ -1,6 +1,6 @@
 import { ChildrenLayoutProps } from '../../utils/generate-styling';
 import * as React from 'react';
-declare const variants: readonly ["primary", "secondary", "destructive", "tertiary-purple", "text", "expressive", "primary-negative", "secondary-negative", "destructive-negative", "tertiary-purple-negative", "text-negative", "expressive-negative"];
+declare const variants: readonly ["primary", "secondary", "destructive", "tertiary-purple", "text", "expressive", "primary-negative", "secondary-negative", "destructive-negative", "tertiary-purple-negative", "text-negative", "expressive-negative", "list-item"];
 export type Variant = (typeof variants)[number];
 declare const sizes: readonly ["sm", "md", "lg"];
 export type Size = (typeof sizes)[number];
@@ -18,7 +18,7 @@ type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-lab
     ['aria-label']?: string;
 });
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>> & {
-    variants: readonly ["primary", "secondary", "destructive", "tertiary-purple", "text", "expressive", "primary-negative", "secondary-negative", "destructive-negative", "tertiary-purple-negative", "text-negative", "expressive-negative"];
+    variants: readonly ["primary", "secondary", "destructive", "tertiary-purple", "text", "expressive", "primary-negative", "secondary-negative", "destructive-negative", "tertiary-purple-negative", "text-negative", "expressive-negative", "list-item"];
 };
 export { Button };
 export type { ButtonProps };