cherry-styled-components 0.2.8 → 0.2.10

package/README.md

@@ -107,6 +107,25 @@ if (!req.cookies.get("theme")?.value && hint) {
 
 In a client-only app (like this repo's demo, see `src/main.tsx`), resolve the initial theme synchronously from the cookie, `localStorage`, or `matchMedia` before rendering and pass it as `$initial`.
 
+## AI assistant skill
+
+Cherry ships a guide that teaches Claude and other LLMs to build with the library correctly: use Cherry components for every button and form control, read design values from the theme instead of hardcoding them, and wire up the provider. It lives in [`skills/cherry-design-system`](./skills/cherry-design-system) and is documentation only (it is not part of the published npm package).
+
+Install it with the [`skills` CLI](https://github.com/vercel-labs/skills), a cross-agent installer that supports Claude Code, Cursor, Codex, and many others and detects your agent automatically:
+
+```bash
+# add to the current project
+npx -y skills add cherry-design-system/styled-components
+
+# preview what would be installed
+npx -y skills add cherry-design-system/styled-components --list
+
+# install globally for Claude Code, no prompts
+npx -y skills add cherry-design-system/styled-components --skill cherry-design-system -g -a claude-code -y
+```
+
+Update later with `npx skills update cherry-design-system`. `skills` is a third-party CLI; if you would rather not use it, an Agent Skill is just a folder, so copy `skills/cherry-design-system` into `.claude/skills/` (per project) or `~/.claude/skills/` (personal). For other agents, put the folder's `AGENTS.md` at your repo root. The `references/` files load on demand. See the [skill README](./skills/cherry-design-system/README.md) for per-tool setup.
+
 ## Development
 
 To work on the library itself, clone the repo and use pnpm. Node.js v20+ is required for the dev tooling.

package/dist/accordion.js

@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 //#region src/lib/accordion.tsx
 var StyledAccordion = styled.div.withConfig({
 	displayName: "accordion__StyledAccordion",
-	componentId: "sc-4007375b-0"
+	componentId: "sc-20594240-0"
 })([
 	`text-align:left;border-radius:`,
 	`;margin:0;`,
@@ -16,21 +16,23 @@ var StyledAccordion = styled.div.withConfig({
 	`;`,
 	``
 ], ({ theme, $inline }) => $inline ? "0" : theme.spacing.radius.lg, ({ theme }) => styledText(theme), ({ theme }) => theme.colors.light, ({ theme, $inline }) => !$inline && css([`border:solid 1px `, `;`], theme.colors.grayLight));
-var StyledAccordionTitle = styled.h3.withConfig({
+var StyledAccordionTitle = styled.button.withConfig({
 	displayName: "accordion__StyledAccordionTitle",
-	componentId: "sc-4007375b-1"
+	componentId: "sc-20594240-1"
 })([
-	`cursor:pointer;margin:0;`,
+	`appearance:none;border:none;background:none;font-family:inherit;text-align:left;width:100%;box-sizing:border-box;font-weight:700;cursor:pointer;margin:0;`,
 	`;color:`,
 	`;transition:color 0.3s ease;position:relative;padding:`,
 	`;&:hover{color:`,
-	`;}& .lucide-chevron-down{position:absolute;top:50%;transform:translateY(-50%);right:`,
+	`;}&:focus-visible{border-radius:`,
+	`;outline:solid 2px `,
+	`;border-bottom-color:transparent;}& .lucide-chevron-down{position:absolute;top:50%;transform:translateY(-50%);right:`,
 	`;transition:transform 0.3s ease;`,
 	`}`
-], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "8px 40px 8px 0" : "20px 50px 20px 20px", ({ theme }) => theme.colors.primaryDark, ({ $inline }) => $inline ? "0" : "20px", ({ $isOpen }) => $isOpen && css([`transform:translateY(-50%) rotate(180deg);`]));
+], ({ theme }) => styledText(theme), ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "8px 40px 8px 0" : "20px 50px 20px 20px", ({ theme }) => theme.colors.primaryDark, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "0" : "20px", ({ $isOpen }) => $isOpen && css([`transform:translateY(-50%) rotate(180deg);`]));
 var StyledAccordionContent = styled.div.withConfig({
 	displayName: "accordion__StyledAccordionContent",
-	componentId: "sc-4007375b-2"
+	componentId: "sc-20594240-2"
 })([
 	`display:grid;grid-template-rows:`,
 	`;visibility:`,
@@ -38,11 +40,11 @@ var StyledAccordionContent = styled.div.withConfig({
 ], ({ $isOpen }) => $isOpen ? "1fr" : "0fr", ({ $isOpen }) => $isOpen ? "visible" : "hidden");
 var StyledAccordionInner = styled.div.withConfig({
 	displayName: "accordion__StyledAccordionInner",
-	componentId: "sc-4007375b-3"
+	componentId: "sc-20594240-3"
 })([`min-height:0;overflow:clip;`]);
 var StyledAccordionBody = styled.div.withConfig({
 	displayName: "accordion__StyledAccordionBody",
-	componentId: "sc-4007375b-4"
+	componentId: "sc-20594240-4"
 })([
 	``,
 	`;color:`,
@@ -64,10 +66,10 @@ function Accordion({ children, title, onToggle, $inline, defaultOpen, open, ...r
 		$inline,
 		...rest,
 		children: [/*#__PURE__*/ jsxs(StyledAccordionTitle, {
+			type: "button",
 			onClick: handleToggle,
 			$isOpen: isOpen,
 			$inline,
-			role: "button",
 			"aria-expanded": isOpen,
 			children: [
 				title,

package/dist/index.js

@@ -1,5 +1,4 @@
 import { GlobalStyles } from "./utils/global.js";
-import { IconArrow, IconCalendar, IconCheck } from "./utils/icons.js";
 import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
 import { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
 import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
@@ -31,4 +30,4 @@ import { Textarea } from "./textarea.js";
 import { ThemeToggle } from "./theme-toggle.js";
 import { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };
+export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };

package/dist/input.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { IStyledComponent } from 'styled-components';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    children?: React.ReactNode;
     $wrapperClassName?: string;
     $label?: string;
     $size?: "default" | "big" | "small";

package/dist/input.js

@@ -1,14 +1,14 @@
 "use client";
 "use client";
-import { IconCalendar, IconCheck } from "./utils/icons.js";
 import { formElementHeightStyles, fullWidthStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-5e52a0cd-0"
+	componentId: "sc-f294a26b-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
@@ -20,7 +20,7 @@ var StyledInputWrapper = styled.span.withConfig({
 ], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;align-content:flex-start;`]), ({ $size }) => $size === "small" ? "14px" : "17px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledLabel = styled.label.withConfig({
 	displayName: "input__StyledLabel",
-	componentId: "sc-5e52a0cd-1"
+	componentId: "sc-f294a26b-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -29,7 +29,7 @@ var StyledLabel = styled.label.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
 var StyledInput = styled.input.withConfig({
 	displayName: "input__StyledInput",
-	componentId: "sc-5e52a0cd-2"
+	componentId: "sc-f294a26b-2"
 })([
 	``,
 	`;`,
@@ -85,11 +85,15 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-5e52a0cd-3"
-})([`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`, `;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.7);opacity:0;pointer-events:none;transition:all 0.3s ease;}`], ({ theme }) => theme.colors.primary);
+	componentId: "sc-f294a26b-3"
+})([
+	`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`,
+	`;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;color:`,
+	`;transform:translate(-50%,-50%) scale(0.7);opacity:0;pointer-events:none;transition:all 0.3s ease;}`
+], ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary);
 var StyledRadioCheckboxInput = styled.input.withConfig({
 	displayName: "input__StyledRadioCheckboxInput",
-	componentId: "sc-5e52a0cd-4"
+	componentId: "sc-f294a26b-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -103,7 +107,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 	` `,
 	` `,
 	` `,
-	` &:checked ~ svg,&:checked ~ em{opacity:1;transform:translate(-50%,-50%) scale(1);}`
+	` & ~ svg{stroke-width:6px;}&:checked ~ svg,&:checked ~ em{opacity:1;transform:translate(-50%,-50%) scale(1);}`
 ], resetButton, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ type, theme }) => type === "checkbox" ? `border-radius: ${theme.spacing.radius.xs};` : `border-radius: 50%;`, ({ disabled, theme }) => disabled && `cursor: not-allowed;
 		background: ${theme.colors.grayLight};
     border: solid 2px ${theme.colors.gray};
@@ -174,7 +178,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-5e52a0cd-5"
+	componentId: "sc-f294a26b-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,
@@ -191,7 +195,7 @@ function LocalInput({ ...props }, ref) {
 			...props,
 			"aria-invalid": props.$error || void 0,
 			ref
-		}), !props.disabled && props.type === "checkbox" ? /*#__PURE__*/ jsx(IconCheck, {}) : /*#__PURE__*/ jsx("em", {})] }), props.$label && /*#__PURE__*/ jsx(StyledLabel, {
+		}), !props.disabled && props.type === "checkbox" ? /*#__PURE__*/ jsx(Icon, { name: "Check" }) : /*#__PURE__*/ jsx("em", {})] }), props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			children: props.$label
 		})]
@@ -217,7 +221,10 @@ function LocalInput({ ...props }, ref) {
 					ref
 				}),
 				props.$iconPosition === "right" && props.$icon && props.$icon,
-				(props.type === "date" || props.type === "datetime-local" || props.type === "month" || props.type === "week" || props.type === "time") && /*#__PURE__*/ jsx(IconCalendar, { className: "icon-calendar" })
+				(props.type === "date" || props.type === "datetime-local" || props.type === "month" || props.type === "week" || props.type === "time") && /*#__PURE__*/ jsx(Icon, {
+					name: "CalendarDays",
+					className: "icon-calendar"
+				})
 			]
 		})]
 	});

package/dist/select.js

@@ -1,7 +1,7 @@
 "use client";
 "use client";
-import { IconArrow } from "./utils/icons.js";
 import { formElementHeightStyles, fullWidthStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
 import { StyledInputWrapper, StyledLabel } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
@@ -9,7 +9,7 @@ import styled from "styled-components";
 //#region src/lib/select.tsx
 var StyledSelect = styled.select.withConfig({
 	displayName: "select__StyledSelect",
-	componentId: "sc-b63bf03d-0"
+	componentId: "sc-65975d95-0"
 })([
 	``,
 	`;`,
@@ -38,8 +38,12 @@ var StyledSelect = styled.select.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "select__StyledIconWrapper",
-	componentId: "sc-b63bf03d-1"
-})([`position:relative;`, ` & svg{position:absolute;top:50%;right:15px;transform:translateY(-50%) rotate(0);transition:all 0.3s ease;pointer-events:none;}& select{padding-right:40px;}& select:active:not([disabled]) ~ svg,& select:focus:not([disabled]) ~ svg{transform:translateY(-50%) rotate(180deg);}`], ({ $fullWidth }) => fullWidthStyles($fullWidth));
+	componentId: "sc-65975d95-1"
+})([
+	`position:relative;`,
+	` & svg{position:absolute;top:50%;right:15px;width:24px;height:24px;color:`,
+	`;transform:translateY(-50%) rotate(0);transition:all 0.3s ease;pointer-events:none;}& select{padding-right:40px;}& select:active:not([disabled]) ~ svg,& select:focus:not([disabled]) ~ svg{transform:translateY(-50%) rotate(180deg);}`
+], ({ $fullWidth }) => fullWidthStyles($fullWidth), ({ theme }) => theme.colors.primary);
 function LocalSelect({ ...props }, ref) {
 	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
@@ -55,7 +59,7 @@ function LocalSelect({ ...props }, ref) {
 				"aria-invalid": props.$error || void 0,
 				ref,
 				children: props.children
-			}), /*#__PURE__*/ jsx(IconArrow, { "aria-hidden": "true" })]
+			}), /*#__PURE__*/ jsx(Icon, { name: "ChevronDown" })]
 		})]
 	});
 }

package/dist/tabs.js

@@ -9,11 +9,11 @@ import { rgba } from "polished";
 //#region src/lib/tabs.tsx
 var StyledTabs = styled.div.withConfig({
 	displayName: "tabs__StyledTabs",
-	componentId: "sc-225e1742-0"
+	componentId: "sc-a3686838-0"
 })([`width:100%;`]);
 var StyledTabsList = styled.div.withConfig({
 	displayName: "tabs__StyledTabsList",
-	componentId: "sc-225e1742-1"
+	componentId: "sc-a3686838-1"
 })([
 	`display:flex;overflow-x:auto;border-radius:`,
 	` `,
@@ -23,17 +23,17 @@ var StyledTabsList = styled.div.withConfig({
 ], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight);
 var StyledTabButton = styled.button.withConfig({
 	displayName: "tabs__StyledTabButton",
-	componentId: "sc-225e1742-2"
+	componentId: "sc-a3686838-2"
 })([
 	``,
 	`;flex:1;min-width:fit-content;padding:12px 20px;`,
-	`;font-weight:600;color:`,
+	`;font-weight:700;color:`,
 	`;border-bottom:solid 3px transparent;transition:color 0.2s ease,background 0.2s ease,border-color 0.2s ease;@media (prefers-reduced-motion:reduce){transition:none;}&:not(:last-child){border-right:solid 1px `,
 	`;}&:focus-visible{border-radius:`,
 	`;outline:solid 2px `,
-	`;outline-offset:-4px;border-bottom-color:transparent;}`,
+	`;outline-offset:-2px;border-bottom-color:transparent;}`,
 	``
-], resetButton, ({ theme }) => styledText(theme), ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.primary, ({ theme, $isActive }) => $isActive ? css([
+], resetButton, ({ theme }) => styledText(theme), ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.primary, ({ theme, $isActive }) => $isActive ? css([
 	`color:`,
 	`;border-bottom-color:`,
 	`;`
@@ -44,7 +44,7 @@ var StyledTabButton = styled.button.withConfig({
 ], theme.colors.primary, rgba(theme.colors.primaryLight, .1)));
 var StyledTabPanel = styled.div.withConfig({
 	displayName: "tabs__StyledTabPanel",
-	componentId: "sc-225e1742-3"
+	componentId: "sc-a3686838-3"
 })([
 	``,
 	`;color:`,

package/dist/utils/index.d.ts

@@ -1,5 +1,4 @@
 export * from './global';
-export * from './icons';
 export * from './mixins';
 export * from './theme';
 export * from './typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -52,7 +52,7 @@
     "styled-components": "^6.0.0"
   },
   "devDependencies": {
-    "@swc/plugin-styled-components": "^12.14.1",
+    "@swc/plugin-styled-components": "^12.15.0",
     "@types/node": "^26.1.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",

package/dist/utils/icons.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { Theme } from './theme';
-interface IconProps extends React.SVGProps<SVGSVGElement> {
-    theme?: Theme;
-}
-declare function IconCheck({ ...props }: IconProps): React.JSX.Element;
-declare function IconArrow({ ...props }: IconProps): React.JSX.Element;
-declare function IconCalendar({ ...props }: IconProps): React.JSX.Element;
-export { IconCheck, IconArrow, IconCalendar };

package/dist/utils/icons.js

@@ -1,75 +0,0 @@
-"use client";
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTheme } from "styled-components";
-//#region src/lib/utils/icons.tsx
-function IconCheck({ ...props }) {
-	const theme = useTheme();
-	return /*#__PURE__*/ jsx("svg", {
-		width: "12",
-		height: "10",
-		viewBox: "0 0 12 10",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		...props,
-		children: /*#__PURE__*/ jsx("path", {
-			d: "M10 2L4.4 8L2 5.75",
-			stroke: theme.colors.primary,
-			strokeWidth: "3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})
-	});
-}
-function IconArrow({ ...props }) {
-	const theme = useTheme();
-	return /*#__PURE__*/ jsx("svg", {
-		width: "16",
-		height: "10",
-		viewBox: "0 0 16 10",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		...props,
-		children: /*#__PURE__*/ jsx("path", {
-			d: "M2 2L8 8L14 2",
-			stroke: theme.colors.primary,
-			strokeWidth: "3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})
-	});
-}
-function IconCalendar({ ...props }) {
-	return /*#__PURE__*/ jsxs("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: "24",
-		height: "24",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: useTheme().colors.primary,
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		...props,
-		children: [
-			/*#__PURE__*/ jsx("path", { d: "M8 2v4" }),
-			/*#__PURE__*/ jsx("path", { d: "M16 2v4" }),
-			/*#__PURE__*/ jsx("rect", {
-				width: "18",
-				height: "18",
-				x: "3",
-				y: "4",
-				rx: "2"
-			}),
-			/*#__PURE__*/ jsx("path", { d: "M3 10h18" }),
-			/*#__PURE__*/ jsx("path", { d: "M8 14h.01" }),
-			/*#__PURE__*/ jsx("path", { d: "M12 14h.01" }),
-			/*#__PURE__*/ jsx("path", { d: "M16 14h.01" }),
-			/*#__PURE__*/ jsx("path", { d: "M8 18h.01" }),
-			/*#__PURE__*/ jsx("path", { d: "M12 18h.01" }),
-			/*#__PURE__*/ jsx("path", { d: "M16 18h.01" })
-		]
-	});
-}
-//#endregion
-export { IconArrow, IconCalendar, IconCheck };