@stamcat/craftsman 0.0.39 → 0.0.42

package/README.md

@@ -101,8 +101,8 @@ Each component has its own package entry point, e.g. `@stamcat/craftsman/Button`
 
 - `ThemeProvider` injects theme CSS variables and component override rules.
 - Global styles should be loaded once at app root.
-- Base defaults are emitted in the `craftsman-base` layer and theme overrides in `craftsman-theme`.
-- For equal specificity, `craftsman-theme` overrides `craftsman-base`.
+- Base defaults are emitted in the `cf-base` layer and theme overrides in `cf-theme`.
+- For equal specificity, `cf-theme` overrides `cf-base`.
 - `theme.components.input` targets only non-radio and non-checkbox inputs.
 - `theme.root` and `theme.components.*` support JS style objects and raw CSS/Sass strings.
 - For Sass file workflows, import compiled CSS text via `*.scss?inline` and pass that string into the theme object.

package/Styles.esm.js

@@ -1,8 +1,8 @@
-import { BaseWidthSchema as e, BreakpointSchema as t, ButtonType as n, CarouselPageType as r, LayoutWidthsSchema as i, MaxScreenWidthSchema as a, NoticeType as o, ScreenWidthSchema as s, TextSize as c, TextTags as l, TextType as u, zCheckboxLabelPosition as d, zLabelPosition as f, zRadioLabelPosition as p, zTextInputExclusions as m, zTextInputType as h, zTextInputTypes as g } from "./src/utilities/types.esm.js";
-import { defaultColors as _, defaultWidths as v } from "./src/styles/utilities/constants.esm.js";
-import { color as y, colors as b, hexToRgba as x } from "./src/styles/utilities/color.esm.js";
-import { breakpoint as S, media as C, width as w, widths as T } from "./src/styles/utilities/layout.esm.js";
-import { componentSelectors as E } from "./src/styles/theme/components.esm.js";
-import { themeBuilder as D } from "./src/styles/theme/theme.esm.js";
-import { ThemeProvider as O } from "./src/styles/components/ThemeProvider.esm.js";
-export { e as BaseWidthSchema, t as BreakpointSchema, n as ButtonType, r as CarouselPageType, i as LayoutWidthsSchema, a as MaxScreenWidthSchema, o as NoticeType, s as ScreenWidthSchema, c as TextSize, l as TextTags, u as TextType, O as ThemeProvider, S as breakpoint, y as color, b as colors, E as componentSelectors, _ as defaultColors, v as defaultWidths, x as hexToRgba, C as media, D as themeBuilder, w as width, T as widths, d as zCheckboxLabelPosition, f as zLabelPosition, p as zRadioLabelPosition, m as zTextInputExclusions, h as zTextInputType, g as zTextInputTypes };
+import { BaseWidthSchema as e, BreakpointSchema as t, ButtonType as n, CarouselPageType as r, LayoutWidthsSchema as i, MaxScreenWidthSchema as a, NoticeType as o, ScreenWidthSchema as s, TextSize as c, TextTags as l, TextType as u, zCheckboxLabelPosition as d, zInputNumberLabelPosition as f, zLabelPosition as p, zRadioLabelPosition as m, zTextInputExclusions as h, zTextInputType as g, zTextInputTypes as _ } from "./src/utilities/types.esm.js";
+import { defaultColors as v, defaultWidths as y } from "./src/styles/utilities/constants.esm.js";
+import { color as b, colors as x, hexToRgba as S } from "./src/styles/utilities/color.esm.js";
+import { breakpoint as C, media as w, width as T, widths as E } from "./src/styles/utilities/layout.esm.js";
+import { componentSelectors as D } from "./src/styles/theme/components.esm.js";
+import { themeBuilder as O } from "./src/styles/theme/theme.esm.js";
+import { ThemeProvider as k } from "./src/styles/components/ThemeProvider.esm.js";
+export { e as BaseWidthSchema, t as BreakpointSchema, n as ButtonType, r as CarouselPageType, i as LayoutWidthsSchema, a as MaxScreenWidthSchema, o as NoticeType, s as ScreenWidthSchema, c as TextSize, l as TextTags, u as TextType, k as ThemeProvider, C as breakpoint, b as color, x as colors, D as componentSelectors, v as defaultColors, y as defaultWidths, S as hexToRgba, w as media, O as themeBuilder, T as width, E as widths, d as zCheckboxLabelPosition, f as zInputNumberLabelPosition, p as zLabelPosition, m as zRadioLabelPosition, h as zTextInputExclusions, g as zTextInputType, _ as zTextInputTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.39",
+  "version": "0.0.42",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {

package/scripts/prepublishCheck.js

@@ -1,8 +1,13 @@
 #!/usr/bin/env node
-import { readFileSync } from "fs";
+import { existsSync, readFileSync, readdirSync } from "fs";
 import { join } from "path";
 
-const { version } = JSON.parse(readFileSync(join(process.cwd(), "package.json"), "utf-8"));
+// This script ships to dist/ and runs via `npm publish` with no node_modules present
+// (the publish jobs only download the dist/ build artifact), so it must have zero
+// external dependencies. Do not import third-party packages here.
+
+const pkg = JSON.parse(readFileSync(join(process.cwd(), "package.json"), "utf-8"));
+const { version, name: packageName } = pkg;
 const isPreRelease = /-(alpha|beta)\./.test(version);
 
 if (!isPreRelease && !process.env.CI) {
@@ -12,3 +17,69 @@ if (!isPreRelease && !process.env.CI) {
     );
     process.exit(1);
 }
+
+// Agent-facing docs hand-write the package name as literal text (no build-time templating
+// exists for markdown). Guard against it drifting out of sync with package.json's `name`.
+const AGENT_DOC_GLOBS = ["AGENTS.md", "README.md", "skills/**/*.md", "src/components/**/AGENTS.md"];
+// Third-party scoped packages that legitimately appear in these docs.
+const KNOWN_THIRD_PARTY_SCOPES = [
+    "@floating-ui/react-dom",
+    "@storybook/addon-docs",
+    "@atlaskit/pragmatic-drag-and-drop",
+    "@wojtekmaj/react-daterange-picker",
+];
+const scopedPackageRegex = /@[\w.-]+\/[\w-]+/g;
+
+// Minimal stand-in for `glob` supporting only the "literal" and "dir/**/name-or-*.ext"
+// patterns used in AGENT_DOC_GLOBS above.
+const globSync = (pattern, cwd) => {
+    const wildcardIndex = pattern.indexOf("**");
+    if (wildcardIndex === -1) {
+        return existsSync(join(cwd, pattern)) ? [pattern] : [];
+    }
+
+    const baseDir = pattern.slice(0, wildcardIndex).replace(/\/$/, "");
+    const suffix = pattern.slice(wildcardIndex + 2).replace(/^\//, "");
+    const matchesSuffix = (fileName) => (suffix.startsWith("*") ? fileName.endsWith(suffix.slice(1)) : fileName === suffix);
+
+    const results = [];
+    const walk = (relDir) => {
+        const absDir = join(cwd, relDir);
+        if (!existsSync(absDir)) {
+            return;
+        }
+        for (const entry of readdirSync(absDir, { withFileTypes: true })) {
+            const relPath = join(relDir, entry.name);
+            if (entry.isDirectory()) {
+                walk(relPath);
+            } else if (matchesSuffix(entry.name)) {
+                results.push(relPath);
+            }
+        }
+    };
+    walk(baseDir);
+    return results;
+};
+
+const docFiles = AGENT_DOC_GLOBS.flatMap((pattern) => globSync(pattern, process.cwd()));
+const staleReferences = [];
+
+for (const file of docFiles) {
+    const contents = readFileSync(join(process.cwd(), file), "utf-8");
+    const matches = contents.match(scopedPackageRegex) ?? [];
+
+    for (const match of matches) {
+        if (match !== packageName && !KNOWN_THIRD_PARTY_SCOPES.includes(match)) {
+            staleReferences.push(`${file}: ${match}`);
+        }
+    }
+}
+
+if (staleReferences.length > 0) {
+    console.error(
+        `\x1b[31mERROR: Found doc references that don't match package.json's name ("${packageName}"). ` +
+        "Update these files, or add the reference to KNOWN_THIRD_PARTY_SCOPES in scripts/prepublishCheck.js " +
+        `if it's a legitimate third-party package:\x1b[0m\n${staleReferences.join("\n")}`
+    );
+    process.exit(1);
+}

package/skills/craftsman-style-utilities/SKILL.md

@@ -206,18 +206,18 @@ Valid `theme.widths` keys: `"text" | "gutter" | "column" | "tablet" | "desktop"
 
 `ThemeProvider` (and the underlying `themeBuilder`) exposes two related but independent options for controlling how the runtime theme CSS interacts with cascade layers:
 
-- **`layered`** (default `true`) — whether the theme CSS is wrapped in the `craftsman-theme` cascade layer.
+- **`layered`** (default `true`) — whether the theme CSS is wrapped in the `cf-theme` cascade layer.
 - **`hoist`** (default `true`) — whether the theme `<style>` is hoisted to `<head>` via React's resource precedence mechanism. React always inserts a hoisted style as the first stylesheet in the document, which wins any `@layer` name-registration race against your app's own `@layer` order pin.
 
-By default (`hoist: true`), the hoisted style is always the first stylesheet in `<head>` regardless of import order, so its `@layer` declaration always wins the layer-registration race and permanently fixes `craftsman-theme`'s priority relative to any layers a consuming app declares afterward.
+By default (`hoist: true`), the hoisted style is always the first stylesheet in `<head>` regardless of import order, so its `@layer` declaration always wins the layer-registration race and permanently fixes `cf-theme`'s priority relative to any layers a consuming app declares afterward.
 
-If the consuming app uses Tailwind or another framework that declares its own cascade layer order (for example Tailwind's `@layer theme, base, components, utilities;`) and needs that app-level order to win instead, set `hoist: false` so the theme `<style>` renders in normal tree/commit order instead — letting an earlier-declared app-level `@layer` statement control where `craftsman-theme` ranks:
+If the consuming app uses Tailwind or another framework that declares its own cascade layer order (for example Tailwind's `@layer theme, base, components, utilities;`) and needs that app-level order to win instead, set `hoist: false` so the theme `<style>` renders in normal tree/commit order instead — letting an earlier-declared app-level `@layer` statement control where `cf-theme` ranks:
 
 ```tsx
 <ThemeProvider theme={theme} hoist={false} />
 ```
 
-Set `layered: false` (on `ThemeProvider` or `themeBuilder` directly) when the theme CSS should not join `@layer craftsman-theme` at all:
+Set `layered: false` (on `ThemeProvider` or `themeBuilder` directly) when the theme CSS should not join `@layer cf-theme` at all:
 
 ```tsx
 <ThemeProvider theme={theme} layered={false} />
@@ -225,7 +225,7 @@ Set `layered: false` (on `ThemeProvider` or `themeBuilder` directly) when the th
 themeBuilder(theme, { layered: false });
 ```
 
-With `layered: false`, the theme CSS still declares `@layer craftsman-theme` but does not join a Craftsman-owned layer order — the consuming app is responsible for declaring `craftsman-theme` in its own `@layer` order statement wherever it wants that priority to apply.
+With `layered: false`, the theme CSS still declares `@layer cf-theme` but does not join a Craftsman-owned layer order — the consuming app is responsible for declaring `cf-theme` in its own `@layer` order statement wherever it wants that priority to apply.
 
 ### Theme Authoring Usage Parameters
 

package/src/components/Accordion/Accordion.css

@@ -1 +1 @@
-@layer craftsman-component{.accordion{border:1px solid var(--gray400);border-radius:calc(var(--w-gutter) * .5);flex-direction:column;display:flex;overflow:hidden}.accordion-item{border-bottom:1px solid var(--gray400)}.accordion-item:last-child{border-bottom:none}.accordion-item[data-disabled=true] .accordion-trigger{cursor:not-allowed;color:var(--gray400)}.accordion-item>.accordion-content{padding:calc(var(--w-gutter) * .75) var(--w-gutter)}.accordion-item>.accordion-content[hidden]{display:none}.accordion-trigger{justify-content:space-between;align-items:center;gap:calc(var(--w-gutter) * .5);width:100%;padding:calc(var(--w-gutter) * .75) var(--w-gutter);background-color:var(--white);text-align:left;color:inherit;border:none;display:flex}.accordion-trigger:focus-visible{outline:2px solid var(--blue500);outline-offset:-2px}.accordion-trigger span{flex-grow:1}.accordion-trigger svg{flex:none;transition:transform .2s;transform:rotate(180deg)}.accordion-item[data-expanded=true] .accordion-trigger svg{transform:rotate(0)}}
+@layer cf-component{.accordion{border:1px solid var(--gray400);border-radius:calc(var(--w-gutter) * .5);flex-direction:column;display:flex;overflow:hidden}.accordion-item{border-bottom:1px solid var(--gray400)}.accordion-item:last-child{border-bottom:none}.accordion-item[data-disabled=true] .accordion-trigger{cursor:not-allowed;color:var(--gray400)}.accordion-item>.accordion-content{padding:calc(var(--w-gutter) * .75) var(--w-gutter)}.accordion-item>.accordion-content[hidden]{display:none}.accordion-trigger{justify-content:space-between;align-items:center;gap:calc(var(--w-gutter) * .5);width:100%;padding:calc(var(--w-gutter) * .75) var(--w-gutter);background-color:var(--white);text-align:left;color:inherit;border:none;display:flex}.accordion-trigger:focus-visible{outline:2px solid var(--blue500);outline-offset:-2px}.accordion-trigger span{flex-grow:1}.accordion-trigger svg{flex:none;transition:transform .2s;transform:rotate(180deg)}.accordion-item[data-expanded=true] .accordion-trigger svg{transform:rotate(0)}}

package/src/components/Accordion/Accordion.scss

@@ -1,6 +1,6 @@
 @use "../../styles/utilities/_functions" as u;
 
-@layer craftsman-component {
+@layer cf-component {
     .accordion {
         display: flex;
         flex-direction: column;

package/src/components/Carousel/Carousel.css

@@ -1 +1 @@
-@layer craftsman-component{.carousel{position:relative}.carousel__viewport{overflow:hidden}.carousel__container{touch-action:pan-y pinch-zoom;display:flex}.carousel__slide{flex:0 0 100%;min-width:0}.carousel__controls{justify-content:space-between;gap:calc(var(--w-gutter) * .5);margin-top:calc(var(--w-gutter) * .75);flex-flow:row;width:100%;display:inline-flex}.carousel__dots button{margin:0 calc(var(--w-gutter) * .125)}}
+@layer cf-component{.carousel{position:relative}.carousel__viewport{overflow:hidden}.carousel__container{touch-action:pan-y pinch-zoom;display:flex}.carousel__slide{flex:0 0 100%;min-width:0}.carousel__controls{justify-content:space-between;gap:calc(var(--w-gutter) * .5);margin-top:calc(var(--w-gutter) * .75);flex-flow:row;width:100%;display:inline-flex}.carousel__dots button{margin:0 calc(var(--w-gutter) * .125)}}

package/src/components/Carousel/Carousel.scss

@@ -1,6 +1,6 @@
 @use "../../styles/utilities/_functions" as u;
 
-@layer craftsman-component {
+@layer cf-component {
     .carousel {
         position: relative;
 

package/src/components/DatePicker/DatePicker.css

@@ -1 +1 @@
-@layer craftsman-base{.react-date-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}@layer craftsman-component{.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}}
+@layer cf-base{.react-date-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}@layer cf-component{.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}}

package/src/components/DatePicker/DatePicker.scss

@@ -2,7 +2,7 @@
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
 @use "./_DatePicker";
-@layer craftsman-base {
+@layer cf-base {
     .react-date-picker,
     .react-date-picker *,
     .react-date-picker *:before,

package/src/components/DatePicker/ReactCalendar.css

@@ -1 +1 @@
-.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}@layer craftsman-base{.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{margin:-.5em;display:flex}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar button{border:0;outline:none;margin:0}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{height:44px;margin-bottom:1em;display:flex}.react-calendar__navigation button{background:0 0;min-width:44px}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{font:inherit;justify-content:center;align-items:center;font-size:.75em;font-weight:700;display:flex}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__tile:disabled{color:#ababab;background-color:#f0f0f0}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{color:#fff;background:#006edc}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-calendar{border-color:var(--gray400)}.react-calendar button{border-radius:unset;justify-content:center;padding:12px 0}.react-calendar__year-view button,.react-calendar__decade-view button,.react-calendar__century-view button{padding:18px 0}}
+.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}@layer cf-base{.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{margin:-.5em;display:flex}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar button{border:0;outline:none;margin:0}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{height:44px;margin-bottom:1em;display:flex}.react-calendar__navigation button{background:0 0;min-width:44px}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{font:inherit;justify-content:center;align-items:center;font-size:.75em;font-weight:700;display:flex}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__tile:disabled{color:#ababab;background-color:#f0f0f0}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{color:#fff;background:#006edc}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-calendar{border-color:var(--gray400)}.react-calendar button{border-radius:unset;justify-content:center;padding:12px 0}.react-calendar__year-view button,.react-calendar__decade-view button,.react-calendar__century-view button{padding:18px 0}}

package/src/components/DatePicker/ReactCalendar.scss

@@ -1,7 +1,7 @@
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
 
-@layer craftsman-base {
+@layer cf-base {
     .react-calendar,
     .react-calendar *,
     .react-calendar *:before,

package/src/components/DatePicker/_DatePicker.scss

@@ -2,7 +2,7 @@
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
 
-@layer craftsman-component {
+@layer cf-component {
     %date-picker-styles {
         display: inline-flex;
         position: relative;

package/src/components/DateRangePicker/DateRangePicker.css

@@ -1 +1 @@
-@layer craftsman-base{.react-daterange-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer craftsman-component{.react-daterange-picker{display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}
+@layer cf-base{.react-daterange-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer cf-component{.react-daterange-picker{display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}

package/src/components/DateRangePicker/DateRangePicker.scss

@@ -2,7 +2,7 @@
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
 @use "../DatePicker/_DatePicker";
-@layer craftsman-component {
+@layer cf-component {
     .react-daterange-picker,
     .react-daterange-picker *,
     .react-daterange-picker *:before,

package/src/components/DateTimePicker/DateTimePicker.css

@@ -1 +1 @@
-@layer craftsman-base{.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer craftsman-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}
+@layer cf-base{.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer cf-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}

package/src/components/DateTimePicker/DateTimePicker.scss

@@ -2,7 +2,7 @@
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
 @use "../DatePicker/_DatePicker";
-@layer craftsman-component {
+@layer cf-component {
     .react-datetime-picker,
     .react-datetime-picker *,
     .react-datetime-picker *:before,

package/src/components/Input/Input.css

@@ -1 +1 @@
-@layer craftsman-base{.input-pre-adornment,.input-end-adornment{z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .25);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .45);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label,.input-wrapper[data-label-position=inside].select .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] .input::placeholder{opacity:0;transition:opacity .2s}.input-field{align-items:center;display:inline-flex;position:relative}.input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * 1.5)}.input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * 2.25)}.input-end-adornment{right:calc(var(--w-gutter) * .5)}.input-pre-adornment{left:calc(var(--w-gutter) * .5)}.input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}}
+@layer cf-base{.input-pre-adornment,.input-end-adornment{z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .25);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .45);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label,.input-wrapper[data-label-position=inside].select .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] .input::placeholder{opacity:0;transition:opacity .2s}.input-field{align-items:center;display:inline-flex;position:relative}.input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * 1.5)}.input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * 2.25)}.input-end-adornment{right:calc(var(--w-gutter) * .5)}.input-pre-adornment{left:calc(var(--w-gutter) * .5)}.input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}}

package/src/components/Input/Input.scss

@@ -7,7 +7,7 @@
     font-size: #{u.width("text", 0.75)};
 }
 // This is in base layer because many components implement it.
-@layer craftsman-base {
+@layer cf-base {
     %input-adornment {
         position: absolute;
         top: 50%;

package/src/components/InputNumber/InputNumber.css

@@ -1 +1 @@
-@layer craftsman-base;@layer craftsman-component{.inputNumber.input-wrapper[data-label-position=inside] .input-label{left:40px}.inputNumber .input-field{gap:calc(var(--w-gutter) * .5)}.inputNumber .input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * .75)}.inputNumber .input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * .75)}.inputNumber .input-end-adornment,.inputNumber .input-pre-adornment{position:unset;transform:unset;top:unset}}
+@layer cf-base;@layer cf-component{.inputNumber.input-wrapper[data-label-position=inside] .input-label{left:40px}.inputNumber .input-field{gap:calc(var(--w-gutter) * .5)}.inputNumber .input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * .75)}.inputNumber .input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * .75)}.inputNumber .input-end-adornment,.inputNumber .input-pre-adornment{position:unset;transform:unset;top:unset}}

package/src/components/InputNumber/InputNumber.d.ts

@@ -1,7 +1,8 @@
-import { TextInputType } from '../../utilities/types';
+import { InputNumberLabelPosition, TextInputType } from '../../utilities/types';
 import { InputProps } from '../Input/Input';
-export type InputNumberProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment"> & {
+export type InputNumberProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment" | "labelPosition"> & {
     type?: Extract<TextInputType, "number">;
+    labelPosition?: InputNumberLabelPosition;
     onDecrement?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onIncrement?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     iconIncrement?: React.ReactNode;

package/src/components/InputNumber/InputNumber.scss

@@ -2,7 +2,7 @@
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/utilities/_placeholders";
 
-@layer craftsman-component {
+@layer cf-component {
     .inputNumber {
         &.input-wrapper[data-label-position=inside] .input-label {
             left: 40px;

package/src/components/InputPhone/InputPhone.css

@@ -1 +1 @@
-@layer craftsman-base;@layer craftsman-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.inputPhone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.inputPhone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.inputPhone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.inputPhone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.inputPhone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.inputPhone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size,4px) solid var(--react-international-phone-country-selector-arrow-color,#777);border-right:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.inputPhone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.inputPhone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin,0);background:var(--react-international-phone-dropdown-preferred-list-divider-color,var(--react-international-phone-border-color,gainsboro));border:none}.inputPhone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.inputPhone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color,var(--react-international-phone-text-color,#222))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color,var(--react-international-phone-dropdown-item-dial-code-color,gray))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.inputPhone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.inputPhone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.inputPhone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));background-color:var(--react-international-phone-dial-code-preview-background-color,var(--react-international-phone-background-color,white));color:var(--react-international-phone-dial-code-preview-text-color,var(--react-international-phone-text-color,#222));font-size:var(--react-international-phone-dial-code-preview-font-size,var(--react-international-phone-font-size,13px));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.inputPhone .react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color,var(--react-international-phone-disabled-text-color,#666))}.inputPhone .react-international-phone-input-container{display:flex}.inputPhone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.inputPhone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.inputPhone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.inputPhone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}
+@layer cf-base;@layer cf-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.inputPhone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.inputPhone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.inputPhone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.inputPhone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.inputPhone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.inputPhone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size,4px) solid var(--react-international-phone-country-selector-arrow-color,#777);border-right:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.inputPhone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.inputPhone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin,0);background:var(--react-international-phone-dropdown-preferred-list-divider-color,var(--react-international-phone-border-color,gainsboro));border:none}.inputPhone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.inputPhone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color,var(--react-international-phone-text-color,#222))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color,var(--react-international-phone-dropdown-item-dial-code-color,gray))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.inputPhone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.inputPhone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.inputPhone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));background-color:var(--react-international-phone-dial-code-preview-background-color,var(--react-international-phone-background-color,white));color:var(--react-international-phone-dial-code-preview-text-color,var(--react-international-phone-text-color,#222));font-size:var(--react-international-phone-dial-code-preview-font-size,var(--react-international-phone-font-size,13px));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.inputPhone .react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color,var(--react-international-phone-disabled-text-color,#666))}.inputPhone .react-international-phone-input-container{display:flex}.inputPhone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.inputPhone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.inputPhone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.inputPhone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}

package/src/components/InputPhone/InputPhone.scss

@@ -1,6 +1,6 @@
 @use "../../styles/global/components/input";
 @use "../../styles/utilities/_functions" as u;
-@layer craftsman-component {
+@layer cf-component {
     .inputPhone {
         &[data-label-position="inside"] {
             .input-label {

package/src/components/Loader/loaders.module.css

@@ -1 +1 @@
-@layer craftsman-base{._dots_mugu5_2{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_mugu5_1}@keyframes _l5_mugu5_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes _l3_mugu5_1{to{transform:rotate(1turn)}}._dots-trace_mugu5_41{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_mugu5_1}@keyframes _l1_mugu5_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_mugu5_53{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_mugu5_1;display:grid}._dots-orbit_mugu5_53:before,._dots-orbit_mugu5_53:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_mugu5_1;transform:rotate(0)translate(150%)}._dots-orbit_mugu5_53:after{animation-delay:-.5s}@keyframes _l22-0_mugu5_1{to{transform:rotate(1turn)}}@keyframes _l22_mugu5_1{to{transform:rotate(1turn)translate(150%)}}._dashes_mugu5_83{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_mugu5_83}@keyframes _dashes_mugu5_83{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_mugu5_108{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_mugu5_1}@keyframes _l2_mugu5_1{to{transform:rotate(1turn)}}._swirl_mugu5_121{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_mugu5_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_mugu5_141{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_mugu5_1}@keyframes _l9_mugu5_1{to{transform:rotate(1turn)}}._boxy_mugu5_153{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_mugu5_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_mugu5_1{to{background-position:right -25% top 0}}}
+@layer cf-base{._dots_1i7k4_2{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_1i7k4_1}@keyframes _l5_1i7k4_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes _l3_1i7k4_1{to{transform:rotate(1turn)}}._dots-trace_1i7k4_41{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_1i7k4_1}@keyframes _l1_1i7k4_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_1i7k4_53{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_1i7k4_1;display:grid}._dots-orbit_1i7k4_53:before,._dots-orbit_1i7k4_53:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_1i7k4_1;transform:rotate(0)translate(150%)}._dots-orbit_1i7k4_53:after{animation-delay:-.5s}@keyframes _l22-0_1i7k4_1{to{transform:rotate(1turn)}}@keyframes _l22_1i7k4_1{to{transform:rotate(1turn)translate(150%)}}._dashes_1i7k4_83{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_1i7k4_83}@keyframes _dashes_1i7k4_83{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_1i7k4_108{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_1i7k4_1}@keyframes _l2_1i7k4_1{to{transform:rotate(1turn)}}._swirl_1i7k4_121{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_1i7k4_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_1i7k4_141{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_1i7k4_1}@keyframes _l9_1i7k4_1{to{transform:rotate(1turn)}}._boxy_1i7k4_153{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_1i7k4_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_1i7k4_1{to{background-position:right -25% top 0}}}

package/src/components/Loader/loaders.module.scss

@@ -1,4 +1,4 @@
-@layer craftsman-base {
+@layer cf-base {
 .dots {
     aspect-ratio: 1;
     border-radius: 50%;

package/src/components/Loader/loaders.module.style.esm.js

@@ -1,5 +1,5 @@
 import './loaders.module.css';//#region src/components/Loader/loaders.module.scss
-var e = "_dots_mugu5_2", t = "_l5_mugu5_1", n = "_dots-trace_mugu5_41", r = "_l1_mugu5_1", i = "_dots-orbit_mugu5_53", a = "_l22-0_mugu5_1", o = "_l22_mugu5_1", s = "_dashes_mugu5_83", c = "_spinner_mugu5_108", l = "_l2_mugu5_1", u = "_swirl_mugu5_121", d = "_l3_mugu5_1", f = "_ball_mugu5_141", p = "_l9_mugu5_1", m = "_boxy_mugu5_153", h = "_l7_mugu5_1", g = {
+var e = "_dots_1i7k4_2", t = "_l5_1i7k4_1", n = "_dots-trace_1i7k4_41", r = "_l1_1i7k4_1", i = "_dots-orbit_1i7k4_53", a = "_l22-0_1i7k4_1", o = "_l22_1i7k4_1", s = "_dashes_1i7k4_83", c = "_spinner_1i7k4_108", l = "_l2_1i7k4_1", u = "_swirl_1i7k4_121", d = "_l3_1i7k4_1", f = "_ball_1i7k4_141", p = "_l9_1i7k4_1", m = "_boxy_1i7k4_153", h = "_l7_1i7k4_1", g = {
 	dots: e,
 	l5: t,
 	dotsTrace: n,

package/src/components/Modal/Modal.css

@@ -1 +1 @@
-@layer craftsman-base{.modal.wrapper,.modal .background{width:100%;height:100%;position:fixed;inset:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}@layer craftsman-component{.modal.wrapper{z-index:1000;justify-content:center;align-items:center;display:flex}.modal .background{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}.modal .background[data-is-closing=true]{animation:.3s ease-in-out fadeOut}.modal .background[data-is-closing=false]{animation:.3s ease-in-out fadeIn}.modal .content{padding:var(--w-gutter);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}.modal .content[data-is-closing=true]{animation:.3s ease-in-out slideOut}.modal .content[data-is-closing=false]{animation:.3s ease-in-out slideIn}.modal .content.panel{height:100%;position:fixed;top:0;right:0}.modal .content.dialog{border-radius:8px}.modal .content>header{width:100%;margin-bottom:calc(var(--w-gutter) * .5);justify-content:space-between;display:inline-flex}.modal .content>header>button:only-child{margin-left:auto}.modal .actionContainer{margin-top:calc(var(--w-gutter) * 2);background-color:var(--white);gap:var(--w-gutter);height:fit-content;display:flex}.modal .closeModal{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){.modal .content.panel,.modal .content.dialog{width:100%;height:100%}}@media (width>=660px){.modal .content.panel{width:calc((var(--w-column) * 4) + (var(--w-gutter) * 3))}.modal .content.dialog{width:calc((var(--w-column) * 6) + (var(--w-gutter) * 5))}}@media (width>=1040px){.modal .content.dialog{width:calc((var(--w-column) * 8) + (var(--w-gutter) * 7))}}}
+@layer cf-base{.modal.wrapper,.modal .background{width:100%;height:100%;position:fixed;inset:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}@layer cf-component{.modal.wrapper{z-index:1000;justify-content:center;align-items:center;display:flex}.modal .background{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}.modal .background[data-is-closing=true]{animation:.3s ease-in-out fadeOut}.modal .background[data-is-closing=false]{animation:.3s ease-in-out fadeIn}.modal .content{padding:var(--w-gutter);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}.modal .content[data-is-closing=true]{animation:.3s ease-in-out slideOut}.modal .content[data-is-closing=false]{animation:.3s ease-in-out slideIn}.modal .content.panel{height:100%;position:fixed;top:0;right:0}.modal .content.dialog{border-radius:8px}.modal .content>header{width:100%;margin-bottom:calc(var(--w-gutter) * .5);justify-content:space-between;display:inline-flex}.modal .content>header>button:only-child{margin-left:auto}.modal .actionContainer{margin-top:calc(var(--w-gutter) * 2);background-color:var(--white);gap:var(--w-gutter);height:fit-content;display:flex}.modal .closeModal{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){.modal .content.panel,.modal .content.dialog{width:100%;height:100%}}@media (width>=660px){.modal .content.panel{width:calc((var(--w-column) * 4) + (var(--w-gutter) * 3))}.modal .content.dialog{width:calc((var(--w-column) * 6) + (var(--w-gutter) * 5))}}@media (width>=1040px){.modal .content.dialog{width:calc((var(--w-column) * 8) + (var(--w-gutter) * 7))}}}

package/src/components/Modal/Modal.scss

@@ -40,7 +40,7 @@
     transform: translateY(100%);
   }
 }
-@layer craftsman-component {
+@layer cf-component {
     .modal {
         &.wrapper {
             @extend %modal-overlay;

package/src/components/Notice/Notice.css

@@ -1 +1 @@
-@layer craftsman-component{.notice{gap:calc(var(--w-gutter) * .5);padding:var(--w-gutter);border:1px solid var(--gray400);background-color:var(--white);border-left-width:3px;border-radius:4px;flex-direction:column;transition:opacity .5s ease-in-out;display:flex}.notice.info{border-color:var(--blue500);background-color:var(--blue50);color:var(--blue600)}.notice.success{border-color:var(--green500);background-color:var(--green50);border-color:var(--green500)}.notice.error{border-color:var(--red500);background-color:var(--red50);color:var(--red600)}.notice.help{border-color:var(--gray500);background-color:var(--gray50)}.notice button.text{color:inherit}.notice-contents{align-items:flex-start;gap:calc(var(--w-gutter) * .5);flex-flow:row;width:100%;display:flex}.notice-icon{flex:none;font-size:24px;display:flex}.notice-text{margin-top:calc(var(--w-gutter) * .25);flex-grow:1}.notice-text span{display:block}.notice-dismiss{flex:none;padding:0}.notice-buttons{justify-content:flex-end;gap:calc(var(--w-gutter) * .5);width:100%;display:flex}}
+@layer cf-component{.notice{gap:calc(var(--w-gutter) * .5);padding:var(--w-gutter);border:1px solid var(--gray400);background-color:var(--white);border-left-width:3px;border-radius:4px;flex-direction:column;transition:opacity .5s ease-in-out;display:flex}.notice.info{border-color:var(--blue500);background-color:var(--blue50);color:var(--blue600)}.notice.success{border-color:var(--green500);background-color:var(--green50);border-color:var(--green500)}.notice.error{border-color:var(--red500);background-color:var(--red50);color:var(--red600)}.notice.help{border-color:var(--gray500);background-color:var(--gray50)}.notice button.text{color:inherit}.notice-contents{align-items:flex-start;gap:calc(var(--w-gutter) * .5);flex-flow:row;width:100%;display:flex}.notice-icon{flex:none;font-size:24px;display:flex}.notice-text{margin-top:calc(var(--w-gutter) * .25);flex-grow:1}.notice-text span{display:block}.notice-dismiss{flex:none;padding:0}.notice-buttons{justify-content:flex-end;gap:calc(var(--w-gutter) * .5);width:100%;display:flex}}

package/src/components/Notice/Notice.scss

@@ -1,6 +1,6 @@
 @use "../../styles/utilities/_functions" as u;
 
-@layer craftsman-component {
+@layer cf-component {
     .notice {
         transition: opacity 500ms ease-in-out;
         display: flex;

package/src/components/Pagination/Pagination.css

@@ -1 +1 @@
-@layer craftsman-component{.pagination{align-items:center;gap:calc(var(--w-gutter) * .25);display:inline-flex}.pagination .active{color:var(--gray700);border:1px solid;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}}
+@layer cf-component{.pagination{align-items:center;gap:calc(var(--w-gutter) * .25);display:inline-flex}.pagination .active{color:var(--gray700);border:1px solid;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}}

package/src/components/Pagination/Pagination.scss

@@ -1,7 +1,7 @@
 
 @use "../../styles/utilities/_functions" as u;
 
-@layer craftsman-component {
+@layer cf-component {
     .pagination {
         display: inline-flex;
         align-items: center;

package/src/components/SortableList/SortableList.css

@@ -1 +1 @@
-@layer craftsman-component{.sortable-list{gap:calc(var(--w-gutter) * .25);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.sortable-list-item{cursor:grab;transition:transform .2s,opacity .15s;position:relative}.sortable-list-item.dragging{opacity:.4}.sortable-list-item.drop-top:before,.sortable-list-item.drop-bottom:after{content:"";background-color:var(--blue500);border-radius:1px;height:2px;position:absolute;left:0;right:0}.sortable-list-item.drop-top:before{top:-1px}.sortable-list-item.drop-bottom:after{bottom:-1px}}
+@layer cf-component{.sortable-list{gap:calc(var(--w-gutter) * .25);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.sortable-list-item{cursor:grab;transition:transform .2s,opacity .15s;position:relative}.sortable-list-item.dragging{opacity:.4}.sortable-list-item.drop-top:before,.sortable-list-item.drop-bottom:after{content:"";background-color:var(--blue500);border-radius:1px;height:2px;position:absolute;left:0;right:0}.sortable-list-item.drop-top:before{top:-1px}.sortable-list-item.drop-bottom:after{bottom:-1px}}

package/src/components/SortableList/SortableList.scss

@@ -1,6 +1,6 @@
 @use "../../styles/utilities/_functions" as u;
 
-@layer craftsman-component {
+@layer cf-component {
     .sortable-list {
         display: flex;
         flex-direction: column;

package/src/components/Text/Text.css

@@ -1 +1 @@
-@layer craftsman-component{.text.display{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.2}.text.paragraph{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.xlarge,.text.large{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.paragraph.medium,.text.medium{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.small,.text.small{font-size:calc(var(--w-text) * .75)}.text.paragraph.xsmall,.text.xsmall{font-size:calc(var(--w-text) * .5)}.text.caption{font-size:calc(var(--w-text) * .75)}.text.center{text-align:center}.text.left{text-align:left}.text.right{text-align:right}}
+@layer cf-component{.text.display{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.2}.text.paragraph{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.xlarge,.text.large{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.paragraph.medium,.text.medium{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.small,.text.small{font-size:calc(var(--w-text) * .75)}.text.paragraph.xsmall,.text.xsmall{font-size:calc(var(--w-text) * .5)}.text.caption{font-size:calc(var(--w-text) * .75)}.text.center{text-align:center}.text.left{text-align:left}.text.right{text-align:right}}

package/src/components/Text/Text.scss

@@ -1,6 +1,6 @@
 @use "../../styles/utilities/_functions" as u;
 @use "../../styles/global/components/typography" as t;
-@layer craftsman-component {
+@layer cf-component {
     .text {
         // --- display ---
         &.display {

package/src/components/TimePicker/TimePicker.css

@@ -1 +1 @@
-@layer craftsman-base{.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer craftsman-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}
+@layer cf-base{.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer cf-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}

package/src/components/TimePicker/TimePicker.scss

@@ -3,7 +3,7 @@
 @use "../../styles/utilities/_placeholders";
 @use "../DatePicker/_DatePicker";
 
-@layer craftsman-component {
+@layer cf-component {
     .react-time-picker,
     .react-time-picker *,
     .react-time-picker *:before,

package/src/components/Toggle/Toggle.css

@@ -1 +1 @@
-@layer craftsman-component{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}
+@layer cf-component{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}

package/src/components/Toggle/Toggle.scss

@@ -1,6 +1,6 @@
 @use "../../styles/utilities/_functions" as u;
 
-@layer craftsman-component {
+@layer cf-component {
     .input-wrapper.toggle {
         > label {
             display: inline-flex;

package/src/components/Tooltip/Tooltip.css

@@ -1 +1 @@
-@layer craftsman-component{.tooltip{--tooltip-bg:var(--gray800)}.tooltip__floating{background-color:var(--tooltip-bg);color:var(--white);padding:calc(var(--w-gutter) * .25) calc(var(--w-gutter) * .5);border-radius:6px;position:relative}.tooltip__floating:before{content:"";background-color:var(--tooltip-bg);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.tooltip__floating[data-placement^=bottom]:before{margin-left:-4px;top:-4px;left:50%}.tooltip__floating[data-placement^=top]:before{margin-left:-4px;bottom:-4px;left:50%}.tooltip__floating[data-placement^=left]:before{margin-top:-4px;top:50%;right:-4px}.tooltip__floating[data-placement^=right]:before{margin-top:-4px;top:50%;left:-4px}}
+@layer cf-component{.tooltip{--tooltip-bg:var(--gray800)}.tooltip__floating{background-color:var(--tooltip-bg);color:var(--white);padding:calc(var(--w-gutter) * .25) calc(var(--w-gutter) * .5);border-radius:6px;position:relative}.tooltip__floating:before{content:"";background-color:var(--tooltip-bg);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.tooltip__floating[data-placement^=bottom]:before{margin-left:-4px;top:-4px;left:50%}.tooltip__floating[data-placement^=top]:before{margin-left:-4px;bottom:-4px;left:50%}.tooltip__floating[data-placement^=left]:before{margin-top:-4px;top:50%;right:-4px}.tooltip__floating[data-placement^=right]:before{margin-top:-4px;top:50%;left:-4px}}

package/src/components/Tooltip/Tooltip.scss

@@ -1,6 +1,6 @@
 @use "../../styles/utilities/_functions" as u;
 
-@layer craftsman-component {
+@layer cf-component {
     .tooltip {
         --tooltip-bg: #{u.color("gray800")};
 

package/src/styles/components/ThemeProvider.esm.js

@@ -1,7 +1,7 @@
 import { themeBuilder as e } from "../theme/theme.esm.js";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/styles/components/ThemeProvider.tsx
-function i({ theme: i, children: a, precedence: o = "high", href: s = "stamcat-craftsman-theme-provider", layered: c = !0 }) {
+function i({ theme: i, children: a, precedence: o = "high", href: s = "craftsman-theme-provider", layered: c = !0 }) {
 	let l = e(i || {}, { layered: c });
 	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("style", {
 		...o === !1 ? {} : {

package/src/styles/global/components/_button.scss

@@ -1,6 +1,6 @@
 @use "../../utilities/functions" as u;
 
-@layer craftsman-base {
+@layer cf-base {
   %text-link {
       padding: 0;
       border: none;

package/src/styles/global/components/_checkbox.scss

@@ -1,6 +1,6 @@
 @use "../../utilities/functions" as u;
 
-@layer craftsman-base {
+@layer cf-base {
     %checkbox {
         appearance: none;
         box-sizing: border-box;

package/src/styles/global/components/_code.scss

@@ -1,6 +1,6 @@
 @use "../../utilities/functions" as u;
 
-@layer craftsman-base {
+@layer cf-base {
     %code {
         background-color: var(--gray200);
         color: var(--gray800);

package/src/styles/global/components/_input.scss

@@ -1,6 +1,6 @@
 @use "../../utilities/functions" as u;
 
-@layer craftsman-base {
+@layer cf-base {
 
   %input-base {
     color: var(--text);

package/src/styles/global/components/_modal.scss

@@ -1,4 +1,4 @@
-@layer craftsman-base {
+@layer cf-base {
     %modal-overlay {
     position: fixed;
     width: 100%;

package/src/styles/global/components/_radioButton.scss

@@ -1,6 +1,6 @@
 @use "../../utilities/functions" as u;
 
-@layer craftsman-base {
+@layer cf-base {
     %radio {
         transition: border-color 0.2s ease;
         appearance: none;

package/src/styles/global/components/_select.scss

@@ -1,6 +1,6 @@
 @use "../../utilities/functions" as u;
 @use "./input";
-@layer craftsman-base {
+@layer cf-base {
     %select-styles {
         padding-right: 40px;
         position: relative;

package/src/styles/global/globalStyles.scss

@@ -8,9 +8,9 @@
 @use "./components/select";
 @use "../utilities/functions" as u;
 
-@layer craftsman-base, craftsman-component, craftsman-theme;
+@layer cf-base, cf-component, cf-theme;
 
-@layer craftsman-base {
+@layer cf-base {
     :root {
         color-scheme: light dark;
         font-synthesis: none;

package/src/styles/theme/theme.esm.js

@@ -36,13 +36,13 @@ function l(e, n) {
 	].filter(Boolean).join("\n");
 	return o ? [
 		`:root { ${i} ${r} }`,
-		"@layer craftsman-base, craftsman-theme;",
-		"@layer craftsman-theme {",
+		"@layer cf-base, cf-theme;",
+		"@layer cf-theme {",
 		l,
 		"}"
 	].filter(Boolean).join("\n") : [
 		`:root { ${i} ${r} }`,
-		"@layer craftsman-theme {",
+		"@layer cf-theme {",
 		l,
 		"}"
 	].filter(Boolean).join("\n");

package/src/utilities/types.d.ts

@@ -95,9 +95,18 @@ export declare const zRadioLabelPosition: z.ZodEnum<{
     right: "right";
 }>;
 export type RadioLabelPosition = z.infer<typeof zRadioLabelPosition>;
+export declare const zInputNumberLabelPosition: z.ZodEnum<{
+    hidden: "hidden";
+    top: "top";
+    left: "left";
+    bottom: "bottom";
+    right: "right";
+}>;
+export type InputNumberLabelPosition = z.infer<typeof zInputNumberLabelPosition>;
 export declare const ButtonType: z.ZodEnum<{
     text: "text";
     primary: "primary";
+    secondary: "secondary";
     default: "default";
 }>;
 export type ButtonType = z.infer<typeof ButtonType>;

package/src/utilities/types.esm.js

@@ -49,11 +49,12 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"right",
 	"inside",
 	"hidden"
-]), u = l.exclude(["inside", "hidden"]), d = l.extract(["left", "right"]), f = e.enum([
+]), u = l.exclude(["inside", "hidden"]), d = l.extract(["left", "right"]), f = l.exclude(["inside"]), p = e.enum([
 	"primary",
+	"secondary",
 	"default",
 	"text"
-]), p = e.enum([
+]), m = e.enum([
 	"h1",
 	"h2",
 	"h3",
@@ -62,19 +63,19 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"p",
 	"span",
 	"div"
-]), m = e.enum([
+]), h = e.enum([
 	"display",
 	"heading",
 	"paragraph",
 	"caption",
 	"small-title"
-]), h = e.enum([
+]), g = e.enum([
 	"xlarge",
 	"large",
 	"medium",
 	"small",
 	"xsmall"
-]), g = e.enum(["dots", "numbers"]), _ = e.enum([
+]), _ = e.enum(["dots", "numbers"]), v = e.enum([
 	"help",
 	"info",
 	"success",
@@ -82,4 +83,4 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"none"
 ]);
 //#endregion
-export { t as BaseWidthSchema, i as BreakpointSchema, f as ButtonType, g as CarouselPageType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, _ as NoticeType, n as ScreenWidthSchema, h as TextSize, p as TextTags, m as TextType, u as zCheckboxLabelPosition, l as zLabelPosition, d as zRadioLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };
+export { t as BaseWidthSchema, i as BreakpointSchema, p as ButtonType, _ as CarouselPageType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, v as NoticeType, n as ScreenWidthSchema, g as TextSize, m as TextTags, h as TextType, u as zCheckboxLabelPosition, f as zInputNumberLabelPosition, l as zLabelPosition, d as zRadioLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };