@infonomic/uikit 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,37 @@
+# UI Kit Prototype
+
+A UI kit prototype that relies on CSS Modules for component styling, while playing nicely with front-end frameworks that use [Tailwind CSS](https://tailwindcss.com/).
+
+![image](https://github.com/user-attachments/assets/5f6ec314-7467-4c33-926d-0c382d9d2831)
+
+We created this repo because while we appreciate Tailwind CSS for front-end development of PoC and smaller applications, we don't feel it belongs in a component library. Tailwind CSS as a ['programmatic' atomic CSS system](https://css-tricks.com/lets-define-exactly-atomic-css/#aa-programmatic) - is brilliant at what it does in preventing CSS rot and gradual CSS bloat - as well as making it clear how a layout or front-end component has been styled. It's also the ulitmate expression of what [Thierry Koblentz](https://www.smashingmagazine.com/author/thierry-koblentz/) was talking about in his 2103 article, [Challenging CSS Best Practices](https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/).
+
+It just doesn't belong in UI kits and libraries.
+
+## Design Goals
+
+We built this with the following goals in mind:
+
+1. We'd like a structure and style system that will work with any framework -[React](https://react.dev/), [Vue.js](https://vuejs.org/), [Solid](https://www.solidjs.com/), [Svelte](https://svelte.dev/) etc.
+2. We'd like to be able to easily target various front-end meta frameworks, from [Astro](https://astro.build/), to [Next.js](https://nextjs.org/) to [React Router v7](https://reactrouter.com/) (formerly Remix) - and even plain old HTML/CSS.
+3. We'd like a good developer experience (DX), allowing us to develop our components in the 'kit' via tests and Storybook, as well as in a monorepo within the front-end target framework itself (Next.js, Vue etc.).
+4. We'd like our components' styles to be easily overridable - whether via 'style' attributes, Tailwind, regular CSS classnames and stylesheets, or any other style system being used by the front-end. We'd especially like to be able to override a component's styles without having to use CSS !important.
+
+## Getting Started
+
+Install packages
+
+`npm install @infonomic/uikit`
+
+or...
+
+`pnpm add @infonomic/uikit`
+
+And then in your application...
+
+```ts
+import { Button, Card, Container, Section } from '@infonomic/uikit/react
+
+```
+
+At the moment docs are in the main repo and stories are available via Storybook.

package/dist/components/avatar/avatar.d.ts

@@ -1,3 +1,5 @@
 import type React from 'react';
-export declare const Avatar: () => React.JSX.Element;
+export declare const Avatar: ({ initials }: {
+    initials: string;
+}) => React.JSX.Element;
 //# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,eAAO,MAAM,MAAM,QAAO,KAAK,CAAC,GAAG,CAAC,OASnC,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,KAAG,KAAK,CAAC,GAAG,CAAC,OASrE,CAAA"}

package/dist/components/avatar/avatar.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "radix-ui";
 import avatar_module from "./avatar.module.js";
 const url = 'https://picsum.photos/150';
-const avatar_Avatar = ()=>/*#__PURE__*/ jsxs(Avatar.Root, {
+const avatar_Avatar = ({ initials })=>/*#__PURE__*/ jsxs(Avatar.Root, {
         className: avatar_module["avatar-root"],
         children: [
             /*#__PURE__*/ jsx(Avatar.Image, {
@@ -16,7 +16,7 @@ const avatar_Avatar = ()=>/*#__PURE__*/ jsxs(Avatar.Root, {
                 delayMs: 600,
                 children: /*#__PURE__*/ jsx("span", {
                     className: avatar_module["avatar-text"],
-                    children: "AB"
+                    children: initials
                 })
             })
         ]

package/dist/components/notifications/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAI/C,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAWD,eAAO,MAAM,KAAK,GAAkB,mEASjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAuEvB,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAI/C,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAWD,eAAO,MAAM,KAAK,GAAkB,mEASjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqEvB,CAAA"}

package/dist/components/notifications/alert.js

@@ -1,13 +1,13 @@
 'use client'
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import classnames from "classnames";
-import { Button } from "../button/button.js";
+import { useEffect, useState } from "react";
 import { CloseIcon } from "../../icons/close-icon.js";
 import { DangerIcon } from "../../icons/danger-icon.js";
 import { InfoIcon } from "../../icons/info-icon.js";
 import { SuccessIcon } from "../../icons/success-icon.js";
 import { WarningIcon } from "../../icons/warning-icon.js";
+import { Button } from "../button/button.js";
 import alert_module from "./alert.module.js";
 const alertIcons = {
     primary: WarningIcon,
@@ -35,48 +35,44 @@ const alert_Alert = function({ ref, intent = 'success', icon = true, close = tru
             [alert_module.fade]: fade
         }),
         ...rest,
-        children: null != title ? /*#__PURE__*/ jsx(Fragment, {
-            children: /*#__PURE__*/ jsxs("div", {
-                className: alert_module["alert-with-title"],
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: classnames(alert_module.header),
-                        children: [
-                            icon && /*#__PURE__*/ jsx(Icon, {
-                                useSprite: true,
-                                className: alert_module.icon
-                            }),
-                            /*#__PURE__*/ jsx("div", {
-                                className: classnames(alert_module.title),
-                                children: /*#__PURE__*/ jsx("span", {
-                                    children: title
-                                })
-                            }),
-                            true === close && /*#__PURE__*/ jsx(Button, {
-                                intent: intent,
-                                variant: "filled",
-                                "aria-label": "Close",
-                                className: classnames(alert_module.close),
-                                type: "button",
-                                onClick: handleOnClose,
-                                ...rest,
-                                children: /*#__PURE__*/ jsx(CloseIcon, {
-                                    height: "12px",
-                                    width: "12px"
-                                })
+        children: null != title ? /*#__PURE__*/ jsxs("div", {
+            className: alert_module["alert-with-title"],
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames(alert_module.header),
+                    children: [
+                        icon && /*#__PURE__*/ jsx(Icon, {
+                            className: alert_module.icon
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: classnames(alert_module.title),
+                            children: /*#__PURE__*/ jsx("span", {
+                                children: title
                             })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: classnames(alert_module.content),
-                        children: children
-                    })
-                ]
-            })
+                        }),
+                        true === close && /*#__PURE__*/ jsx(Button, {
+                            intent: intent,
+                            variant: "filled",
+                            "aria-label": "Close",
+                            className: classnames(alert_module.close),
+                            type: "button",
+                            onClick: handleOnClose,
+                            ...rest,
+                            children: /*#__PURE__*/ jsx(CloseIcon, {
+                                height: "12px",
+                                width: "12px"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: classnames(alert_module.content),
+                    children: children
+                })
+            ]
         }) : /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 icon && /*#__PURE__*/ jsx(Icon, {
-                    useSprite: true,
                     className: alert_module.icon
                 }),
                 /*#__PURE__*/ jsx("div", {

package/dist/components/notifications/toast.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Toast as ToastPrimitive } from 'radix-ui';
+import React from 'react';
 import type { IconType, Intent, OnOpenChange, Position } from './@types/toast.js';
 export interface ToastProps extends React.InputHTMLAttributes<HTMLLIElement> {
     intent?: Intent;

package/dist/components/notifications/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/toast.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AAalD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AASjF,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,aAAa,CAAC;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,6CAA0B,CAAA;AACpD,eAAO,MAAM,aAAa,4GAA0B,CAAA;AAIpD,eAAO,MAAM,KAAK,GAAkB,kGAYjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;CACrC,sBAqEA,CAAA"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/toast.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAUjF,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,aAAa,CAAC;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,6CAA0B,CAAA;AACpD,eAAO,MAAM,aAAa,4GAA0B,CAAA;AAIpD,eAAO,MAAM,KAAK,GAAkB,kGAYjC,UAAU,GAAG;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;CACrC,sBAqEA,CAAA"}

package/dist/components/notifications/toast.js

@@ -2,15 +2,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusTrap, useMergedRef } from "@mantine/hooks";
 import classnames from "classnames";
-import react from "react";
 import { Toast as external_radix_ui_Toast } from "radix-ui";
+import react from "react";
+import { CloseIcon } from "../../icons/close-icon.js";
 import { DangerIcon } from "../../icons/danger-icon.js";
 import { InfoIcon } from "../../icons/info-icon.js";
 import { SuccessIcon } from "../../icons/success-icon.js";
 import { WarningIcon } from "../../icons/warning-icon.js";
 import { Button } from "../button/button.js";
 import toast_module from "./toast.module.js";
-import { CloseIcon } from "../../icons/close-icon.js";
 const toastIcons = {
     success: SuccessIcon,
     info: InfoIcon,

package/dist/components/scroll-area/scroll-area_module.css

@@ -47,7 +47,7 @@
 
   .thumb-G2gkhj {
     background: var(--primary-100);
-    border-radius: var(--scrollbar-size);
+    border-radius: var(--border-radius-sm);
     flex: 1;
     position: relative;
   }

package/dist/icons/close-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"close-icon.d.ts","sourceRoot":"","sources":["../../src/icons/close-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,eAAO,MAAM,SAAS;2CAA0C,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoB5F,CAAA"}
+{"version":3,"file":"close-icon.d.ts","sourceRoot":"","sources":["../../src/icons/close-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,SAAS;2CAA0C,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoB5F,CAAA"}

package/dist/icons/danger-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const DangerIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const DangerIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=danger-icon.d.ts.map

package/dist/icons/danger-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"danger-icon.d.ts","sourceRoot":"","sources":["../../src/icons/danger-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,UAAU,GAAI,iDAKxB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAcxB,CAAA"}
+{"version":3,"file":"danger-icon.d.ts","sourceRoot":"","sources":["../../src/icons/danger-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,UAAU,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUtF,CAAA"}

package/dist/icons/danger-icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const spriteID = 'icon-danger';
-const DangerIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const DangerIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-danger"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('danger-icon', className),
@@ -13,9 +12,7 @@ const DangerIcon = ({ className, svgClassName, useSprite, ...rest })=>{
             focusable: "false",
             "aria-hidden": "true",
             viewBox: "0 0 24 24",
-            children: true === useSprite ? /*#__PURE__*/ jsx("use", {
-                href: `/sprite.svg#${spriteID}`
-            }) : /*#__PURE__*/ jsx("path", {
+            children: /*#__PURE__*/ jsx("path", {
                 d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
             })
         })

package/dist/icons/info-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const InfoIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const InfoIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=info-icon.d.ts.map

package/dist/icons/info-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"info-icon.d.ts","sourceRoot":"","sources":["../../src/icons/info-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,QAAQ,GAAI,iDAKtB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAcxB,CAAA"}
+{"version":3,"file":"info-icon.d.ts","sourceRoot":"","sources":["../../src/icons/info-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,QAAQ,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUpF,CAAA"}

package/dist/icons/info-icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const spriteID = 'icon-info';
-const InfoIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const InfoIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-info"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('info-icon', className),
@@ -13,9 +12,7 @@ const InfoIcon = ({ className, svgClassName, useSprite, ...rest })=>{
             focusable: "false",
             "aria-hidden": "true",
             viewBox: "0 0 24 24",
-            children: true === useSprite ? /*#__PURE__*/ jsx("use", {
-                href: `/sprite.svg#${spriteID}`
-            }) : /*#__PURE__*/ jsx("path", {
+            children: /*#__PURE__*/ jsx("path", {
                 d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"
             })
         })

package/dist/icons/primary-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const PrimaryIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const PrimaryIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=primary-icon.d.ts.map

package/dist/icons/primary-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primary-icon.d.ts","sourceRoot":"","sources":["../../src/icons/primary-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,WAAW,GAAI,iDAKzB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUxB,CAAA"}
+{"version":3,"file":"primary-icon.d.ts","sourceRoot":"","sources":["../../src/icons/primary-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,WAAW,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUvF,CAAA"}

package/dist/icons/primary-icon.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const PrimaryIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const PrimaryIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-primary"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('primary-icon', className),

package/dist/icons/success-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const SuccessIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const SuccessIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=success-icon.d.ts.map

package/dist/icons/success-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"success-icon.d.ts","sourceRoot":"","sources":["../../src/icons/success-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,WAAW,GAAI,iDAKzB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAcxB,CAAA"}
+{"version":3,"file":"success-icon.d.ts","sourceRoot":"","sources":["../../src/icons/success-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,WAAW,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUvF,CAAA"}

package/dist/icons/success-icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const spriteID = 'icon-success';
-const SuccessIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const SuccessIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-success"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('success-icon', className),
@@ -13,9 +12,7 @@ const SuccessIcon = ({ className, svgClassName, useSprite, ...rest })=>{
             focusable: "false",
             "aria-hidden": "true",
             viewBox: "0 0 24 24",
-            children: true === useSprite ? /*#__PURE__*/ jsx("use", {
-                href: `/sprite.svg#${spriteID}`
-            }) : /*#__PURE__*/ jsx("path", {
+            children: /*#__PURE__*/ jsx("path", {
                 d: "M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"
             })
         })

package/dist/icons/types/icon.d.ts

@@ -5,6 +5,5 @@ export interface IconProps extends React.ComponentProps<'div'> {
     stroke?: string;
     width?: string;
     height?: string;
-    useSprite?: boolean;
 }
 //# sourceMappingURL=icon.d.ts.map

package/dist/icons/types/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/icons/types/icon.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/icons/types/icon.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB"}

package/dist/icons/warning-icon.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { IconProps } from './types/icon.js';
-export declare const WarningIcon: ({ className, svgClassName, useSprite, ...rest }: IconProps) => React.JSX.Element;
+export declare const WarningIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
 //# sourceMappingURL=warning-icon.d.ts.map

package/dist/icons/warning-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"warning-icon.d.ts","sourceRoot":"","sources":["../../src/icons/warning-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAMhD,eAAO,MAAM,WAAW,GAAI,iDAKzB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAcxB,CAAA"}
+{"version":3,"file":"warning-icon.d.ts","sourceRoot":"","sources":["../../src/icons/warning-icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,WAAW,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUvF,CAAA"}

package/dist/icons/warning-icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
-const spriteID = 'icon-warning';
-const WarningIcon = ({ className, svgClassName, useSprite, ...rest })=>{
+const WarningIcon = ({ className, svgClassName, ...rest })=>{
     const applied = classnames(icons_module["fill-warning"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
         className: classnames('warning-icon', className),
@@ -13,9 +12,7 @@ const WarningIcon = ({ className, svgClassName, useSprite, ...rest })=>{
             focusable: "false",
             "aria-hidden": "true",
             viewBox: "0 0 24 24",
-            children: true === useSprite ? /*#__PURE__*/ jsx("use", {
-                href: `/sprite.svg#${spriteID}`
-            }) : /*#__PURE__*/ jsx("path", {
+            children: /*#__PURE__*/ jsx("path", {
                 d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
             })
         })