@telia/teddy 0.0.59 → 0.0.60

package/dist/components/card/card-button.cjs

@@ -15,7 +15,7 @@ function getButtonVariant(variant) {
   }
 }
 const Button = React.forwardRef(
-  ({ className, iconOnly = false, ...props }, forwardRef) => {
+  ({ className, iconOnly, ...props }, forwardRef) => {
     const context = React.useContext(components_card_card.RootContext);
     const classes = clsx(
       [components_card_card.styles[`${components_card_card.rootClassName}__button`]],

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

@@ -1,35 +1,9 @@
 import { default as React } from 'react';
-import { Button as PrimitiveButton } from '../button';
+import { ButtonProps as PrimitiveButtonProps } from '../button';
 
-export type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'variant'> & {
-    variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
-};
+export type ButtonProps = PrimitiveButtonProps;
 /**
  * The button element is used when you want a trigger in the card
  * When this card button element is used, the entire card is clickable
  */
-export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-} & {
-    asChild?: boolean | undefined;
-    loading?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-} & {
-    iconOnly: true;
-    "aria-label": string;
-} & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-} & {
-    asChild?: boolean | undefined;
-    loading?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-} & {
-    iconOnly?: false | undefined;
-    "aria-label"?: string | undefined;
-} & React.RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
-    variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
-} & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<PrimitiveButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/card/card-button.js

@@ -13,7 +13,7 @@ function getButtonVariant(variant) {
   }
 }
 const Button = React__default.forwardRef(
-  ({ className, iconOnly = false, ...props }, forwardRef) => {
+  ({ className, iconOnly, ...props }, forwardRef) => {
     const context = React__default.useContext(RootContext);
     const classes = clsx(
       [styles[`${rootClassName}__button`]],

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

@@ -10,31 +10,7 @@ import { FooterProps } from './card-footer';
 
 export declare const Card: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
     Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
-    Button: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-        display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-    } & {
-        asChild?: boolean | undefined;
-        loading?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-    } & {
-        iconOnly: true;
-        "aria-label": string;
-    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
-        display?: import('../../utils/generate-styling').DisplayChildren | undefined;
-    } & {
-        asChild?: boolean | undefined;
-        loading?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-    } & {
-        iconOnly?: false | undefined;
-        "aria-label"?: string | undefined;
-    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
-        variant?: "text" | "text-negative" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "expressive-negative" | undefined;
-    } & import('react').RefAttributes<HTMLButtonElement>>;
+    Button: import('react').ForwardRefExoticComponent<import('..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
     Content: import('react').ForwardRefExoticComponent<ContentProps & import('react').RefAttributes<HTMLDivElement>>;
     Illustration: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         inset?: "all" | "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;

package/dist/components/icon/icon.cjs

@@ -4,15 +4,15 @@ const jsxRuntime = require("react/jsx-runtime");
 const iconsHref = require("../../assets/sprite.269ba410-teddy.svg");
 const clsx = require("clsx");
 const styles = {
-  "teddy-icon": "_teddy-icon_1rwgf_2",
-  "teddy-icon--font": "_teddy-icon--font_1rwgf_7",
-  "teddy-icon--xxs": "_teddy-icon--xxs_1rwgf_11",
-  "teddy-icon--xs": "_teddy-icon--xs_1rwgf_15",
-  "teddy-icon--sm": "_teddy-icon--sm_1rwgf_19",
-  "teddy-icon--md": "_teddy-icon--md_1rwgf_23",
-  "teddy-icon--lg": "_teddy-icon--lg_1rwgf_27",
-  "teddy-icon--xl": "_teddy-icon--xl_1rwgf_31",
-  "teddy-icon-with-children": "_teddy-icon-with-children_1rwgf_35"
+  "teddy-icon": "_teddy-icon_1ur3a_2",
+  "teddy-icon--font": "_teddy-icon--font_1ur3a_8",
+  "teddy-icon--xxs": "_teddy-icon--xxs_1ur3a_12",
+  "teddy-icon--xs": "_teddy-icon--xs_1ur3a_16",
+  "teddy-icon--sm": "_teddy-icon--sm_1ur3a_20",
+  "teddy-icon--md": "_teddy-icon--md_1ur3a_24",
+  "teddy-icon--lg": "_teddy-icon--lg_1ur3a_28",
+  "teddy-icon--xl": "_teddy-icon--xl_1ur3a_32",
+  "teddy-icon-with-children": "_teddy-icon-with-children_1ur3a_36"
 };
 const rootClassName = "teddy-icon";
 const rootClassNameWithChildren = `${rootClassName}-with-children`;

package/dist/components/icon/icon.js

@@ -2,15 +2,15 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import iconsHref from "../../assets/sprite.269ba410-teddy.svg";
 import clsx from "clsx";
 const styles = {
-  "teddy-icon": "_teddy-icon_1rwgf_2",
-  "teddy-icon--font": "_teddy-icon--font_1rwgf_7",
-  "teddy-icon--xxs": "_teddy-icon--xxs_1rwgf_11",
-  "teddy-icon--xs": "_teddy-icon--xs_1rwgf_15",
-  "teddy-icon--sm": "_teddy-icon--sm_1rwgf_19",
-  "teddy-icon--md": "_teddy-icon--md_1rwgf_23",
-  "teddy-icon--lg": "_teddy-icon--lg_1rwgf_27",
-  "teddy-icon--xl": "_teddy-icon--xl_1rwgf_31",
-  "teddy-icon-with-children": "_teddy-icon-with-children_1rwgf_35"
+  "teddy-icon": "_teddy-icon_1ur3a_2",
+  "teddy-icon--font": "_teddy-icon--font_1ur3a_8",
+  "teddy-icon--xxs": "_teddy-icon--xxs_1ur3a_12",
+  "teddy-icon--xs": "_teddy-icon--xs_1ur3a_16",
+  "teddy-icon--sm": "_teddy-icon--sm_1ur3a_20",
+  "teddy-icon--md": "_teddy-icon--md_1ur3a_24",
+  "teddy-icon--lg": "_teddy-icon--lg_1ur3a_28",
+  "teddy-icon--xl": "_teddy-icon--xl_1ur3a_32",
+  "teddy-icon-with-children": "_teddy-icon-with-children_1ur3a_36"
 };
 const rootClassName = "teddy-icon";
 const rootClassNameWithChildren = `${rootClassName}-with-children`;

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

@@ -3,17 +3,28 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const components_box_box = require("../box/box.cjs");
+const components_flex_flex = require("../flex/flex.cjs");
 const styles = {
-  "teddy-notabene": "_teddy-notabene_1kgqm_1",
-  "teddy-notabene__icon": "_teddy-notabene__icon_1kgqm_9",
-  "teddy-notabene__heading": "_teddy-notabene__heading_1kgqm_9"
+  "teddy-notabene": "_teddy-notabene_78ui9_1",
+  "teddy-notabene__icon": "_teddy-notabene__icon_78ui9_5",
+  "teddy-notabene__heading": "_teddy-notabene__heading_78ui9_5"
 };
 const rootClassName = "teddy-notabene";
 const Root = React.forwardRef(
   ({ children, className, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}`]], className);
-    return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, ref: forwardRef, className: classes, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components_flex_flex.Flex,
+      {
+        gap: { sm: "150", md: "300" },
+        direction: { sm: "column", md: "row" },
+        p: { sm: "300", md: "400" },
+        ...props,
+        ref: forwardRef,
+        className: classes,
+        children
+      }
+    );
   }
 );
 Root.displayName = "Root";

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { Box as PrimitiveBox } from '../box';
+import { Flex } from '../flex';
 
 export declare const rootClassName = "teddy-notabene";
-export type RootProps = Partial<React.ComponentPropsWithoutRef<typeof PrimitiveBox>>;
+export type RootProps = Partial<React.ComponentPropsWithoutRef<typeof Flex>>;
 export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,17 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { Box } from "../box/box.js";
+import { Flex } from "../flex/flex.js";
 const styles = {
-  "teddy-notabene": "_teddy-notabene_1kgqm_1",
-  "teddy-notabene__icon": "_teddy-notabene__icon_1kgqm_9",
-  "teddy-notabene__heading": "_teddy-notabene__heading_1kgqm_9"
+  "teddy-notabene": "_teddy-notabene_78ui9_1",
+  "teddy-notabene__icon": "_teddy-notabene__icon_78ui9_5",
+  "teddy-notabene__heading": "_teddy-notabene__heading_78ui9_5"
 };
 const rootClassName = "teddy-notabene";
 const Root = React__default.forwardRef(
   ({ children, className, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}`]], className);
-    return /* @__PURE__ */ jsx(Box, { ...props, ref: forwardRef, className: classes, children });
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        gap: { sm: "150", md: "300" },
+        direction: { sm: "column", md: "row" },
+        p: { sm: "300", md: "400" },
+        ...props,
+        ref: forwardRef,
+        className: classes,
+        children
+      }
+    );
   }
 );
 Root.displayName = "Root";

package/dist/style.css

@@ -140,40 +140,41 @@
     color: inherit;
   }
 }@layer icon {
-  ._teddy-icon_1rwgf_2 {
+  ._teddy-icon_1ur3a_2 {
     display: inline;
     align-self: center;
     fill: currentColor;
+    flex-shrink: 0;
   }
-  ._teddy-icon--font_1rwgf_7 {
+  ._teddy-icon--font_1ur3a_8 {
     width: 1em;
     height: 1em;
   }
-  ._teddy-icon--xxs_1rwgf_11 {
+  ._teddy-icon--xxs_1ur3a_12 {
     width: var(--teddy-spacing-150);
     height: var(--teddy-spacing-150);
   }
-  ._teddy-icon--xs_1rwgf_15 {
+  ._teddy-icon--xs_1ur3a_16 {
     width: var(--teddy-spacing-200);
     height: var(--teddy-spacing-200);
   }
-  ._teddy-icon--sm_1rwgf_19 {
+  ._teddy-icon--sm_1ur3a_20 {
     width: var(--teddy-spacing-250);
     height: var(--teddy-spacing-250);
   }
-  ._teddy-icon--md_1rwgf_23 {
+  ._teddy-icon--md_1ur3a_24 {
     width: var(--teddy-spacing-300);
     height: var(--teddy-spacing-300);
   }
-  ._teddy-icon--lg_1rwgf_27 {
+  ._teddy-icon--lg_1ur3a_28 {
     width: var(--teddy-spacing-400);
     height: var(--teddy-spacing-400);
   }
-  ._teddy-icon--xl_1rwgf_31 {
+  ._teddy-icon--xl_1ur3a_32 {
     width: var(--teddy-spacing-600);
     height: var(--teddy-spacing-600);
   }
-  ._teddy-icon-with-children_1rwgf_35 {
+  ._teddy-icon-with-children_1ur3a_36 {
     display: inline-flex;
     align-items: center;
     font-family: var(--teddy-typography-family-default);
@@ -881,27 +882,16 @@
   0% {
     transform: translateX(-100%);
   }
-}._teddy-notabene_1kgqm_1 {
-  padding: var(--teddy-spacing-300);
-  display: flex;
-  flex-direction: column;
-  gap: var(--teddy-spacing-150);
+}._teddy-notabene_78ui9_1 {
   background-color: var(--teddy-color-background-status-warning);
   color: var(--teddy-color-text-default);
 }
-._teddy-notabene__icon_1kgqm_9, ._teddy-notabene__heading_1kgqm_9 {
+._teddy-notabene__icon_78ui9_5, ._teddy-notabene__heading_78ui9_5 {
   color: var(--teddy-color-orange-600);
   align-self: flex-start;
 }
-._teddy-notabene__icon_1kgqm_9 {
+._teddy-notabene__icon_78ui9_5 {
   flex-shrink: 0;
-}
-@media (min-width: 600px) {
-  ._teddy-notabene_1kgqm_1 {
-    padding: var(--teddy-spacing-400);
-    flex-direction: row;
-    gap: var(--teddy-spacing-300);
-  }
 }@layer heading {
   ._teddy-heading_r8os0_2 {
     color: var(--teddy-color-text-default);

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.59",
+  "version": "0.0.60",
   "sideEffects": [
     "**/*.css"
   ],