cherry-styled-components 0.1.16 → 0.1.18

package/dist/box.js

@@ -15,12 +15,12 @@ var StyledBox = styled(Container).withConfig({
 	`;`
 ], ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight);
 function LocalBox({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledBox, {
+	return /*#__PURE__*/ jsx(StyledBox, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var Box = /* @__PURE__ */ forwardRef(LocalBox);
+var Box = /*#__PURE__*/ forwardRef(LocalBox);
 //#endregion
 export { Box };

package/dist/button.js

@@ -77,10 +77,10 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`, $fullWidth && `width: 100%;`);
 var StyledButton = styled.button.withConfig({
 	displayName: "button__StyledButton",
-	componentId: "sc-f54d90ca-0"
+	componentId: "sc-86ae8105-0"
 })([``, ``], ({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(theme, $variant, $size, $outline, $fullWidth, $error, disabled));
 function LocalButton({ $variant = "primary", ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledButton, {
+	return /*#__PURE__*/ jsxs(StyledButton, {
 		$variant,
 		$error: props.$error,
 		...props,
@@ -92,6 +92,6 @@ function LocalButton({ $variant = "primary", ...props }, ref) {
 		]
 	});
 }
-var Button = /* @__PURE__ */ forwardRef(LocalButton);
+var Button = /*#__PURE__*/ forwardRef(LocalButton);
 //#endregion
 export { Button, buttonStyles };

package/dist/col.js

@@ -22,12 +22,12 @@ var StyledCol = styled.div.withConfig({
 		grid-column: span ${$span};
 	`, ({ $xsSpan }) => $xsSpan && generateColSpanStyles("xs", $xsSpan), ({ $smSpan }) => $smSpan && generateColSpanStyles("sm", $smSpan), ({ $mdSpan }) => $mdSpan && generateColSpanStyles("md", $mdSpan), ({ $lgSpan }) => $lgSpan && generateColSpanStyles("lg", $lgSpan), ({ $xlSpan }) => $xlSpan && generateColSpanStyles("xl", $xlSpan), ({ $xxlSpan }) => $xxlSpan && generateColSpanStyles("xxl", $xxlSpan), ({ $xxxlSpan }) => $xxxlSpan && generateColSpanStyles("xxxl", $xxxlSpan));
 function LocalCol({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledCol, {
+	return /*#__PURE__*/ jsx(StyledCol, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var Col = /* @__PURE__ */ forwardRef(LocalCol);
+var Col = /*#__PURE__*/ forwardRef(LocalCol);
 //#endregion
 export { Col };

package/dist/container.js

@@ -27,12 +27,12 @@ var StyledContainer = styled.div.withConfig({
 	``
 ], ({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xs, ({ $textAlign }) => $textAlign && `text-align: ${$textAlign}`, ({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.xs, mq("lg"), ({ $padding, theme }) => $padding && `${$padding}px` || theme.spacing.padding.lg, mq("xxxl"), ({ theme, $fluid }) => $fluid ? `100%` : theme.spacing.maxWidth.xxxl, ({ $xsPadding }) => $xsPadding && generatePaddingStyles("xs", $xsPadding), ({ $smPadding }) => $smPadding && generatePaddingStyles("sm", $smPadding), ({ $mdPadding }) => $mdPadding && generatePaddingStyles("md", $mdPadding), ({ $lgPadding }) => $lgPadding && generatePaddingStyles("lg", $lgPadding), ({ $xlPadding }) => $xlPadding && generatePaddingStyles("xl", $xlPadding), ({ $xxlPadding }) => $xxlPadding && generatePaddingStyles("xxl", $xxlPadding), ({ $xxxlPadding }) => $xxxlPadding && generatePaddingStyles("xxxl", $xxxlPadding));
 function LocalContainer({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledContainer, {
+	return /*#__PURE__*/ jsx(StyledContainer, {
 		...props,
 		ref,
 		children: props.children
 	});
 }
-var Container = /* @__PURE__ */ forwardRef(LocalContainer);
+var Container = /*#__PURE__*/ forwardRef(LocalContainer);
 //#endregion
 export { Container };

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

@@ -2,7 +2,7 @@ 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 { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
 import { Container } from "./container.js";
@@ -19,4 +19,4 @@ import { Select, StyledIconWrapper } from "./select.js";
 import { Space } from "./space.js";
 import { Textarea } from "./textarea.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 { 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 };

package/dist/input.js

@@ -8,16 +8,16 @@ import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-a617b4b1-0"
+	componentId: "sc-df1aa532-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
 	` & .icon-calendar{position:absolute;top:50%;right:17px;left:initial;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;@supports (-moz-appearance:none){display:none;}}`,
 	``
-], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
+], ({ 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-a617b4b1-1"
+	componentId: "sc-df1aa532-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-a617b4b1-2"
+	componentId: "sc-df1aa532-2"
 })([
 	``,
 	`;`,
@@ -35,7 +35,7 @@ var StyledInput = styled.input.withConfig({
 	`;background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
-	`;transition:all 0.3s ease;word-break:keep-all;white-space:nowrap;display:inline-flex;&[type="date"],&[type="datetime-local"],&[type="month"],&[type="week"],&[type="time"]{padding:17px 45px 17px 15px;@supports (-moz-appearance:none){padding:13px 15px;}}&::-webkit-datetime-edit{padding:0;margin:0;vertical-align:middle;}&::-webkit-datetime-edit-fields-wrapper{padding:4px 0;margin:0;vertical-align:middle;}&::-webkit-calendar-picker-indicator{background:transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;}&::-webkit-datetime-edit-text{color:`,
+	`;transition:all 0.3s ease;word-break:keep-all;white-space:nowrap;display:inline-flex;&::-webkit-datetime-edit{padding:0;margin:0;vertical-align:middle;}&::-webkit-datetime-edit-fields-wrapper{padding:4px 0;margin:0;vertical-align:middle;}&::-webkit-calendar-picker-indicator{background:transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;}&::-webkit-datetime-edit-text{color:`,
 	`;}&::-webkit-datetime-edit-month-field{&:focus{background:`,
 	`;color:`,
 	`;border-radius:4px;}}&::-webkit-datetime-edit-day-field{&:focus{background:`,
@@ -76,11 +76,11 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-a617b4b1-3"
+	componentId: "sc-df1aa532-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-a617b4b1-4"
+	componentId: "sc-df1aa532-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -165,53 +165,53 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-a617b4b1-5"
+	componentId: "sc-df1aa532-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,
 	`;}`,
-	``
+	` &: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/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 };

package/dist/select.js

@@ -41,24 +41,24 @@ var StyledIconWrapper = styled.span.withConfig({
 	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));
 function LocalSelect({ ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		$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(StyledIconWrapper, {
+		}), /*#__PURE__*/ jsxs(StyledIconWrapper, {
 			$fullWidth: props.$fullWidth,
-			children: [/* @__PURE__ */ jsx(StyledSelect, {
+			children: [/*#__PURE__*/ jsx(StyledSelect, {
 				...props,
 				"aria-invalid": props.$error || void 0,
 				ref,
 				children: props.children
-			}), /* @__PURE__ */ jsx(IconArrow, { "aria-hidden": "true" })]
+			}), /*#__PURE__*/ jsx(IconArrow, { "aria-hidden": "true" })]
 		})]
 	});
 }
-var Select = /* @__PURE__ */ forwardRef(LocalSelect);
+var Select = /*#__PURE__*/ forwardRef(LocalSelect);
 //#endregion
 export { Select, StyledIconWrapper };

package/dist/space.js

@@ -41,11 +41,11 @@ var StyledSpace = styled.span.withConfig({
 	``
 ], ({ $horizontal, $size }) => $size ? styles($size, $horizontal || false) : "", (props) => responsiveStyles(props));
 function LocalSpace({ ...props }, ref) {
-	return /* @__PURE__ */ jsx(StyledSpace, {
+	return /*#__PURE__*/ jsx(StyledSpace, {
 		...props,
 		ref
 	});
 }
-var Space = /* @__PURE__ */ forwardRef(LocalSpace);
+var Space = /*#__PURE__*/ forwardRef(LocalSpace);
 //#endregion
 export { Space };

package/dist/styled-components/registry.js

@@ -11,9 +11,9 @@ function StyledComponentsRegistry({ children }) {
 	useServerInsertedHTML(() => {
 		const styles = styledComponentsStyleSheet.getStyleElement();
 		styledComponentsStyleSheet.instance.clearTag();
-		return /* @__PURE__ */ jsx(Fragment, { children: styles });
+		return /*#__PURE__*/ jsx(Fragment, { children: styles });
 	});
-	return /* @__PURE__ */ jsx(StyleSheetManager, {
+	return /*#__PURE__*/ jsx(StyleSheetManager, {
 		sheet: isServer ? styledComponentsStyleSheet.instance : void 0,
 		enableVendorPrefixes: true,
 		children

package/dist/styled-components/theme-provider.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
 //#region src/lib/styled-components/theme-provider.tsx
-var ThemeContext = /* @__PURE__ */ createContext({ setTheme: () => {} });
+var ThemeContext = /*#__PURE__*/ createContext({ setTheme: () => {} });
 function CherryThemeProvider({ children, theme, themeDark }) {
 	const [currentTheme, setTheme] = useState(theme);
 	useEffect(() => {
@@ -19,11 +19,11 @@ function CherryThemeProvider({ children, theme, themeDark }) {
 		}
 	}, [theme, themeDark]);
 	const GlobalStylesComponent = GlobalStyles(currentTheme);
-	return /* @__PURE__ */ jsx(ThemeProvider, {
+	return /*#__PURE__*/ jsx(ThemeProvider, {
 		theme: currentTheme,
-		children: /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		children: /*#__PURE__*/ jsxs(ThemeContext.Provider, {
 			value: { setTheme },
-			children: [/* @__PURE__ */ jsx(GlobalStylesComponent, {}), children]
+			children: [/*#__PURE__*/ jsx(GlobalStylesComponent, {}), children]
 		})
 	});
 }

package/dist/textarea.js

@@ -41,15 +41,15 @@ var StyledTextarea = styled.textarea.withConfig({
 		color: ${theme.colors.gray};
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 function LocalTextarea({ ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		$label: props.$label,
 		className: props.$wrapperClassName,
-		children: [props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+		children: [props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			$label: props.$label,
 			children: props.$label
-		}), /* @__PURE__ */ jsx(StyledTextarea, {
+		}), /*#__PURE__*/ jsx(StyledTextarea, {
 			...props,
 			"aria-invalid": props.$error || void 0,
 			ref,
@@ -57,6 +57,6 @@ function LocalTextarea({ ...props }, ref) {
 		})]
 	});
 }
-var Textarea = /* @__PURE__ */ forwardRef(LocalTextarea);
+var Textarea = /*#__PURE__*/ forwardRef(LocalTextarea);
 //#endregion
 export { Textarea };

package/dist/toggle.js

@@ -57,26 +57,26 @@ var StyledToggle = styled.input.withConfig({
 			}
 		}`);
 function LocalToggle({ type = "checkbox", ...props }, ref) {
-	return /* @__PURE__ */ jsxs(StyledInputWrapper, {
+	return /*#__PURE__*/ jsxs(StyledInputWrapper, {
 		$fullWidth: props.$fullWidth,
 		$label: props.$label,
 		className: props.$wrapperClassName,
-		children: [/* @__PURE__ */ jsxs(StyledToggleWrapper, { children: [/* @__PURE__ */ jsx(StyledToggle, {
+		children: [/*#__PURE__*/ jsxs(StyledToggleWrapper, { children: [/*#__PURE__*/ jsx(StyledToggle, {
 			...props,
 			type,
 			role: "switch",
 			ref
-		}), /* @__PURE__ */ jsx(StyledFakeToggle, {
+		}), /*#__PURE__*/ jsx(StyledFakeToggle, {
 			$error: props.$error,
 			$success: props.$success,
 			className: "fake-toggle",
 			$size: props.$size
-		})] }), props.$label && /* @__PURE__ */ jsx(StyledLabel, {
+		})] }), props.$label && /*#__PURE__*/ jsx(StyledLabel, {
 			htmlFor: props.id,
 			children: props.$label
 		})]
 	});
 }
-var Toggle = /* @__PURE__ */ forwardRef(LocalToggle);
+var Toggle = /*#__PURE__*/ forwardRef(LocalToggle);
 //#endregion
 export { Toggle };

package/dist/utils/icons.js

@@ -5,14 +5,14 @@ import { useTheme } from "styled-components";
 //#region src/lib/utils/icons.tsx
 function IconCheck({ ...props }) {
 	const theme = useTheme();
-	return /* @__PURE__ */ jsx("svg", {
+	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", {
+		children: /*#__PURE__*/ jsx("path", {
 			d: "M10 2L4.4 8L2 5.75",
 			stroke: theme.colors.primary,
 			strokeWidth: "3",
@@ -23,14 +23,14 @@ function IconCheck({ ...props }) {
 }
 function IconArrow({ ...props }) {
 	const theme = useTheme();
-	return /* @__PURE__ */ jsx("svg", {
+	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", {
+		children: /*#__PURE__*/ jsx("path", {
 			d: "M2 2L8 8L14 2",
 			stroke: theme.colors.primary,
 			strokeWidth: "3",
@@ -40,7 +40,7 @@ function IconArrow({ ...props }) {
 	});
 }
 function IconCalendar({ ...props }) {
-	return /* @__PURE__ */ jsxs("svg", {
+	return /*#__PURE__*/ jsxs("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
 		width: "24",
 		height: "24",
@@ -52,22 +52,22 @@ function IconCalendar({ ...props }) {
 		strokeLinejoin: "round",
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
-			/* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
-			/* @__PURE__ */ jsx("rect", {
+			/*#__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" })
+			/*#__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" })
 		]
 	});
 }

package/dist/{src/lib/utils → utils}/mixins.d.ts

@@ -9,3 +9,6 @@ export declare const generateColsStyles: (size: keyof Breakpoints<number>, cols:
 export declare const generateColSpanStyles: (size: keyof Breakpoints<number>, span: number) => import('styled-components').RuleSet<object>;
 export declare const generatePaddingStyles: (size: keyof Breakpoints<number>, padding: number | "none") => import('styled-components').RuleSet<object>;
 export declare const generateJustifyContentStyles: (size: keyof Breakpoints<number>, justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") => import('styled-components').RuleSet<object>;
+export declare const generateAlignItemsStyles: (size: keyof Breakpoints<number>, alignItems?: "stretch" | "center" | "flex-start" | "flex-end" | "baseline") => import('styled-components').RuleSet<object>;
+export declare const generateAlignContentStyles: (size: keyof Breakpoints<number>, alignContent?: "stretch" | "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") => import('styled-components').RuleSet<object>;
+export declare const generateDirectionStyles: (size: keyof Breakpoints<number>, direction?: "row" | "column" | "row-reverse" | "column-reverse") => import('styled-components').RuleSet<object>;

package/dist/utils/mixins.js

@@ -42,5 +42,20 @@ var generateJustifyContentStyles = (size, justifyContent) => css([
 	`{justify-content:`,
 	`;}`
 ], mq(size), justifyContent && `${justifyContent}`);
+var generateAlignItemsStyles = (size, alignItems) => css([
+	``,
+	`{align-items:`,
+	`;}`
+], mq(size), alignItems && `${alignItems}`);
+var generateAlignContentStyles = (size, alignContent) => css([
+	``,
+	`{align-content:`,
+	`;}`
+], mq(size), alignContent && `${alignContent}`);
+var generateDirectionStyles = (size, direction) => css([
+	``,
+	`{flex-direction:`,
+	`;}`
+], mq(size), direction && `${direction}`);
 //#endregion
-export { formElementHeightStyles, fullWidthStyles, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles };
+export { formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -41,7 +41,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^1.21.0",
     "polished": "^4.3.1"
   },
   "peerDependencies": {
@@ -50,21 +50,21 @@
     "styled-components": "^6.0.0"
   },
   "devDependencies": {
-    "@swc/plugin-styled-components": "^12.7.0",
-    "@types/node": "^25.5.0",
-    "@types/react": "^19.2.14",
+    "@swc/plugin-styled-components": "^12.14.0",
+    "@types/node": "^26.0.1",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.3.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "next": "^16.2.1",
-    "prettier": "^3.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "@vitejs/plugin-react-swc": "^4.3.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "next": "^16.2.9",
+    "prettier": "^3.9.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "styled-components": "^6.3.12",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.3",
-    "vite-plugin-dts": "^4.5.4"
+    "styled-components": "^6.4.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3"
   }
 }

package/dist/src/lib/flex.d.ts

@@ -1,27 +0,0 @@
-import { default as React } from 'react';
-type JustifyContentType = "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
-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;
-    $wrap?: "wrap" | "nowrap" | "wrap-reverse";
-    $gap?: GapType;
-    $xsGap?: GapType;
-    $smGap?: GapType;
-    $mdGap?: GapType;
-    $lgGap?: GapType;
-    $xlGap?: GapType;
-    $xxlGap?: GapType;
-    $xxxlGap?: GapType;
-    $direction?: "row" | "column" | "row-reverse" | "column-reverse";
-    $fullWidth?: boolean;
-}
-declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
-export { Flex };