cherry-styled-components 0.1.17 → 0.1.19

package/dist/flex.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+type JustifyContentType = "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+type AlignItemsType = "stretch" | "center" | "flex-start" | "flex-end" | "baseline";
+type AlignContentType = "stretch" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+type DirectionType = "row" | "column" | "row-reverse" | "column-reverse";
+type GapType = number | "none";
+interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    $justifyContent?: JustifyContentType;
+    $xsJustifyContent?: JustifyContentType;
+    $smJustifyContent?: JustifyContentType;
+    $mdJustifyContent?: JustifyContentType;
+    $lgJustifyContent?: JustifyContentType;
+    $xlJustifyContent?: JustifyContentType;
+    $xxlJustifyContent?: JustifyContentType;
+    $xxxlJustifyContent?: JustifyContentType;
+    $alignItems?: AlignItemsType;
+    $xsAlignItems?: AlignItemsType;
+    $smAlignItems?: AlignItemsType;
+    $mdAlignItems?: AlignItemsType;
+    $lgAlignItems?: AlignItemsType;
+    $xlAlignItems?: AlignItemsType;
+    $xxlAlignItems?: AlignItemsType;
+    $xxxlAlignItems?: AlignItemsType;
+    $alignContent?: AlignContentType;
+    $xsAlignContent?: AlignContentType;
+    $smAlignContent?: AlignContentType;
+    $mdAlignContent?: AlignContentType;
+    $lgAlignContent?: AlignContentType;
+    $xlAlignContent?: AlignContentType;
+    $xxlAlignContent?: AlignContentType;
+    $xxxlAlignContent?: AlignContentType;
+    $wrap?: "wrap" | "nowrap" | "wrap-reverse";
+    $gap?: GapType;
+    $xsGap?: GapType;
+    $smGap?: GapType;
+    $mdGap?: GapType;
+    $lgGap?: GapType;
+    $xlGap?: GapType;
+    $xxlGap?: GapType;
+    $xxxlGap?: GapType;
+    $direction?: DirectionType;
+    $xsDirection?: DirectionType;
+    $smDirection?: DirectionType;
+    $mdDirection?: DirectionType;
+    $lgDirection?: DirectionType;
+    $xlDirection?: DirectionType;
+    $xxlDirection?: DirectionType;
+    $xxxlDirection?: DirectionType;
+    $fullWidth?: boolean;
+}
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+export { Flex };

package/dist/flex.js

@@ -1,16 +1,18 @@
 "use client";
 "use client";
 import { mq } from "./utils/theme.js";
-import { fullWidthStyles, generateGapStyles, generateJustifyContentStyles } from "./utils/mixins.js";
+import { fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles } from "./utils/mixins.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 //#region src/lib/flex.tsx
 var StyledFlex = styled.div.withConfig({
 	displayName: "flex__StyledFlex",
-	componentId: "sc-c58fa091-0"
+	componentId: "sc-5d254fa1-0"
 })([
 	`display:flex;justify-content:`,
+	`;align-items:`,
+	`;align-content:`,
 	`;flex-wrap:`,
 	`;gap:`,
 	`;flex-direction:`,
@@ -31,15 +33,36 @@ var StyledFlex = styled.div.withConfig({
 	` `,
 	` `,
 	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
+	` `,
 	``
-], ({ $justifyContent }) => $justifyContent || "flex-start", ({ $wrap }) => $wrap || "wrap", ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs, ({ $direction }) => $direction || "row", mq("lg"), ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg, ({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap), ({ $xsJustifyContent }) => $xsJustifyContent && generateJustifyContentStyles("xs", $xsJustifyContent), ({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap), ({ $smJustifyContent }) => $smJustifyContent && generateJustifyContentStyles("sm", $smJustifyContent), ({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap), ({ $mdJustifyContent }) => $mdJustifyContent && generateJustifyContentStyles("md", $mdJustifyContent), ({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap), ({ $lgJustifyContent }) => $lgJustifyContent && generateJustifyContentStyles("lg", $lgJustifyContent), ({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap), ({ $xlJustifyContent }) => $xlJustifyContent && generateJustifyContentStyles("xl", $xlJustifyContent), ({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap), ({ $xxlJustifyContent }) => $xxlJustifyContent && generateJustifyContentStyles("xxl", $xxlJustifyContent), ({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap), ({ $xxxlJustifyContent }) => $xxxlJustifyContent && generateJustifyContentStyles("xxxl", $xxxlJustifyContent), ({ $fullWidth }) => fullWidthStyles($fullWidth));
+], ({ $justifyContent }) => $justifyContent || "flex-start", ({ $alignItems }) => $alignItems || "stretch", ({ $alignContent }) => $alignContent || "stretch", ({ $wrap }) => $wrap || "wrap", ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs, ({ $direction }) => $direction || "row", mq("lg"), ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg, ({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap), ({ $xsJustifyContent }) => $xsJustifyContent && generateJustifyContentStyles("xs", $xsJustifyContent), ({ $xsAlignItems }) => $xsAlignItems && generateAlignItemsStyles("xs", $xsAlignItems), ({ $xsAlignContent }) => $xsAlignContent && generateAlignContentStyles("xs", $xsAlignContent), ({ $xsDirection }) => $xsDirection && generateDirectionStyles("xs", $xsDirection), ({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap), ({ $smJustifyContent }) => $smJustifyContent && generateJustifyContentStyles("sm", $smJustifyContent), ({ $smAlignItems }) => $smAlignItems && generateAlignItemsStyles("sm", $smAlignItems), ({ $smAlignContent }) => $smAlignContent && generateAlignContentStyles("sm", $smAlignContent), ({ $smDirection }) => $smDirection && generateDirectionStyles("sm", $smDirection), ({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap), ({ $mdJustifyContent }) => $mdJustifyContent && generateJustifyContentStyles("md", $mdJustifyContent), ({ $mdAlignItems }) => $mdAlignItems && generateAlignItemsStyles("md", $mdAlignItems), ({ $mdAlignContent }) => $mdAlignContent && generateAlignContentStyles("md", $mdAlignContent), ({ $mdDirection }) => $mdDirection && generateDirectionStyles("md", $mdDirection), ({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap), ({ $lgJustifyContent }) => $lgJustifyContent && generateJustifyContentStyles("lg", $lgJustifyContent), ({ $lgAlignItems }) => $lgAlignItems && generateAlignItemsStyles("lg", $lgAlignItems), ({ $lgAlignContent }) => $lgAlignContent && generateAlignContentStyles("lg", $lgAlignContent), ({ $lgDirection }) => $lgDirection && generateDirectionStyles("lg", $lgDirection), ({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap), ({ $xlJustifyContent }) => $xlJustifyContent && generateJustifyContentStyles("xl", $xlJustifyContent), ({ $xlAlignItems }) => $xlAlignItems && generateAlignItemsStyles("xl", $xlAlignItems), ({ $xlAlignContent }) => $xlAlignContent && generateAlignContentStyles("xl", $xlAlignContent), ({ $xlDirection }) => $xlDirection && generateDirectionStyles("xl", $xlDirection), ({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap), ({ $xxlJustifyContent }) => $xxlJustifyContent && generateJustifyContentStyles("xxl", $xxlJustifyContent), ({ $xxlAlignItems }) => $xxlAlignItems && generateAlignItemsStyles("xxl", $xxlAlignItems), ({ $xxlAlignContent }) => $xxlAlignContent && generateAlignContentStyles("xxl", $xxlAlignContent), ({ $xxlDirection }) => $xxlDirection && generateDirectionStyles("xxl", $xxlDirection), ({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap), ({ $xxxlJustifyContent }) => $xxxlJustifyContent && generateJustifyContentStyles("xxxl", $xxxlJustifyContent), ({ $xxxlAlignItems }) => $xxxlAlignItems && generateAlignItemsStyles("xxxl", $xxxlAlignItems), ({ $xxxlAlignContent }) => $xxxlAlignContent && generateAlignContentStyles("xxxl", $xxxlAlignContent), ({ $xxxlDirection }) => $xxxlDirection && generateDirectionStyles("xxxl", $xxxlDirection), ({ $fullWidth }) => fullWidthStyles($fullWidth));
 function LocalFlex({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledFlex, {
+	return /*#__PURE__*/ jsx(StyledFlex, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var Flex = /* @__PURE__ */ forwardRef(LocalFlex);
+var Flex = /*#__PURE__*/ forwardRef(LocalFlex);
 //#endregion
 export { Flex };

package/dist/grid.js

@@ -31,12 +31,12 @@ var StyledGrid = styled.div.withConfig({
 	``
 ], ({ $cols }) => `repeat(${$cols || 3}, minmax(0, 1fr))`, ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.xs, mq("lg"), ({ $gap, theme }) => $gap !== void 0 && $gap !== "none" ? `${$gap}px` : theme.spacing.gridGap.lg, ({ $xsGap }) => $xsGap !== void 0 && generateGapStyles("xs", $xsGap), ({ $smGap }) => $smGap !== void 0 && generateGapStyles("sm", $smGap), ({ $mdGap }) => $mdGap !== void 0 && generateGapStyles("md", $mdGap), ({ $lgGap }) => $lgGap !== void 0 && generateGapStyles("lg", $lgGap), ({ $xlGap }) => $xlGap !== void 0 && generateGapStyles("xl", $xlGap), ({ $xxlGap }) => $xxlGap !== void 0 && generateGapStyles("xxl", $xxlGap), ({ $xxxlGap }) => $xxxlGap !== void 0 && generateGapStyles("xxxl", $xxxlGap), ({ $xsCols }) => $xsCols && generateColsStyles("xs", $xsCols), ({ $smCols }) => $smCols && generateColsStyles("sm", $smCols), ({ $mdCols }) => $mdCols && generateColsStyles("md", $mdCols), ({ $lgCols }) => $lgCols && generateColsStyles("lg", $lgCols), ({ $xlCols }) => $xlCols && generateColsStyles("xl", $xlCols), ({ $xxlCols }) => $xxlCols && generateColsStyles("xxl", $xxlCols), ({ $xxxlCols }) => $xxxlCols && generateColsStyles("xxxl", $xxxlCols));
 function LocalGrid({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledGrid, {
+	return /*#__PURE__*/ jsx(StyledGrid, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var Grid = /* @__PURE__ */ forwardRef(LocalGrid);
+var Grid = /*#__PURE__*/ forwardRef(LocalGrid);
 //#endregion
 export { Grid };

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/icon.js

@@ -4,7 +4,7 @@ import { icons } from "lucide-react";
 var Icon = ({ name, color, size, className, "aria-label": ariaLabel }) => {
 	const LucideIcon = icons[name];
 	if (!LucideIcon) return null;
-	return /* @__PURE__ */ jsx(LucideIcon, {
+	return /*#__PURE__*/ jsx(LucideIcon, {
 		color,
 		size,
 		className,

package/dist/{src/lib/index.d.ts → index.d.ts}

@@ -1,16 +1,23 @@
 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 './toast';
 export * from './toggle';

package/dist/index.js

@@ -2,21 +2,29 @@ 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, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, 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 { 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 { 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, generateColSpanStyles, generateColsStyles, 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, 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, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createTypographyStyle, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, lineHeights, matchesAccept, 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, useOnClickOutside, useToastNotifications };

package/dist/{src/lib/input.d.ts → 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:`,
@@ -173,45 +173,45 @@ var StyledCustomIconWrapper = styled.span.withConfig({
 	` &:has(.icon-calendar) > input{padding-right:45px;@supports (-moz-appearance:none){padding-right:15px;}}`
 ], ({ $fullWidth }) => fullWidthStyles($fullWidth), ({ theme }) => theme.colors.primary, ({ $icon, $iconPosition }) => $icon && $iconPosition === "right" ? css([`& svg{right:16px;}& input{padding-right:50px;}`]) : css([`& svg{left:16px;}& svg ~ input{padding-left:50px;}`]));
 function LocalInput({ ...props }, ref) {
-	if (props.type === "checkbox" || props.type === "radio") return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	if (props.type === "checkbox" || props.type === "radio") return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		type: props.type,
 		$label: props.$label,
 		className: props.$wrapperClassName,
-		children: [/* @__PURE__ */ jsxs(StyledIconWrapper, { children: [/* @__PURE__ */ jsx(StyledRadioCheckboxInput, {
+		children: [/*#__PURE__*/ jsxs(StyledIconWrapper, { children: [/*#__PURE__*/ jsx(StyledRadioCheckboxInput, {
 			...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(IconCheck, {}) : /*#__PURE__*/ jsx("em", {})] }), props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			children: props.$label
 		})]
 	});
-	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		type: props.type,
 		$label: props.$label,
 		className: props.$wrapperClassName,
-		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+		children: [props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			children: props.$label
-		}), /* @__PURE__ */ jsxs(StyledCustomIconWrapper, {
+		}), /*#__PURE__*/ jsxs(StyledCustomIconWrapper, {
 			$fullWidth: props.$fullWidth,
 			$iconPosition: props.$iconPosition,
 			$icon: props.$icon,
 			children: [
 				props.$iconPosition !== "right" && props.$icon && props.$icon,
-				/* @__PURE__ */ jsx(StyledInput, {
+				/*#__PURE__*/ jsx(StyledInput, {
 					...props,
 					"aria-invalid": props.$error || void 0,
 					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(IconCalendar, { className: "icon-calendar" })
 			]
 		})]
 	});
 }
-var Input = /* @__PURE__ */ forwardRef(LocalInput);
+var Input = /*#__PURE__*/ forwardRef(LocalInput);
 //#endregion
 export { Input, StyledInputWrapper, StyledLabel };

package/dist/max-width.js

@@ -39,12 +39,12 @@ var StyledMaxWidth = styled.div.withConfig({
 		${$size && styles($size)};
 	`, (props) => responsiveStyles(props));
 function LocalMaxWidth({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledMaxWidth, {
+	return /*#__PURE__*/ jsx(StyledMaxWidth, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var MaxWidth = /* @__PURE__ */ forwardRef(LocalMaxWidth);
+var MaxWidth = /*#__PURE__*/ forwardRef(LocalMaxWidth);
 //#endregion
 export { MaxWidth };

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 };

package/dist/range.js

@@ -144,13 +144,13 @@ var StyledInput = styled.input.withConfig({
 				`;
 });
 function LocalRange({ ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		className: props.$wrapperClassName,
-		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+		children: [props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			children: props.$label
-		}), /* @__PURE__ */ jsx(StyledInput, {
+		}), /*#__PURE__*/ jsx(StyledInput, {
 			...props,
 			"aria-invalid": props.$error || void 0,
 			type: "range",
@@ -158,6 +158,6 @@ function LocalRange({ ...props }, ref) {
 		})]
 	});
 }
-var Range = /* @__PURE__ */ forwardRef(LocalRange);
+var Range = /*#__PURE__*/ forwardRef(LocalRange);
 //#endregion
 export { Range };