cherry-styled-components 0.1.18 → 0.2.0

package/dist/dropzone.js

@@ -0,0 +1,255 @@
+"use client";
+"use client";
+import { mq } from "./utils/theme.js";
+import { resetButton } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+//#region src/lib/dropzone.tsx
+/** Matches a file against an `accept` string (".pdf,image/*,text/plain"),
+mirroring the native file-picker filter for dropped files. */ var matchesAccept = (file, accept) => {
+	if (!accept) return true;
+	return accept.split(",").some((raw) => {
+		const entry = raw.trim().toLowerCase();
+		if (!entry) return false;
+		if (entry.startsWith(".")) return file.name.toLowerCase().endsWith(entry);
+		if (entry.endsWith("/*")) return file.type.toLowerCase().startsWith(entry.slice(0, -1));
+		return file.type.toLowerCase() === entry;
+	});
+};
+function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $icon = "FileUp", $inline, $maxFiles, $maxBytes, onFilesChange, onFilesRejected, accept, multiple, disabled, ...rest }, ref) {
+	const [items, setItems] = useState([]);
+	const [dragOver, setDragOver] = useState(false);
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => inputRef.current);
+	const itemsRef = useRef([]);
+	itemsRef.current = items;
+	useEffect(() => {
+		return () => {
+			itemsRef.current.forEach((item) => item.previewUrl && URL.revokeObjectURL(item.previewUrl));
+		};
+	}, []);
+	const limit = multiple ? $maxFiles ?? Infinity : 1;
+	const atLimit = items.length >= limit;
+	const addFiles = (fileList) => {
+		if (!fileList || disabled) return;
+		const files = Array.from(fileList);
+		const rejections = [];
+		const accepted = [];
+		const replacing = !multiple && files.length > 0;
+		const remaining = replacing ? 1 : limit - items.length;
+		for (const file of files) {
+			if (accepted.length >= remaining) {
+				rejections.push({
+					file,
+					reason: "count"
+				});
+				continue;
+			}
+			if (!matchesAccept(file, accept)) {
+				rejections.push({
+					file,
+					reason: "type"
+				});
+				continue;
+			}
+			if ($maxBytes && file.size > $maxBytes) {
+				rejections.push({
+					file,
+					reason: "size"
+				});
+				continue;
+			}
+			accepted.push({
+				key: `${file.name}-${file.size}-${Date.now()}-${accepted.length}`,
+				file,
+				previewUrl: file.type.startsWith("image/") ? URL.createObjectURL(file) : null
+			});
+		}
+		if (rejections.length > 0) onFilesRejected?.(rejections);
+		if (accepted.length === 0) return;
+		setItems((current) => {
+			const kept = replacing ? [] : current;
+			if (replacing) current.forEach((item) => item.previewUrl && URL.revokeObjectURL(item.previewUrl));
+			const next = [...kept, ...accepted];
+			onFilesChange?.(next.map((item) => item.file));
+			return next;
+		});
+	};
+	const removeItem = (key) => {
+		setItems((current) => {
+			const item = current.find((it) => it.key === key);
+			if (item?.previewUrl) URL.revokeObjectURL(item.previewUrl);
+			const next = current.filter((it) => it.key !== key);
+			onFilesChange?.(next.map((it) => it.file));
+			return next;
+		});
+	};
+	const openPicker = () => {
+		if (disabled || atLimit) return;
+		inputRef.current?.click();
+	};
+	return /*#__PURE__*/ jsxs(StyledDropzoneWrapper, { children: [
+		/*#__PURE__*/ jsxs(StyledDropzone, {
+			type: "button",
+			"aria-label": $prompt,
+			$dragOver: dragOver,
+			$inline,
+			disabled: disabled || atLimit,
+			onClick: openPicker,
+			onDragOver: (e) => {
+				e.preventDefault();
+				if (!disabled && !atLimit) setDragOver(true);
+			},
+			onDragLeave: () => setDragOver(false),
+			onDrop: (e) => {
+				e.preventDefault();
+				setDragOver(false);
+				addFiles(e.dataTransfer.files);
+			},
+			children: [
+				/*#__PURE__*/ jsx(StyledDropIcon, {
+					$inline,
+					children: /*#__PURE__*/ jsx(Icon, { name: $icon })
+				}),
+				/*#__PURE__*/ jsxs(StyledDropPrompt, {
+					$inline,
+					children: [$prompt, $browse ? /*#__PURE__*/ jsx("span", { children: $browse }) : null]
+				}),
+				$hint ? /*#__PURE__*/ jsx(StyledDropHint, {
+					$inline,
+					children: $hint
+				}) : null
+			]
+		}),
+		/*#__PURE__*/ jsx("input", {
+			ref: inputRef,
+			type: "file",
+			accept,
+			multiple,
+			disabled,
+			hidden: true,
+			onChange: (e) => {
+				addFiles(e.target.files);
+				e.target.value = "";
+			},
+			...rest
+		}),
+		items.length > 0 && /*#__PURE__*/ jsx(StyledThumbs, { children: items.map((item) => /*#__PURE__*/ jsxs(StyledThumb, {
+			title: item.file.name,
+			children: [item.previewUrl ? /*#__PURE__*/ jsx("img", {
+				src: item.previewUrl,
+				alt: item.file.name
+			}) : /*#__PURE__*/ jsxs(StyledThumbFile, { children: [/*#__PURE__*/ jsx(Icon, { name: "File" }), /*#__PURE__*/ jsx("span", { children: item.file.name })] }), /*#__PURE__*/ jsx(StyledThumbRemove, {
+				type: "button",
+				"aria-label": `Remove ${item.file.name}`,
+				onClick: () => removeItem(item.key),
+				disabled,
+				children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+			})]
+		}, item.key)) })
+	] });
+}
+var Dropzone = /*#__PURE__*/ forwardRef(LocalDropzone);
+var StyledDropzoneWrapper = styled.div.withConfig({
+	displayName: "dropzone__StyledDropzoneWrapper",
+	componentId: "sc-cf1c3c01-0"
+})([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
+var StyledDropzone = styled.button.withConfig({
+	displayName: "dropzone__StyledDropzone",
+	componentId: "sc-cf1c3c01-1"
+})([
+	``,
+	`;display:flex;flex-direction:`,
+	`;align-items:center;justify-content:center;gap:`,
+	`;width:100%;padding:`,
+	`;border-radius:`,
+	`;border:2px dashed `,
+	`;background:`,
+	`;color:`,
+	`;text-align:`,
+	`;transition:all 0.3s ease;`,
+	` @media (hover:hover){&:hover:not(:disabled){border-color:`,
+	`;background:`,
+	`;}}&:focus{border-color:`,
+	`;box-shadow:0 0 0 4px `,
+	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "10px" : "8px", ({ $inline }) => $inline ? "10px 14px" : "24px 20px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme, $inline }) => $inline ? "transparent" : theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $inline }) => $inline ? "left" : "center", ({ theme, $dragOver }) => $dragOver && css([
+	`border-color:`,
+	`;background:`,
+	`;`
+], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+var StyledDropIcon = styled.span.withConfig({
+	displayName: "dropzone__StyledDropIcon",
+	componentId: "sc-cf1c3c01-2"
+})([
+	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
+	`;height:`,
+	`;border-radius:`,
+	`;background:`,
+	`;border:solid 1px `,
+	`;color:`,
+	`;transition:all 0.3s ease;& svg{width:`,
+	`;height:`,
+	`;}`
+], ({ $inline }) => $inline ? "32px" : "44px", ({ $inline }) => $inline ? "32px" : "44px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "18px" : "22px", ({ $inline }) => $inline ? "18px" : "22px");
+var StyledDropPrompt = styled.span.withConfig({
+	displayName: "dropzone__StyledDropPrompt",
+	componentId: "sc-cf1c3c01-3"
+})([
+	`display:flex;flex-direction:`,
+	`;flex-wrap:wrap;align-items:baseline;gap:`,
+	`;font-family:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;font-weight:600;color:`,
+	`;& span{font-weight:500;color:`,
+	`;}`
+], ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "0 6px" : "2px", ({ theme }) => theme.fonts.text, ({ theme }) => theme.fontSizes.text.xs, ({ theme }) => theme.lineHeights.text.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayDark);
+var StyledDropHint = styled.span.withConfig({
+	displayName: "dropzone__StyledDropHint",
+	componentId: "sc-cf1c3c01-4"
+})([
+	`font-family:`,
+	`;font-size:`,
+	`;line-height:`,
+	`;color:`,
+	`;`,
+	``
+], ({ theme }) => theme.fonts.text, ({ theme }) => theme.fontSizes.small.xs, ({ theme }) => theme.lineHeights.small.xs, ({ theme }) => theme.colors.gray, ({ $inline }) => $inline && css([`margin-left:auto;`]));
+var StyledThumbs = styled.div.withConfig({
+	displayName: "dropzone__StyledThumbs",
+	componentId: "sc-cf1c3c01-5"
+})([`display:grid;grid-template-columns:repeat(auto-fill,72px);gap:10px;`, `{grid-template-columns:repeat(auto-fill,84px);}`], mq("sm"));
+var StyledThumb = styled.div.withConfig({
+	displayName: "dropzone__StyledThumb",
+	componentId: "sc-cf1c3c01-6"
+})([
+	`position:relative;width:72px;height:72px;border-radius:`,
+	`;overflow:hidden;border:solid 1px `,
+	`;background:`,
+	`;& img{width:100%;height:100%;object-fit:cover;display:block;}`,
+	`{width:84px;height:84px;}`
+], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, mq("sm"));
+var StyledThumbFile = styled.span.withConfig({
+	displayName: "dropzone__StyledThumbFile",
+	componentId: "sc-cf1c3c01-7"
+})([
+	`display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:6px;color:`,
+	`;& svg{width:20px;height:20px;color:`,
+	`;}& span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:`,
+	`;font-size:10px;line-height:1.2;}`
+], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary, ({ theme }) => theme.fonts.text);
+var StyledThumbRemove = styled.button.withConfig({
+	displayName: "dropzone__StyledThumbRemove",
+	componentId: "sc-cf1c3c01-8"
+})([
+	``,
+	`;position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,
+	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}@media (hover:hover){&:hover:not(:disabled){background:`,
+	`;}}&:disabled{cursor:not-allowed;opacity:0.6;}`
+], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
+//#endregion
+export { Dropzone, matchesAccept };

package/dist/icon-button.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Theme } from './utils';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    "aria-label": string;
+    $size?: "default" | "big" | "small";
+    $error?: boolean;
+}
+export declare const iconButtonStyles: (theme: Theme, $size?: "default" | "big" | "small", $error?: boolean, disabled?: boolean) => import('styled-components').RuleSet<object>;
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { IconButton };

package/dist/icon-button.js

@@ -0,0 +1,72 @@
+"use client";
+"use client";
+import { resetButton } from "./utils/mixins.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled, { css } from "styled-components";
+import { darken, lighten } from "polished";
+//#region src/lib/icon-button.tsx
+var iconButtonSizes = {
+	small: {
+		box: 24,
+		icon: 12
+	},
+	default: {
+		box: 28,
+		icon: 14
+	},
+	big: {
+		box: 32,
+		icon: 16
+	}
+};
+var iconButtonStyles = (theme, $size, $error, disabled) => {
+	const { box, icon } = iconButtonSizes[$size ?? "default"];
+	return css([
+		``,
+		`;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
+		`px;height:`,
+		`px;border-radius:50%;background:`,
+		`;border:solid 2px `,
+		`;color:`,
+		`;box-shadow:0 0 0 0px `,
+		`;transition:all 0.3s ease;& svg{width:`,
+		`px;height:`,
+		`px;}`,
+		` `,
+		``
+	], resetButton, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? lighten(.1, theme.colors.error) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
+		`border-color:`,
+		`;&:hover{border-color:`,
+		`;color:`,
+		`;}&:focus{box-shadow:0 0 0 4px `,
+		`;}&:active{box-shadow:0 0 0 2px `,
+		`;}`
+	], theme.colors.error, darken(.1, theme.colors.error), darken(.1, theme.colors.error), lighten(.1, theme.colors.error), lighten(.1, theme.colors.error)) : css([
+		`&:hover{border-color:`,
+		`;color:`,
+		`;}&:focus{box-shadow:0 0 0 4px `,
+		`;border-color:`,
+		`;}&:active{box-shadow:0 0 0 2px `,
+		`;}`
+	], theme.colors.primary, theme.colors.primary, theme.colors.primaryLight, theme.colors.primary, theme.colors.primaryLight)), disabled && css([
+		`cursor:not-allowed;background:`,
+		`;border-color:`,
+		`;color:`,
+		`;`
+	], theme.colors.grayLight, theme.colors.grayLight, theme.colors.gray));
+};
+var StyledIconButton = styled.button.withConfig({
+	displayName: "icon-button__StyledIconButton",
+	componentId: "sc-def35ae6-0"
+})([``, ``], ({ theme, $size, $error, disabled }) => iconButtonStyles(theme, $size, $error, disabled));
+function LocalIconButton({ ...props }, ref) {
+	return /*#__PURE__*/ jsx(StyledIconButton, {
+		type: "button",
+		...props,
+		ref
+	});
+}
+var IconButton = /*#__PURE__*/ forwardRef(LocalIconButton);
+//#endregion
+export { IconButton, iconButtonStyles };

package/dist/index.d.ts

@@ -1,16 +1,24 @@
 export * from './styled-components';
 export * from './utils';
+export * from './accordion';
+export * from './avatar-dropzone';
 export * from './box';
 export * from './button';
 export * from './col';
 export * from './container';
+export * from './dropzone';
 export * from './flex';
 export * from './grid';
 export * from './icon';
+export * from './icon-button';
 export * from './input';
 export * from './max-width';
+export * from './modal';
+export * from './password';
 export * from './range';
 export * from './select';
 export * from './space';
 export * from './textarea';
+export * from './theme-toggle';
+export * from './toast';
 export * from './toggle';

package/dist/index.js

@@ -1,22 +1,33 @@
-import { StyledComponentsRegistry } from "./styled-components/registry.js";
 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 { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.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";
+import { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
+import { ClientThemeProvider } from "./styled-components/client-theme-provider.js";
+import { StyledComponentsRegistry } from "./styled-components/registry.js";
+import { createThemeInitScript, resolveTheme, themeInitScript } from "./styled-components/theme-init.js";
+import { Icon } from "./icon.js";
+import { Accordion } from "./accordion.js";
+import { Dropzone, matchesAccept } from "./dropzone.js";
+import { AvatarDropzone } from "./avatar-dropzone.js";
 import { Container } from "./container.js";
 import { Box } from "./box.js";
 import { Button, buttonStyles } from "./button.js";
 import { Col } from "./col.js";
 import { Flex } from "./flex.js";
 import { Grid } from "./grid.js";
-import { Icon } from "./icon.js";
+import { IconButton, iconButtonStyles } from "./icon-button.js";
 import { Input, StyledInputWrapper, StyledLabel } from "./input.js";
 import { MaxWidth } from "./max-width.js";
+import { Modal } from "./modal.js";
+import { Password } from "./password.js";
 import { Range } from "./range.js";
 import { Select, StyledIconWrapper } from "./select.js";
 import { Space } from "./space.js";
 import { Textarea } from "./textarea.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Box, Button, CherryThemeProvider, Col, Container, Flex, GlobalStyles, Grid, Icon, IconArrow, IconCalendar, IconCheck, Input, MaxWidth, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, Textarea, ThemeContext, Toggle, breakpoints, buttonStyles, colors, colorsDark, createTypographyStyle, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, lineHeights, mq, resetButton, resetInput, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark };
+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, StyledNotifications, 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,6 +1,6 @@
 import { default as React } from 'react';
 import { IStyledComponent } from 'styled-components';
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     children?: React.ReactNode;
     $wrapperClassName?: string;
     $label?: string;

package/dist/input.js

@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-df1aa532-0"
+	componentId: "sc-f9d22714-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
@@ -17,7 +17,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;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledLabel = styled.label.withConfig({
 	displayName: "input__StyledLabel",
-	componentId: "sc-df1aa532-1"
+	componentId: "sc-f9d22714-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -26,7 +26,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-df1aa532-2"
+	componentId: "sc-f9d22714-2"
 })([
 	``,
 	`;`,
@@ -76,11 +76,11 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-df1aa532-3"
+	componentId: "sc-f9d22714-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);
 var StyledRadioCheckboxInput = styled.input.withConfig({
 	displayName: "input__StyledRadioCheckboxInput",
-	componentId: "sc-df1aa532-4"
+	componentId: "sc-f9d22714-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -165,7 +165,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-df1aa532-5"
+	componentId: "sc-f9d22714-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,

package/dist/modal.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ModalProps {
+    children: React.ReactNode;
+    $isOpen: boolean;
+    $onClose: () => void;
+    $title?: string;
+    $width?: number;
+}
+declare function Modal({ children, $isOpen, $onClose, $title, $width }: ModalProps): React.ReactPortal | null;
+export { Modal };

package/dist/modal.js

@@ -0,0 +1,96 @@
+"use client";
+"use client";
+import { mq } from "./utils/theme.js";
+import { styledH5, styledText } from "./utils/typography.js";
+import { useOnClickOutside } from "./utils/use-on-click-outside.js";
+import { Icon } from "./icon.js";
+import { IconButton } from "./icon-button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import styled, { css } from "styled-components";
+import { rgba } from "polished";
+import { createPortal } from "react-dom";
+//#region src/lib/modal.tsx
+var emptySubscribe = () => () => {};
+function useIsClient() {
+	return useSyncExternalStore(emptySubscribe, () => true, () => false);
+}
+var StyledModal = styled.div.withConfig({
+	displayName: "modal__StyledModal",
+	componentId: "sc-43ca5273-0"
+})([
+	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
+	`;display:flex;justify-content:center;align-items:center;z-index:1010;pointer-events:none;opacity:0;transition:all 0.3s ease;`,
+	` & .modal-inner{background:`,
+	`;border-radius:`,
+	`;padding:20px;max-width:calc(100% - 40px);width:100%;margin:auto;position:relative;transform:translateY(40px);transition:all 0.3s ease;`,
+	` `,
+	`{max-width:500px;`,
+	`}}`
+], ({ theme }) => rgba(theme.colors.primary, .5), ({ $isOpen }) => $isOpen && css([`opacity:1;pointer-events:all;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isOpen }) => $isOpen && css([`transform:translateY(0);`]), mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
+var StyledModalClose = styled(IconButton).withConfig({
+	displayName: "modal__StyledModalClose",
+	componentId: "sc-43ca5273-1"
+})([`position:absolute;top:20px;right:20px;z-index:10;`]);
+var StyledModalTitle = styled.h2.withConfig({
+	displayName: "modal__StyledModalTitle",
+	componentId: "sc-43ca5273-2"
+})([
+	`--divider-color:`,
+	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
+	`;position:relative;`,
+	`;&::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--divider-color);}`
+], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.dark, ({ theme }) => styledH5(theme));
+var StyledModalContent = styled.div.withConfig({
+	displayName: "modal__StyledModalContent",
+	componentId: "sc-43ca5273-3"
+})([
+	`max-height:calc(100svh - 200px);overflow-y:auto;padding:5px;margin:-5px;--divider-color:`,
+	`;`,
+	`;& hr{margin:20px 0;border:none;border-bottom:solid 1px var(--divider-color);}`
+], ({ theme }) => theme.colors.grayLight, ({ theme }) => styledText(theme));
+function Modal({ children, $isOpen, $onClose, $title, $width }) {
+	const wrapperRef = useRef(null);
+	const elmRef = useRef(null);
+	const isClient = useIsClient();
+	const closeModal = useCallback(() => {
+		$onClose();
+	}, [$onClose]);
+	useEffect(() => {
+		if (!$isOpen) return;
+		function handleKeydown(event) {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				closeModal();
+			}
+		}
+		document.addEventListener("keydown", handleKeydown);
+		return () => document.removeEventListener("keydown", handleKeydown);
+	}, [$isOpen, closeModal]);
+	useOnClickOutside([elmRef, wrapperRef], $isOpen ? closeModal : () => {});
+	if (!isClient) return null;
+	return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(StyledModal, {
+		$isOpen,
+		$width,
+		children: /*#__PURE__*/ jsxs("div", {
+			className: "modal-inner",
+			ref: wrapperRef,
+			children: [
+				/*#__PURE__*/ jsx("span", {
+					ref: elmRef,
+					children: /*#__PURE__*/ jsx(StyledModalClose, {
+						$size: "small",
+						onClick: closeModal,
+						className: "modal-close",
+						"aria-label": "Close Modal",
+						children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+					})
+				}),
+				$title && /*#__PURE__*/ jsx(StyledModalTitle, { children: $title }),
+				/*#__PURE__*/ jsx(StyledModalContent, { children })
+			]
+		})
+	}), document.body);
+}
+//#endregion
+export { Modal };

package/dist/password.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { InputProps } from './input';
+export type PasswordProps = Omit<InputProps, "type" | "$icon" | "$iconPosition">;
+declare const Password: React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<HTMLInputElement>>;
+export { Password };

package/dist/password.js

@@ -0,0 +1,75 @@
+"use client";
+"use client";
+import { fullWidthStyles } from "./utils/mixins.js";
+import { Icon } from "./icon.js";
+import { IconButton } from "./icon-button.js";
+import { Input } from "./input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/password.tsx
+var passwordSizes = {
+	small: {
+		height: 40,
+		inset: 8,
+		button: 24
+	},
+	default: {
+		height: 50,
+		inset: 11,
+		button: 28
+	},
+	big: {
+		height: 60,
+		inset: 16,
+		button: 28
+	}
+};
+var StyledPassword = styled.span.withConfig({
+	displayName: "password__StyledPassword",
+	componentId: "sc-b3beabaa-0"
+})([
+	`position:relative;display:inline-flex;& input{padding-right:`,
+	`;}`,
+	``
+], ({ $size }) => {
+	const { inset, button } = passwordSizes[$size ?? "default"];
+	return `${inset + button + 10}px`;
+}, ({ $fullWidth }) => fullWidthStyles($fullWidth));
+var StyledPasswordReveal = styled.span.withConfig({
+	displayName: "password__StyledPasswordReveal",
+	componentId: "sc-b3beabaa-1"
+})([`position:absolute;bottom:0;display:flex;align-items:center;`, ``], ({ $size }) => {
+	const { height, inset } = passwordSizes[$size ?? "default"];
+	return css([
+		`right:`,
+		`px;height:`,
+		`px;`
+	], inset, height);
+});
+function LocalPassword({ ...props }, ref) {
+	const [show, setShow] = useState(false);
+	return /*#__PURE__*/ jsxs(StyledPassword, {
+		$size: props.$size,
+		$fullWidth: props.$fullWidth,
+		children: [/*#__PURE__*/ jsx(Input, {
+			...props,
+			type: show ? "text" : "password",
+			ref
+		}), /*#__PURE__*/ jsx(StyledPasswordReveal, {
+			$size: props.$size,
+			children: /*#__PURE__*/ jsx(IconButton, {
+				$size: props.$size === "small" ? "small" : "default",
+				$error: props.$error,
+				"aria-label": show ? "Hide password" : "Show password",
+				"aria-pressed": show,
+				title: show ? "Hide password" : "Show password",
+				onClick: () => setShow((prev) => !prev),
+				children: /*#__PURE__*/ jsx(Icon, { name: show ? "EyeOff" : "Eye" })
+			})
+		})]
+	});
+}
+var Password = /*#__PURE__*/ forwardRef(LocalPassword);
+//#endregion
+export { Password };