@caspeco/casper-ui-library 9.0.0-alpha.6 → 9.0.1

package/README.md

@@ -1,103 +1,103 @@
-# @caspeco/casper-ui-library
-
-[![NPM Version](https://img.shields.io/npm/v/%40caspeco%2Fcasper-ui-library)](https://www.npmjs.com/package/@caspeco/casper-ui-library)
-
-Caspeco's UI component library, built on top of [Chakra UI](https://chakra-ui.com/).
-
-👉 **The usage documentation can be found at https://caspeco.github.io/casper-ui-library**
-
-## Local development
-
-To build this project you need to have [Node.js](https://nodejs.org/en) installed.
-
-### Commands
-
-All commands are run from the root of the project, from a terminal.
-
-<!-- prettier-ignore -->
-| Command | Description |
-| ------- | ----------- |
-| `npm install` | Install dependencies. |
-| `npm run dev` | Build a local development version of the entire library, compiled into a single .js file for improved HMR. Automatically rebuilds when the file contents change. |
-| `npm run build` | Build the library as it will be shipped on npm. Does not automatically rebuild when files change, but you can still use this build output to verify your changes in the documentation website or in another project. |
-| `cd ../docs && npm run dev` | Starts the documentation website. Usually you want to run this alongside the library in dev mode, so open a new terminal for this. See [/docs](../docs) for more info. |
-| `npm run test` | Run unit tests. |
-| `npm run test:visual` | Run visual regression tests using Playwright in Docker. Automatically starts/stops Docker container. |
-| `npm run test:visual:ui` | Opens the HTML report viewer for visual test results. |
-| `npm run test:visual:update` | Update visual regression baseline screenshots. Run this after intentional UI changes. |
-| `npm run lint` | Run linting with [@caspeco/eslint-config](https://github.com/Caspeco/eslint-config). If you use the recommended [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) you can see your eslint errors directly in your editor without having to run this. |
-| `npm run prettier:fix` | Reformat all files with [@caspeco/prettier-config](https://github.com/Caspeco/prettier-config). If you use the recommended [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) you can have your files automatically formatted on file save. |
-| `npm run chakra:types` | Generate Chakra UI type definitions for the theme. Happens automatically on `npm install`. |
-
-### Preview locally in another project
-
-1. Build local development version (see above).
-2. In the consuming app, run `npm install --no-save ./relative/path/to/this/directory` (no trailing slash).
-   - For example: `npm install --no-save ../../casper-ui-library/packages/casper-ui-library`
-
-Now when you make a change in the component library, it should rebuild automatically and the consuming app's HMR should kick in and reload the page (preserving state is not possible as the entire library is rebuilt).
-
-To unlink again you just need to run `npm install` in the consuming app. If it fails, you may need to delete `node_modules` first.
-
-If you get an error about duplicate react versions, make sure this is in the `vite.config.ts` in the consuming app:
-
-```ts
-import path from "node:path";
-
-export default defineConfig({
-	// ...
-	resolve: {
-		alias: {
-			react: path.resolve("./node_modules/react"),
-		},
-	},
-});
-```
-
-### Visual Regression Tests
-
-Visual regression tests catch unintended UI changes by comparing screenshots of component variants to committed baselines in `__screenshots__/`. They run with Playwright in Docker to ensure consistent rendering across different development environments and CI.
-
-**Requirements**: Docker must be installed and running.
-
-**Running tests**:
-
-- `npm run test:visual` - Runs all visual tests
-- `npm run test:visual:ui` - Opens the HTML report viewer
-- `npm run test:visual:update` - Updates baseline screenshots after intentional UI changes
-
-> [!TIP]
-> CI fails but local passes?
->
-> 1. Go to the `visual-tests` job in GitHub Actions
-> 2. Download and extract the HTML artifact under the `Upload visual test report` step
-> 3. Run `npx vite preview --outDir .` in the extracted directory to see diff report from CI
-
-You may need to tweak the [pixelmatch comparator options](https://vitest.dev/api/browser/assertions.html#pixelmatch-comparator-options) if you see false positives due to anti-aliasing or sub-pixel rendering differences. See existing tests for examples.
-
-## Contributing
-
-1. Make sure your repository is up to date.
-   ```bash
-   git pull
-   ```
-2. Create a new branch and make your changes there. Preferrably use a branch name that includes any related Jira issue and some short descriptive name.
-   ```bash
-   git checkout -b UTF-837-add-checkbox-component
-   ```
-3. Make your changes.
-4. Bump the `version` field in `package.json` (following [Semantic versioning](https://semver.org/)) and run `npm install`. The version reflects API changes only (e.g. removing a prop → MAJOR, adding a prop → MINOR, no public API changes → PATCH). UI changes are **NOT** API changes.
-5. Open a [pull request](https://github.com/Caspeco/casper-ui-library/pulls) using the template and assign a reviewer.
-6. If the PR makes significant changes to the UI (e.g. changes the sizes for all buttons), clearly announce this in the [Mattermost channel](https://snack.azure.caspeco.com/default/channels/casper-ui-20---devs).
-7. After approval, merge the PR. If you have a new version in package.json it will automatically publish your changes to npm. The documentation website is always rebuilt.
-
-### How to add new icons
-
-1. **Export from Figma**
-   In the [Figma Icons document](https://www.figma.com/file/NE7GL10FbQcEPSL4M0gpNh/Casper-UI-2.0?type=design&node-id=9837-10627&mode=design), choose **File → Export** and export all icons as **SVG**.
-
-2. **Update assets**
-   Clear `lib/components/icon/assets`, then drop in the exported SVGs. Verify changes with `git diff`.
-
-3. **Generate components**
-   From the repository root, run `node scripts/generate-icons.js` to generate React components for each icon.
+# @caspeco/casper-ui-library
+
+[![NPM Version](https://img.shields.io/npm/v/%40caspeco%2Fcasper-ui-library)](https://www.npmjs.com/package/@caspeco/casper-ui-library)
+
+Caspeco's UI component library, built on top of [Chakra UI](https://chakra-ui.com/).
+
+👉 **The usage documentation can be found at https://caspeco.github.io/casper-ui-library**
+
+## Local development
+
+To build this project you need to have [Node.js](https://nodejs.org/en) installed.
+
+### Commands
+
+All commands are run from the root of the project, from a terminal.
+
+<!-- prettier-ignore -->
+| Command | Description |
+| ------- | ----------- |
+| `npm install` | Install dependencies. |
+| `npm run dev` | Build a local development version of the entire library, compiled into a single .js file for improved HMR. Automatically rebuilds when the file contents change. |
+| `npm run build` | Build the library as it will be shipped on npm. Does not automatically rebuild when files change, but you can still use this build output to verify your changes in the documentation website or in another project. |
+| `cd ../docs && npm run dev` | Starts the documentation website. Usually you want to run this alongside the library in dev mode, so open a new terminal for this. See [/docs](../docs) for more info. |
+| `npm run test` | Run unit tests. |
+| `npm run test:visual` | Run visual regression tests using Playwright in Docker. Automatically starts/stops Docker container. |
+| `npm run test:visual:ui` | Opens the HTML report viewer for visual test results. |
+| `npm run test:visual:update` | Update visual regression baseline screenshots. Run this after intentional UI changes. |
+| `npm run lint` | Run linting with [@caspeco/eslint-config](https://github.com/Caspeco/eslint-config). If you use the recommended [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) you can see your eslint errors directly in your editor without having to run this. |
+| `npm run prettier:fix` | Reformat all files with [@caspeco/prettier-config](https://github.com/Caspeco/prettier-config). If you use the recommended [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) you can have your files automatically formatted on file save. |
+| `npm run chakra:types` | Generate Chakra UI type definitions for the theme. Happens automatically on `npm install`. |
+
+### Preview locally in another project
+
+1. Build local development version (see above).
+2. In the consuming app, run `npm install --no-save ./relative/path/to/this/directory` (no trailing slash).
+   - For example: `npm install --no-save ../../casper-ui-library/packages/casper-ui-library`
+
+Now when you make a change in the component library, it should rebuild automatically and the consuming app's HMR should kick in and reload the page (preserving state is not possible as the entire library is rebuilt).
+
+To unlink again you just need to run `npm install` in the consuming app. If it fails, you may need to delete `node_modules` first.
+
+If you get an error about duplicate react versions, make sure this is in the `vite.config.ts` in the consuming app:
+
+```ts
+import path from "node:path";
+
+export default defineConfig({
+	// ...
+	resolve: {
+		alias: {
+			react: path.resolve("./node_modules/react"),
+		},
+	},
+});
+```
+
+### Visual Regression Tests
+
+Visual regression tests catch unintended UI changes by comparing screenshots of component variants to committed baselines in `__screenshots__/`. They run with Playwright in Docker to ensure consistent rendering across different development environments and CI.
+
+**Requirements**: Docker must be installed and running.
+
+**Running tests**:
+
+- `npm run test:visual` - Runs all visual tests
+- `npm run test:visual:ui` - Opens the HTML report viewer
+- `npm run test:visual:update` - Updates baseline screenshots after intentional UI changes
+
+> [!TIP]
+> CI fails but local passes?
+>
+> 1. Go to the `visual-tests` job in GitHub Actions
+> 2. Download and extract the HTML artifact under the `Upload visual test report` step
+> 3. Run `npx vite preview --outDir .` in the extracted directory to see diff report from CI
+
+You may need to tweak the [pixelmatch comparator options](https://vitest.dev/api/browser/assertions.html#pixelmatch-comparator-options) if you see false positives due to anti-aliasing or sub-pixel rendering differences. See existing tests for examples.
+
+## Contributing
+
+1. Make sure your repository is up to date.
+   ```bash
+   git pull
+   ```
+2. Create a new branch and make your changes there. Preferrably use a branch name that includes any related Jira issue and some short descriptive name.
+   ```bash
+   git checkout -b UTF-837-add-checkbox-component
+   ```
+3. Make your changes.
+4. Bump the `version` field in `package.json` (following [Semantic versioning](https://semver.org/)) and run `npm install`. The version reflects API changes only (e.g. removing a prop → MAJOR, adding a prop → MINOR, no public API changes → PATCH). UI changes are **NOT** API changes.
+5. Open a [pull request](https://github.com/Caspeco/casper-ui-library/pulls) using the template and assign a reviewer.
+6. If the PR makes significant changes to the UI (e.g. changes the sizes for all buttons), clearly announce this in the [Mattermost channel](https://snack.azure.caspeco.com/default/channels/casper-ui-20---devs).
+7. After approval, merge the PR. If you have a new version in package.json it will automatically publish your changes to npm. The documentation website is always rebuilt.
+
+### How to add new icons
+
+1. **Export from Figma**
+   In the [Figma Icons document](https://www.figma.com/file/NE7GL10FbQcEPSL4M0gpNh/Casper-UI-2.0?type=design&node-id=9837-10627&mode=design), choose **File → Export** and export all icons as **SVG**.
+
+2. **Update assets**
+   Clear `lib/components/icon/assets`, then drop in the exported SVGs. Verify changes with `git diff`.
+
+3. **Generate components**
+   From the repository root, run `node scripts/generate-icons.js` to generate React components for each icon.

package/dist/components/box/box.d.ts

@@ -1,6 +1,7 @@
 import { ThemeStyleProps } from '../../theme/index.js';
+import { InteractionProps } from '../../theme/theme-style-props.js';
 import { BoxProps as ChakraBoxProps } from '@chakra-ui/react';
-export type BoxProps = ThemeStyleProps & Pick<ChakraBoxProps, "children" | "as" | "asChild">;
+export type BoxProps = ThemeStyleProps & Pick<ChakraBoxProps, "children" | InteractionProps>;
 /** @see Docs https://caspeco.github.io/casper-ui-library/components/box */
-export declare const Box: import('react').ForwardRefExoticComponent<ThemeStyleProps & Pick<ChakraBoxProps, "children" | "as" | "asChild"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Box: import('react').ForwardRefExoticComponent<ThemeStyleProps & Pick<ChakraBoxProps, "children" | InteractionProps> & import('react').RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../lib/components/box/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAoB,KAAK,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGrF,MAAM,MAAM,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE7F,2EAA2E;AAC3E,eAAO,MAAM,GAAG,kKAMd,CAAC"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../lib/components/box/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAoB,KAAK,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGrF,MAAM,MAAM,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAE7F,2EAA2E;AAC3E,eAAO,MAAM,GAAG,kKAMd,CAAC"}

package/dist/components/breadcrumbs/breadcrumb-link.d.ts

@@ -1,9 +1,10 @@
+import { ThemeStyleProps } from '../../theme/index.js';
 import { BreadcrumbLinkProps as ChakraBreadcrumbLinkProps } from '@chakra-ui/react';
-type ChakraBreadcrumbLinkProperties = Pick<ChakraBreadcrumbLinkProps, "children" | "as" | "href">;
-export type BreadcrumbLinkProps = ChakraBreadcrumbLinkProperties & {
+type ChakraBreadcrumbLinkProperties = Pick<ChakraBreadcrumbLinkProps, "children" | "href">;
+export type BreadcrumbLinkProps = ChakraBreadcrumbLinkProperties & ThemeStyleProps & {
     to?: string;
 };
-export declare const BreadcrumbLink: import('react').ForwardRefExoticComponent<ChakraBreadcrumbLinkProperties & {
+export declare const BreadcrumbLink: import('react').ForwardRefExoticComponent<ChakraBreadcrumbLinkProperties & ThemeStyleProps & {
     to?: string;
 } & import('react').RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/components/breadcrumbs/breadcrumb-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-link.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAG1B,KAAK,8BAA8B,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;AAClG,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,GAAG;IAClE,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,cAAc;SAHrB,MAAM;qDAiBX,CAAC"}
+{"version":3,"file":"breadcrumb-link.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAG1B,KAAK,8BAA8B,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;AAC3F,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,GAC/D,eAAe,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEH,eAAO,MAAM,cAAc;SAHpB,MAAM;qDAiBZ,CAAC"}

package/dist/components/combobox/combobox-recipe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-recipe.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAkGxE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;EAMzB,CAAC"}
+{"version":3,"file":"combobox-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-recipe.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAqGxE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;EAMzB,CAAC"}

package/dist/components/combobox/combobox-recipe.js

@@ -5,6 +5,9 @@ const a = {
   justifyContent: "space-between",
   cursor: "text",
   border: `${r.XSmall} transparent`,
+  "& input": {
+    background: "none"
+  },
   '&[aria-disabled="true"]': {
     borderColor: "transparent",
     cursor: "not-allowed"

package/dist/components/form-control/form-control.d.ts

@@ -1,6 +1,6 @@
 import { ThemeStyleProps } from '../../theme/index.js';
 import { Field as ChakraField } from '@chakra-ui/react';
-type ChakraFormControlProperties = Pick<ChakraField.RootProps, "id" | "children" | "as">;
+type ChakraFormControlProperties = Pick<ChakraField.RootProps, "id" | "children">;
 type CustomProps = {
     isDisabled?: boolean;
     isReadOnly?: boolean;

package/dist/components/form-control/form-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-control.d.ts","sourceRoot":"","sources":["../../../lib/components/form-control/form-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExD,KAAK,2BAA2B,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,CAAC;AAEzF,KAAK,WAAW,GAAG;IAElB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,2BAA2B,GAAG,eAAe,CAAC;AAE3F;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACR,EAAE,gBAAgB,2CAYlB"}
+{"version":3,"file":"form-control.d.ts","sourceRoot":"","sources":["../../../lib/components/form-control/form-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExD,KAAK,2BAA2B,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,CAAC,CAAC;AAElF,KAAK,WAAW,GAAG;IAElB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,2BAA2B,GAAG,eAAe,CAAC;AAE3F;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACR,EAAE,gBAAgB,2CAYlB"}

package/dist/components/form-control/form-label.d.ts

@@ -5,7 +5,7 @@ type CustomFormLabelProps = {
     /** Icon to be displayed left of the label text. Inherits the color of the label text. */
     icon?: CasperIconComponent;
 };
-export type ChakraFormLabelProperties = Pick<ChakraField.LabelProps, "children" | "as">;
+export type ChakraFormLabelProperties = Pick<ChakraField.LabelProps, "children">;
 export type FormLabelProps = ChakraFormLabelProperties & ThemeStyleProps & CustomFormLabelProps;
 /**
  * Used to enhance the usability of form controls.

package/dist/components/form-control/form-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-label.d.ts","sourceRoot":"","sources":["../../../lib/components/form-control/form-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExD,KAAK,oBAAoB,GAAG;IAC3B,yFAAyF;IACzF,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC,CAAC;AAExF,MAAM,MAAM,cAAc,GAAG,yBAAyB,GAAG,eAAe,GAAG,oBAAoB,CAAC;AAEhG;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CASrE"}
+{"version":3,"file":"form-label.d.ts","sourceRoot":"","sources":["../../../lib/components/form-control/form-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExD,KAAK,oBAAoB,GAAG;IAC3B,yFAAyF;IACzF,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAEjF,MAAM,MAAM,cAAc,GAAG,yBAAyB,GAAG,eAAe,GAAG,oBAAoB,CAAC;AAEhG;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CASrE"}

package/dist/components/link/link.d.ts

@@ -1,6 +1,6 @@
 import { ThemeStyleProps } from '../../theme/index.js';
 import { LinkProps as ChakraLinkProps } from '@chakra-ui/react';
-export type LinkProps = ThemeStyleProps & Pick<ChakraLinkProps, "children" | "href" | "rel" | "target" | "as" | "asChild" | "download">;
+export type LinkProps = ThemeStyleProps & Pick<ChakraLinkProps, "children" | "href" | "rel" | "target" | "download">;
 /**
  * Links are accessible elements used primarily for navigation.
  * Can be integrated with other routing libraries like React Router and Reach Router

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../lib/components/link/link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAsB,KAAK,SAAS,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEzF,MAAM,MAAM,SAAS,GAAG,eAAe,GACtC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAE/F;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAErD"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../lib/components/link/link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAsB,KAAK,SAAS,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEzF,MAAM,MAAM,SAAS,GAAG,eAAe,GACtC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC,CAAC;AAE5E;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAErD"}

package/dist/components/menu/menu-box-button.d.ts

@@ -1,6 +1,9 @@
+import { BoxProps } from '../box/index.js';
+import { InteractionProps } from '../../theme/theme-style-props.js';
+import { ButtonProps } from '@chakra-ui/react';
 /**
  * A Box that acts as a trigger for Menu
  * @see Docs https://caspeco.github.io/casper-ui-library/components/menu/
  */
-export declare const MenuBoxButton: import('react').ForwardRefExoticComponent<import('../../index.js').ThemeStyleProps & Pick<import('@chakra-ui/react').BoxProps, "children" | "as" | "asChild"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const MenuBoxButton: import('react').ForwardRefExoticComponent<Omit<BoxProps, InteractionProps> & Pick<ButtonProps, InteractionProps> & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=menu-box-button.d.ts.map

package/dist/components/menu/menu-box-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-box-button.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-box-button.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,aAAa,0MAQxB,CAAC"}
+{"version":3,"file":"menu-box-button.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-box-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAA4C,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK9F;;;GAGG;AACH,eAAO,MAAM,aAAa,sKAUzB,CAAC"}

package/dist/components/menu/menu-box-button.js

@@ -1,7 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { MenuTrigger as n, Button as u } from "@chakra-ui/react";
 import { forwardRef as i } from "react";
-const m = i(({ children: t, ...o }, e) => /* @__PURE__ */ r(n, { asChild: !0, children: /* @__PURE__ */ r(u, { ref: e, unstyled: !0, ...o, children: t }) }));
+const m = i(
+  ({ children: t, ...o }, e) => /* @__PURE__ */ r(n, { asChild: !0, children: /* @__PURE__ */ r(u, { ref: e, unstyled: !0, ...o, children: t }) })
+);
 m.displayName = "MenuBoxButton";
 export {
   m as MenuBoxButton

package/dist/components/menu/menu-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAExF,eAAO,MAAM,QAAQ,GAAI,wBAAwB,aAAa,4CAM7D,CAAC"}
+{"version":3,"file":"menu-list.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,IAAI,IAAI,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAExF,eAAO,MAAM,QAAQ,GAAI,wBAAwB,aAAa,4CAQ7D,CAAC"}

package/dist/components/menu/menu-list.js

@@ -1,6 +1,6 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Menu as r } from "@chakra-ui/react";
-const m = ({ children: t, ...n }) => /* @__PURE__ */ o(r.Positioner, { children: /* @__PURE__ */ o(r.Content, { ...n, children: t }) });
+import { jsx as r } from "react/jsx-runtime";
+import { Portal as e, Menu as o } from "@chakra-ui/react";
+const s = ({ children: t, ...n }) => /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(o.Positioner, { children: /* @__PURE__ */ r(o.Content, { ...n, children: t }) }) });
 export {
-  m as MenuList
+  s as MenuList
 };

package/dist/components/menu/menu.js

@@ -13,7 +13,7 @@ const v = d(function({
   const m = {
     placement: i,
     sameWidth: r,
-    offset: n ? { mainAxis: n[0], crossAxis: n[1] } : void 0,
+    offset: n ? { mainAxis: n[1], crossAxis: n[0] } : void 0,
     gutter: 0,
     flip: !1,
     overflowPadding: 0

package/dist/components/modal/modal-recipe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-recipe.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAoB,MAAM,kBAAkB,CAAC;AAG/E,eAAO,MAAM,WAAW,EAAE,oBAgIxB,CAAC"}
+{"version":3,"file":"modal-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal-recipe.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,oBAAoB,EAAoB,MAAM,kBAAkB,CAAC;AAG/E,eAAO,MAAM,WAAW,EAAE,oBAsIxB,CAAC"}

package/dist/components/modal/modal-recipe.js

@@ -1,10 +1,10 @@
-import { buttonRecipe as t } from "../button/button-recipe.js";
-import { ThemeColorToken as e, ThemeRadiusToken as o, ThemeFontToken as a, ThemeFontSizeToken as r } from "../../theme/theme-tokens.js";
+import { buttonRecipe as o } from "../button/button-recipe.js";
+import { ThemeColorToken as e, ThemeRadiusToken as n, ThemeFontToken as a, ThemeFontSizeToken as t } from "../../theme/theme-tokens.js";
 import { defineSlotRecipe as i } from "@chakra-ui/react";
-import { dialogAnatomy as n } from "../../node_modules/@chakra-ui/react/dist/esm/anatomy.js";
+import { dialogAnatomy as r } from "../../node_modules/@chakra-ui/react/dist/esm/anatomy.js";
 const x = i({
   className: "modal",
-  slots: n.keys(),
+  slots: r.keys(),
   base: {
     backdrop: {
       // Non white label-overridable color based on black, always
@@ -14,17 +14,17 @@ const x = i({
       display: "block",
       bg: e.Surface,
       position: "relative",
-      fontSize: r.XLarge,
+      fontSize: t.XLarge,
       fontFamily: a.SubHeader,
       color: e.OnSurfaceHeader,
       fontWeight: "medium",
-      borderTopRadius: o.Large,
+      borderTopRadius: n.Large,
       minHeight: "72px",
       px: 0,
       py: 0
     },
     body: {
-      borderTopRadius: o.Large,
+      borderTopRadius: n.Large,
       fontFamily: a.Body,
       px: 0,
       paddingTop: 0,
@@ -33,7 +33,7 @@ const x = i({
     content: {
       maxW: "384px",
       my: "48px",
-      borderRadius: o.Large,
+      borderRadius: n.Large,
       bg: e.Surface,
       color: e.OnSurface
     },
@@ -41,7 +41,7 @@ const x = i({
       height: "100dvh"
     },
     footer: {
-      borderBottomRadius: o.Large,
+      borderBottomRadius: n.Large,
       bg: e.Surface,
       gap: "unset",
       paddingTop: 0,
@@ -63,8 +63,8 @@ const x = i({
       right: "unset",
       top: "unset",
       alignSelf: "flex-start",
-      ...t.base,
-      ...t.variants?.variant?.secondary
+      ...o.base,
+      ...o.variants?.variant?.secondary
     }
   },
   variants: {
@@ -95,19 +95,25 @@ const x = i({
       md: {
         content: {
           maxW: "560px",
-          mx: "48px"
+          marginInline: "48px",
+          marginInlineStart: "48px",
+          marginInlineEnd: "48px"
         }
       },
       lg: {
         content: {
           maxW: "960px",
-          mx: "80px"
+          marginInline: "80px",
+          marginInlineStart: "80px",
+          marginInlineEnd: "80px"
         }
       },
       xl: {
         content: {
           maxW: "100%",
-          mx: "80px"
+          marginInline: "80px",
+          marginInlineStart: "80px",
+          marginInlineEnd: "80px"
         }
       },
       full: {

package/dist/components/navigation-list/types.d.ts

@@ -13,7 +13,7 @@ type To = {
      * Link from routing libraries like React Router, Reach Router and Next.js. Use instead of href. */
     to?: string;
 };
-export type NavigationLinkProps = NavigationItemProps & To & Pick<ChakraLinkProps, "as" | "asChild" | "href" | "target" | "rel" | "children">;
+export type NavigationLinkProps = NavigationItemProps & To & Pick<ChakraLinkProps, "href" | "target" | "rel" | "children">;
 export type NavigationButtonProps = NavigationItemProps & Pick<ChakraButtonProps, "onClick" | "children">;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/navigation-list/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACvG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,mBAAmB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;CACpB,GAAG,eAAe,CAAC;AAEpB,KAAK,EAAE,GAAG;IACT;uGACmG;IACnG,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GACpD,EAAE,GACF,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC,CAAC;AAElF,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACvG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,mBAAmB,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;CACpB,GAAG,eAAe,CAAC;AAEpB,KAAK,EAAE,GAAG;IACT;uGACmG;IACnG,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GACpD,EAAE,GACF,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC,CAAC;AAE/D,MAAM,MAAM,qBAAqB,GAAG,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC"}

package/dist/components/table/table-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAS/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,UAAU,qBAAqB;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,KAAK,sBAAsB,CAAC,KAAK,SAAS,SAAS,IAAI,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC;AAElG,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,8BAGjD,sBAAsB,CAAC,KAAK,CAAC,4CAM/B,CAAC;AA4MF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"table-content.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAS/C,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnE,UAAU,qBAAqB;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,SAAS,GAAG,SAAS;IACrE;;OAEG;IACH,UAAU,CAAC,EAAE,CACZ,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EACxB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KACnF,IAAI,CAAC;IAEV;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACzD;AAED,KAAK,sBAAsB,CAAC,KAAK,SAAS,SAAS,IAAI,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAC;AAElG,QAAA,MAAM,iBAAiB,GAAI,KAAK,SAAS,SAAS,EAAE,8BAGjD,sBAAsB,CAAC,KAAK,CAAC,4CAM/B,CAAC;AA+MF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}