@infonomic/uikit 6.0.4 → 6.0.5

package/README.md

@@ -4,17 +4,15 @@ A UI kit that relies on CSS Modules for component styling, while playing nicely
 
 ![image](https://github.com/user-attachments/assets/5f6ec314-7467-4c33-926d-0c382d9d2831)
 
-We created this project 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 ultimate 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/).
+We created this project 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 ultimate expression of what [Thierry Koblentz](https://www.smashingmagazine.com/author/thierry-koblentz/) was talking about in his 2013 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.
 
 ## Rationale
 
-In addition to our thoughts above, this kit is built around the philosophy of adopting or 'folding in' best-in-class components, like the ones in well-known 'à la carte' headless component libraries such as [Base UI](https://base-ui.com/), and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html) as well as individually well-known components such as [React Day Picker](https://github.com/gpbl/react-day-picker) and more. 
+In addition to our thoughts above, this kit is built around the philosophy of adopting or 'folding in' best-in-class components, like the ones in well-known 'à la carte' headless component libraries such as [Base UI](https://base-ui.com/) and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html), as well as other well-known individual components such as [React Day Picker](https://github.com/gpbl/react-day-picker) and more. 
 
-Having lived through a full generation of 'all-in-one' and difficult to override themed UI kits like Bootstrap and Material UI, the trend towards composable headless (unstyled) component libraries is a welcome one - and one that forms the basis of this kit. 
-
-Many of the current components are built on Base UI. The great thing about wrapping these components in a client-consumable interface and library, is that in theory at least, the consumer of our kit's components won't have to worry about implementation details, or migration from Base UI to another underlying component library. The 'contract' and core styling semantics will never change.
+Many of the current components are built on [Base UI](https://base-ui.com/) - which is an excellent project. The great thing about wrapping these components in a client-consumable interface and library is that, in theory at least, the consumer of our kit's components won't have to worry about implementation details or migration from one underlying component library to another. The 'contract' and core styling semantics will never change.
 
 ## Design Goals
 
@@ -22,7 +20,7 @@ We built this with the following design goals in mind:
 
 1. We'd like a structure and style system that will work with any component framework - [Astro](https://astro.build/), [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 with the example front-end meta-frameworks.
+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 with example front-end meta-frameworks (more to do here).
 
 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.
 
@@ -30,13 +28,15 @@ We built this with the following design goals in mind:
 
 ### Other key points:
 
-We use CSS [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) via the @layer statement at-rule for named layers. This allows all of our CSS to be easily overwritten by any consuming client application - since CSS outside any layer, automatically has a higher specificity than CSS within a layer. We also carefully order our layers to create our own specificity hierarchy - for example - @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+We use CSS [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) via the `@layer` statement at-rule for named layers. This allows all of our CSS to be easily overridden by any consuming client application - since CSS outside any layer automatically has a higher specificity than CSS within a layer. We also carefully order our layers to create our own specificity hierarchy - for example - `@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;`
+
+For components - this means ensuring that the layer specificity order appears at the top of each CSS module. It acts as a sort of 'preamble' - and it means that the component's bundled CSS will behave correctly when used within the overall UI kit.
+
+We also highly value the option to 'tell' components to ignore or override a top-level theme decision of light or dark. There is an intentionally duplicated `.not-dark` class selector in our functional tokens file. Being able to use `.not-dark` means that we can override components that need to be in 'dark mode' on an otherwise 'light theme', or that need to be in `.not-dark` mode on an otherwise 'dark theme'.
 
-For components - this means ensuring that the layer specificity order appears at the top of each CSS module. It acts as sort of a 'preamble' - and it means that the component's bundled CSS will behave correctly when used within the overall UI kit.
+In addition to CSS modules, we're experimenting with an assembled global stylesheet (in a post-build script) that can be used in vanilla HTML/CSS projects.
 
-The use of CSS modules will also allow us to support exporting individual components separately (we export a single bundle for import at the moment) helping to reduce the import and bundle size of the consuming client. Once we've enabled single component exports, a client will then be able to import the main style.css file followed by an individual component. We'll be revisiting this soon.
 
-Lastly - we highly value the option to 'tell' components to ignore or override a top-level theme decision of light or dark. There is an intentionally duplicated `.not-dark` class selector in our functional tokens file. Being able to use `.not-dark` means that we can override components that need to be in 'dark mode' on an otherwise 'light theme', or that need to be in .not-dark mode, on an otherwise 'dark theme'.
 
 ## Getting Started
 
@@ -79,17 +79,17 @@ And then in your application in a global.css or other root CSS file...
 Followed by the below in any of your components or routes where you'd like to import a component...
 
 ```ts
-import { Button, Card, Container, Section } from '@infonomic/uikit/react
+import { Button, Card, Container, Section } from '@infonomic/uikit/react'
 
 ```
 
 ## Documentation
 
-At the moment self-documented component examples are all based on [Storybook](https://storybook.js.org/). For now at least, in order to view our Storybook stories you'll need to clone this repo, install all dependencies, then change into the packages/ui directory and start Storybook with `pnpm storybook` or `npm run storybook`.
+At the moment, self-documented component examples are all based on [Storybook](https://storybook.js.org/). For now at least, in order to view our Storybook stories you'll need to clone this repo, install all dependencies, then change into the packages/uikit directory and start Storybook with `pnpm storybook` or `npm run storybook`.
 
 ## Tailwind CSS Integration
 
-Here's an example Tailwind CSS integration. Note that we have our own reset, and optional typography system and so the order of our imports are a little different from the usual 'Tailwind first' approach. The example below does NOT use the Tailwind CSS reset.
+Here's an example Tailwind CSS integration. Note that we have our own reset, and optional typography system and so the order of our imports is a little different from the usual 'Tailwind first' approach. The example below does NOT use the Tailwind CSS reset.
 
 ```css
 @layer theme, base, components, utilities;

package/dist/astro.d.ts

@@ -7,14 +7,14 @@ import type CardHeaderComponent from './components/card/card-header.astro'
 import type CardTitleComponent from './components/card/card-title.astro'
 import type CardComponent from './components/card/card.astro'
 import type ContainerComponent from './components/container/container.astro'
-import type CheckboxComponent from './components/forms/checkbox.astro'
-import type ErrorTextComponent from './components/forms/error-text.astro'
-import type HelpTextComponent from './components/forms/help-text.astro'
-import type InputAdornmentComponent from './components/forms/input-adornment.astro'
-import type InputComponent from './components/forms/input.astro'
-import type LabelComponent from './components/forms/label.astro'
-import type TextAreaComponent from './components/forms/text-area.astro'
 import type HamburgerComponent from './components/hamburger/hamburger.astro'
+import type CheckboxComponent from './components/inputs/checkbox.astro'
+import type ErrorTextComponent from './components/inputs/error-text.astro'
+import type HelpTextComponent from './components/inputs/help-text.astro'
+import type InputAdornmentComponent from './components/inputs/input-adornment.astro'
+import type InputComponent from './components/inputs/input.astro'
+import type LabelComponent from './components/inputs/label.astro'
+import type TextAreaComponent from './components/inputs/text-area.astro'
 import type ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import type SectionComponent from './components/section/section.astro'
 import type CheckIconComponent from './icons/check-icon.astro'
@@ -33,6 +33,7 @@ export declare const CardHeader: typeof CardHeaderComponent
 export declare const CardTitle: typeof CardTitleComponent
 export declare const Card: typeof CardComponent
 export declare const Container: typeof ContainerComponent
+export declare const Hamburger: typeof HamburgerComponent
 export declare const Checkbox: typeof CheckboxComponent
 export declare const ErrorText: typeof ErrorTextComponent
 export declare const HelpText: typeof HelpTextComponent
@@ -40,7 +41,6 @@ export declare const InputAdornment: typeof InputAdornmentComponent
 export declare const Input: typeof InputComponent
 export declare const Label: typeof LabelComponent
 export declare const TextArea: typeof TextAreaComponent
-export declare const Hamburger: typeof HamburgerComponent
 export declare const ScrollToTop: typeof ScrollToTopComponent
 export declare const Section: typeof SectionComponent
 export declare const CheckIcon: typeof CheckIconComponent

package/dist/astro.js

@@ -7,14 +7,14 @@ import CardHeaderComponent from './components/card/card-header.astro'
 import CardTitleComponent from './components/card/card-title.astro'
 import CardComponent from './components/card/card.astro'
 import ContainerComponent from './components/container/container.astro'
-import CheckboxComponent from './components/forms/checkbox.astro'
-import ErrorTextComponent from './components/forms/error-text.astro'
-import HelpTextComponent from './components/forms/help-text.astro'
-import InputAdornmentComponent from './components/forms/input-adornment.astro'
-import InputComponent from './components/forms/input.astro'
-import LabelComponent from './components/forms/label.astro'
-import TextAreaComponent from './components/forms/text-area.astro'
 import HamburgerComponent from './components/hamburger/hamburger.astro'
+import CheckboxComponent from './components/inputs/checkbox.astro'
+import ErrorTextComponent from './components/inputs/error-text.astro'
+import HelpTextComponent from './components/inputs/help-text.astro'
+import InputAdornmentComponent from './components/inputs/input-adornment.astro'
+import InputComponent from './components/inputs/input.astro'
+import LabelComponent from './components/inputs/label.astro'
+import TextAreaComponent from './components/inputs/text-area.astro'
 import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import SectionComponent from './components/section/section.astro'
 import CheckIconComponent from './icons/check-icon.astro'
@@ -33,6 +33,7 @@ export const CardHeader = CardHeaderComponent
 export const CardTitle = CardTitleComponent
 export const Card = CardComponent
 export const Container = ContainerComponent
+export const Hamburger = HamburgerComponent
 export const Checkbox = CheckboxComponent
 export const ErrorText = ErrorTextComponent
 export const HelpText = HelpTextComponent
@@ -40,7 +41,6 @@ export const InputAdornment = InputAdornmentComponent
 export const Input = InputComponent
 export const Label = LabelComponent
 export const TextArea = TextAreaComponent
-export const Hamburger = HamburgerComponent
 export const ScrollToTop = ScrollToTopComponent
 export const Section = SectionComponent
 export const CheckIcon = CheckIconComponent

package/dist/components/inputs/@types/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/@types/checkbox.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AAIH;;GAEG;AACH,eAAO,MAAM,OAAO,iCAAkC,CAAA;AAEtD;;;;;;;GAOG;AACH,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,IAAI,6BAA8B,CAAA;AAE/C;;;;;;;;GAQG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAA;AAC9B,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAA"}

package/dist/components/inputs/@types/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/@types/input.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AAIH;;GAEG;AACH,eAAO,MAAM,OAAO,+CAAgD,CAAA;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C;;GAEG;AACH,eAAO,MAAM,IAAI,6BAA8B,CAAA;AAE/C;;;;;;;;GAQG;AACH,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAA;AAC9B,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAA"}

package/dist/components/inputs/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/calendar.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,kBAAkB,CAAA;AAOzB,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAsB,EACtB,UAAU,EAAE,gBAAgB,EAC5B,GAAG,KAAK,EACT,EAAE,aAAa,qBA6Hf;yBArIe,QAAQ"}

package/dist/components/inputs/calendar.module.js

@@ -0,0 +1,45 @@
+import "./calendar_module.css";
+const calendar_module = {
+    "day-picker": "day-picker-HSdX8f",
+    dayPicker: "day-picker-HSdX8f",
+    months: "months-C3oVse",
+    "months-caption": "months-caption-NbN6cs",
+    monthsCaption: "months-caption-NbN6cs",
+    dropdowns: "dropdowns-uLBfnD",
+    "select-trigger": "select-trigger-voJxnW",
+    selectTrigger: "select-trigger-voJxnW",
+    "select-content": "select-content-ppy0BT",
+    selectContent: "select-content-ppy0BT",
+    "select-item": "select-item-ycOfyG",
+    selectItem: "select-item-ycOfyG",
+    "select-chevrons": "select-chevrons-IbajEF",
+    selectChevrons: "select-chevrons-IbajEF",
+    "scroll-area": "scroll-area-N3USY2",
+    scrollArea: "scroll-area-N3USY2",
+    disabled: "disabled-npyvWL",
+    hidden: "hidden-ebyo7i",
+    outside: "outside-r9h4xf",
+    footer: "footer-eySpMW",
+    weekdays: "weekdays-YnSU_N",
+    weekday: "weekday-gss8NQ",
+    "caption-label": "caption-label-OqO5t0",
+    captionLabel: "caption-label-OqO5t0",
+    "month-grid": "month-grid-W4BMbT",
+    monthGrid: "month-grid-W4BMbT",
+    week: "week-g7SwK1",
+    day: "day-uPE3oG",
+    today: "today-gD7ocX",
+    "day-selected": "day-selected-vu_GPN",
+    daySelected: "day-selected-vu_GPN",
+    "day-button": "day-button-vnVFgU",
+    dayButton: "day-button-vnVFgU",
+    "button-range": "button-range-OxB5YX",
+    buttonRange: "button-range-OxB5YX",
+    "range-start": "range-start-CNcwzc",
+    rangeStart: "range-start-CNcwzc",
+    "range-end": "range-end-tRvpMD",
+    rangeEnd: "range-end-tRvpMD",
+    "range-middle": "range-middle-ECpyyL",
+    rangeMiddle: "range-middle-ECpyyL"
+};
+export default calendar_module;

package/dist/components/{forms → inputs}/calendar_module.css

@@ -1,18 +1,18 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  .day-picker-y7Hl7p {
+  .day-picker-HSdX8f {
     padding: var(--spacing-12);
   }
 
-  .months-b87F7E {
+  .months-C3oVse {
     gap: var(--spacing-16);
     flex-direction: column;
     display: flex;
     position: relative;
   }
 
-  .months-caption-kDTTdX {
+  .months-caption-NbN6cs {
     justify-content: center;
     align-items: center;
     height: 1.75rem;
@@ -20,7 +20,7 @@
     position: relative;
   }
 
-  .dropdowns-erBLYh {
+  .dropdowns-uLBfnD {
     justify-content: center;
     align-items: center;
     gap: var(--spacing-8);
@@ -28,19 +28,19 @@
     display: flex;
   }
 
-  .select-trigger-hOsFML {
+  .select-trigger-voJxnW {
     width: 100%;
     height: 2.25rem;
     font-size: .875rem;
   }
 
-  .select-content-_eFzfR {
+  .select-content-ppy0BT {
     z-index: 100;
     background-color: var(--background);
     color: var(--foreground);
   }
 
-  .select-item-V5Rg6u {
+  .select-item-ycOfyG {
     cursor: pointer;
     border: none;
     justify-content: center;
@@ -51,17 +51,17 @@
     display: flex;
   }
 
-  .select-item-V5Rg6u:hover {
+  .select-item-ycOfyG:hover {
     background-color: var(--gray-50);
     color: var(--foreground);
   }
 
-  .select-chevrons-kPRdHE {
+  .select-chevrons-IbajEF {
     stroke: var(--primary-400);
     opacity: .7;
   }
 
-  .scroll-area-epmyLI {
+  .scroll-area-N3USY2 {
     border: 1px solid var(--border-color);
     background-color: var(--background);
     text-align: center;
@@ -69,43 +69,43 @@
     height: 240px;
   }
 
-  .disabled-xiZ9Hf {
+  .disabled-npyvWL {
     color: var(--muted);
     opacity: .5;
   }
 
-  .hidden-UklZZ2 {
+  .hidden-ebyo7i {
     visibility: hidden;
     flex: 1;
   }
 
-  .outside-V5MXWM {
+  .outside-r9h4xf {
     color: var(--muted);
     opacity: .5;
   }
 
-  .outside-V5MXWM[aria-selected="true"] {
+  .outside-r9h4xf[aria-selected="true"] {
     color: var(--muted);
     opacity: .3;
   }
 
-  .footer-QtfvNg {
+  .footer-eySpMW {
     padding-top: var(--spacing-12);
     font-size: .875rem;
   }
 
-  .weekdays-qlRhV0 {
+  .weekdays-YnSU_N {
     display: flex;
   }
 
-  .weekday-WkecO9 {
+  .weekday-gss8NQ {
     width: 2.25rem;
     color: var(--muted);
     font-size: .875rem;
     font-weight: normal;
   }
 
-  .caption-label-s72ral {
+  .caption-label-OqO5t0 {
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: .875rem;
@@ -113,20 +113,20 @@
     overflow: hidden;
   }
 
-  .month-grid-o9jb0q {
+  .month-grid-W4BMbT {
     margin-left: auto;
     margin-right: auto;
     margin-top: var(--spacing-16);
   }
 
-  .week-kpm7YL {
+  .week-g7SwK1 {
     margin-top: var(--spacing-8);
     align-items: flex-start;
     width: max-content;
     display: flex;
   }
 
-  .day-iMPvhj {
+  .day-uPE3oG {
     flex: 1;
     justify-content: center;
     align-items: center;
@@ -137,21 +137,21 @@
     display: flex;
   }
 
-  .day-iMPvhj > button {
+  .day-uPE3oG > button {
     color: var(--foreground);
   }
 
-  .today-vDw_Vq > button {
+  .today-gD7ocX > button {
     border: solid 1px var(--stroke-primary);
     color: var(--foreground);
   }
 
-  .day-iMPvhj > button:hover, .day-selected-zpU4nM > button {
+  .day-uPE3oG > button:hover, .day-selected-vu_GPN > button {
     background-color: var(--fill-primary-strong);
     color: #fff;
   }
 
-  .day-button-Fo6dMw {
+  .day-button-vnVFgU {
     border-radius: var(--border-radius-md);
     width: 2.25rem;
     height: 2.25rem;
@@ -160,62 +160,62 @@
     transition: none;
   }
 
-  .day-button-Fo6dMw[aria-selected="true"] {
+  .day-button-vnVFgU[aria-selected="true"] {
     opacity: 1;
   }
 
-  .button-range-ut02cG {
+  .button-range-OxB5YX {
     background-color: var(--fill-primary-weak);
     color: var(--foreground);
   }
 
-  .button-range-ut02cG > button {
+  .button-range-OxB5YX > button {
     background-color: var(--fill-primary-strong);
     color: #fff;
   }
 
-  .button-range-ut02cG > button:hover {
+  .button-range-OxB5YX > button:hover {
     background-color: var(--fill-primary-strong);
     color: var(--foreground);
   }
 
-  .range-start-UCMex_ {
+  .range-start-CNcwzc {
     border-top-left-radius: var(--border-radius-md);
     border-bottom-left-radius: var(--border-radius-md);
   }
 
-  .range-end-JI4MZO {
+  .range-end-tRvpMD {
     border-top-right-radius: var(--border-radius-md);
     border-bottom-right-radius: var(--border-radius-md);
   }
 
-  .range-middle-ZVXPRk {
+  .range-middle-ECpyyL {
     background-color: var(--fill-primary-weak);
     color: var(--foreground);
   }
 
-  .range-middle-ZVXPRk > button, .range-middle-ZVXPRk > button:hover {
+  .range-middle-ECpyyL > button, .range-middle-ECpyyL > button:hover {
     color: var(--foreground);
     background-color: #0000;
   }
 
   @media (min-width: 40rem) {
-    .months-b87F7E {
+    .months-C3oVse {
       flex-direction: row;
     }
   }
 
-  :is(.dark, [data-theme="dark"]) .select-content-_eFzfR, :is(.dark, [data-theme="dark"]) .scroll-area-epmyLI {
+  :is(.dark, [data-theme="dark"]) .select-content-ppy0BT, :is(.dark, [data-theme="dark"]) .scroll-area-N3USY2 {
     background-color: var(--canvas-800);
     color: var(--foreground);
   }
 
-  :is(.dark, [data-theme="dark"]) .select-item-V5Rg6u:hover {
+  :is(.dark, [data-theme="dark"]) .select-item-ycOfyG:hover {
     background-color: var(--primary-400);
     color: var(--foreground);
   }
 
-  :is(.dark, [data-theme="dark"]) .select-chevrons-kPRdHE {
+  :is(.dark, [data-theme="dark"]) .select-chevrons-IbajEF {
     stroke: var(--primary-200);
     opacity: .7;
   }

package/dist/components/inputs/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAA"}

package/dist/components/{forms → inputs}/checkbox-group.module.js

@@ -1,6 +1,6 @@
 import "./checkbox-group_module.css";
 const checkbox_group_module = {
-    "checkbox-group": "checkbox-group-Qh9Trn",
-    checkboxGroup: "checkbox-group-Qh9Trn"
+    "checkbox-group": "checkbox-group-hPRXiQ",
+    checkboxGroup: "checkbox-group-hPRXiQ"
 };
 export default checkbox_group_module;

package/dist/components/{forms → inputs}/checkbox-group_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.infonomic-checkbox-group, .checkbox-group-Qh9Trn) {
+  :is(.infonomic-checkbox-group, .checkbox-group-hPRXiQ) {
     gap: var(--spacing-8);
     flex-direction: column;
     display: flex;

package/dist/components/inputs/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAOvE,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAEjE,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,iBAAiB,CAAC,CAAA;IACxF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,QAAQ,GAAqB,6KAkBvC,KAAK,GAAG;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC,KAAG,KAAK,CAAC,GAAG,CAAC,OAoDb,CAAA"}

package/dist/components/{forms → inputs}/checkbox.js

@@ -6,7 +6,7 @@ import { CheckIcon } from "../../icons/check-icon.js";
 import checkbox_module from "./checkbox.module.js";
 import { ErrorText } from "./error-text.js";
 import { HelpText } from "./help-text.js";
-const forms_checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined', size = 'md', intent = 'primary', reverse = false, className, checkBoxClasses, containerClasses, componentClasses, labelClasses, error = false, helpText = '', errorText = '', ...rest }) {
+const inputs_checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined', size = 'md', intent = 'primary', reverse = false, className, checkBoxClasses, containerClasses, componentClasses, labelClasses, error = false, helpText = '', errorText = '', ...rest }) {
     return /*#__PURE__*/ jsxs("div", {
         className: classnames('infonomic-checkbox-container', checkbox_module.container, containerClasses),
         children: [
@@ -51,4 +51,4 @@ const forms_checkbox_Checkbox = function({ ref, id, name, label, variant = 'outl
         ]
     });
 };
-export { forms_checkbox_Checkbox as Checkbox };
+export { inputs_checkbox_Checkbox as Checkbox };

package/dist/components/inputs/checkbox.module.js

@@ -0,0 +1,25 @@
+import "./checkbox_module.css";
+const checkbox_module = {
+    container: "container-oQwpyX",
+    component: "component-UIVxUt",
+    reverse: "reverse-zym7zb",
+    checkbox: "checkbox-p0iZ1T",
+    indicator: "indicator-VoSV4Y",
+    icon: "icon-ETAzcD",
+    checkBoxIn: "checkBoxIn-q5l2Hl",
+    label: "label-XrpVKR",
+    errorText: "errorText-B98PO8",
+    sm: "sm-qprV45",
+    md: "md-JptERm",
+    lg: "lg-oF4sRl",
+    outlined: "outlined-JZPcbA",
+    filled: "filled-kMP3C2",
+    primary: "primary-VUeFFC",
+    secondary: "secondary-ZRma2z",
+    noeffect: "noeffect-rdjjte",
+    success: "success-ocrgme",
+    info: "info-vm53Ck",
+    warning: "warning-Xc4GbK",
+    danger: "danger-A2Iomw"
+};
+export default checkbox_module;