@redis-ui/components 41.4.1 → 41.11.0

package/dist/Inputs/components/Context/NumericInputValueProvider.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { useMemo } from "react";
+import { useRef, useMemo } from "react";
 import { useControllableState } from "../../../node_modules/@radix-ui/react-use-controllable-state/dist/index.js";
 import { ContextProvider } from "./InputValue.context.js";
 import { useNumericInput } from "../../hooks/numericInput/useNumericInput.js";
@@ -27,8 +27,10 @@ const NumericInputValueProvider = ({
     onChange: setInputValue,
     ...restProps
   });
+  const inputRef = useRef(null);
   const context = useMemo(() => ({
     api: {
+      inputRef,
       value: inputProps.value,
       resetValue: () => forceChange(""),
       canIncrement,
@@ -36,7 +38,10 @@ const NumericInputValueProvider = ({
       increment,
       decrement
     },
-    props: inputProps
+    props: {
+      ...inputProps,
+      ref: inputRef
+    }
   }), [inputProps, canIncrement, canDecrement, increment, decrement, forceChange]);
   return jsxRuntimeExports.jsx(ContextProvider, {
     value: context,

package/dist/Inputs/components/InputTag/InputTag.cjs

@@ -19,20 +19,25 @@ const InputTag = React.forwardRef(({
 }, ref) => {
   const fieldDisabled = Field_context.useFieldDisabled(disabled);
   const sharedId = SharedId_context.useSharedId(id);
-  const inputValueProps = InputValue_context.useInputValueProps(restProps);
+  const inputValueProps = InputValue_context.useInputValueProps(restProps, ref);
   const status = FormField_context.useFieldStatus();
+  const required = FormField_context.useFieldRequired();
   const errorContent = Field_context.useErrorContent();
   const errorId = index.useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const inputProps = {
     id: sharedId,
     type,
     disabled: fieldDisabled,
     autoComplete,
     ...statusProps,
+    ...requiredProps,
     ...restProps,
     ...inputValueProps
   };
@@ -40,11 +45,9 @@ const InputTag = React.forwardRef(({
     ...inputProps,
     value: inputProps.value,
     children: (props) => jsxRuntime.jsxRuntimeExports.jsx(InputTag_style.InputTag, {
-      ref,
       ...props
     })
   }) : jsxRuntime.jsxRuntimeExports.jsx(InputTag_style.InputTag, {
-    ref,
     ...inputProps
   });
   return jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {

package/dist/Inputs/components/InputTag/InputTag.js

@@ -5,7 +5,7 @@ import { VisuallyHidden } from "../../../node_modules/@radix-ui/react-visually-h
 import { useFieldDisabled, useErrorContent } from "../Context/Field.context.js";
 import { useInputValueProps } from "../Context/InputValue.context.js";
 import { AutoSizeInputTag, InputTag as InputTag$1 } from "./InputTag.style.js";
-import { useFieldStatus } from "../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired } from "../../../FormField/FormField.context.js";
 import { useSharedId } from "../../../Helpers/contexts/SharedId.context.js";
 const InputTag = forwardRef(({
   autoSize,
@@ -17,20 +17,25 @@ const InputTag = forwardRef(({
 }, ref) => {
   const fieldDisabled = useFieldDisabled(disabled);
   const sharedId = useSharedId(id);
-  const inputValueProps = useInputValueProps(restProps);
+  const inputValueProps = useInputValueProps(restProps, ref);
   const status = useFieldStatus();
+  const required = useFieldRequired();
   const errorContent = useErrorContent();
   const errorId = useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
     "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
   } : null;
+  const requiredProps = required ? {
+    "aria-required": true
+  } : null;
   const inputProps = {
     id: sharedId,
     type,
     disabled: fieldDisabled,
     autoComplete,
     ...statusProps,
+    ...requiredProps,
     ...restProps,
     ...inputValueProps
   };
@@ -38,11 +43,9 @@ const InputTag = forwardRef(({
     ...inputProps,
     value: inputProps.value,
     children: (props) => jsxRuntimeExports.jsx(InputTag$1, {
-      ref,
       ...props
     })
   }) : jsxRuntimeExports.jsx(InputTag$1, {
-    ref,
     ...inputProps
   });
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {

package/dist/Inputs/components/InputTag/InputTag.style.cjs

@@ -54,7 +54,7 @@ const InputStyle = _styled.css`
 const InputTag = _styled__default.default.input.withConfig({
   displayName: "InputTagstyle__InputTag",
   componentId: "RedisUI__sc-15tql6o-0"
-})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&[type='password']:not(:placeholder-shown){font-size:", ";}"], InputStyle, () => redisUiStyles.useTheme().components.input.password.fontSize);
+})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&[type='password']:not(:placeholder-shown){font-family:", ";font-size:", ";@supports not (-moz-appearance:none){font-size-adjust:", ";}}"], InputStyle, () => redisUiStyles.useTheme().components.input.password.fontFamily, () => redisUiStyles.useTheme().components.input.password.fontSize, () => redisUiStyles.useTheme().components.input.password.fontSizeAdjust);
 const AutoSizeInputTag = _styled__default.default(AutoSizeInput.AutoSizeInput).withConfig({
   displayName: "InputTagstyle__AutoSizeInputTag",
   componentId: "RedisUI__sc-15tql6o-1"

package/dist/Inputs/components/InputTag/InputTag.style.js

@@ -50,7 +50,7 @@ const InputStyle = css`
 const InputTag = _styled.input.withConfig({
   displayName: "InputTagstyle__InputTag",
   componentId: "RedisUI__sc-15tql6o-0"
-})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&[type='password']:not(:placeholder-shown){font-size:", ";}"], InputStyle, () => useTheme().components.input.password.fontSize);
+})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&[type='password']:not(:placeholder-shown){font-family:", ";font-size:", ";@supports not (-moz-appearance:none){font-size-adjust:", ";}}"], InputStyle, () => useTheme().components.input.password.fontFamily, () => useTheme().components.input.password.fontSize, () => useTheme().components.input.password.fontSizeAdjust);
 const AutoSizeInputTag = _styled(AutoSizeInput).withConfig({
   displayName: "InputTagstyle__AutoSizeInputTag",
   componentId: "RedisUI__sc-15tql6o-1"

package/dist/Inputs/components/ResetButton/ResetButton.cjs

@@ -19,7 +19,8 @@ const ResetButton = ({
   const fieldDisabled = Field_context.useFieldDisabled();
   const {
     value,
-    resetValue
+    resetValue,
+    inputRef
   } = InputValue_context.useInputValueApi();
   return !fieldReadonly && allowReset && value ? jsxRuntime.jsxRuntimeExports.jsx(ResetButton_style.ResetButton, {
     disabled: fieldDisabled,
@@ -27,10 +28,12 @@ const ResetButton = ({
     icon,
     title: "Reset",
     ...restProps,
-    onClick: react_utils.combineHandlers(resetValue, onClick),
+    onClick: react_utils.combineHandlers(() => {
+      var _a;
+      return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
+    }, resetValue, onClick),
     // prevent focus on the buttons
-    onMouseDown: react_utils.combineHandlers((e) => e.preventDefault(), onMouseDown),
-    tabIndex: -1
+    onMouseDown: react_utils.combineHandlers((e) => e.preventDefault(), onMouseDown)
   }) : null;
 };
 exports.ResetButton = ResetButton;

package/dist/Inputs/components/ResetButton/ResetButton.js

@@ -17,7 +17,8 @@ const ResetButton = ({
   const fieldDisabled = useFieldDisabled();
   const {
     value,
-    resetValue
+    resetValue,
+    inputRef
   } = useInputValueApi();
   return !fieldReadonly && allowReset && value ? jsxRuntimeExports.jsx(ResetButton$1, {
     disabled: fieldDisabled,
@@ -25,10 +26,12 @@ const ResetButton = ({
     icon,
     title: "Reset",
     ...restProps,
-    onClick: combineHandlers(resetValue, onClick),
+    onClick: combineHandlers(() => {
+      var _a;
+      return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.focus();
+    }, resetValue, onClick),
     // prevent focus on the buttons
-    onMouseDown: combineHandlers((e) => e.preventDefault(), onMouseDown),
-    tabIndex: -1
+    onMouseDown: combineHandlers((e) => e.preventDefault(), onMouseDown)
   }) : null;
 };
 export {

package/dist/Label/components/Required/Required.cjs

@@ -2,17 +2,17 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const Required_style = require("./Required.style.cjs");
+const FormField_context = require("../../../FormField/FormField.context.cjs");
 const Required = ({
   children = "*",
   show = true,
   size,
   ...restProps
-}) => {
-  return show ? jsxRuntime.jsxRuntimeExports.jsx(Required_style.Required, {
-    component: "span",
-    size: size ?? "S",
-    ...restProps,
-    children
-  }) : null;
-};
+}) => FormField_context.useFieldRequired(show) ? jsxRuntime.jsxRuntimeExports.jsx(Required_style.Required, {
+  component: "span",
+  size: size ?? "S",
+  "aria-hidden": true,
+  ...restProps,
+  children
+}) : null;
 exports.default = Required;

package/dist/Label/components/Required/Required.js

@@ -1,18 +1,18 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { Required as Required$1 } from "./Required.style.js";
+import { useFieldRequired } from "../../../FormField/FormField.context.js";
 const Required = ({
   children = "*",
   show = true,
   size,
   ...restProps
-}) => {
-  return show ? jsxRuntimeExports.jsx(Required$1, {
-    component: "span",
-    size: size ?? "S",
-    ...restProps,
-    children
-  }) : null;
-};
+}) => useFieldRequired(show) ? jsxRuntimeExports.jsx(Required$1, {
+  component: "span",
+  size: size ?? "S",
+  "aria-hidden": true,
+  ...restProps,
+  children
+}) : null;
 export {
   Required as default
 };

package/dist/Layouts/FlexDivider/FlexDivider.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const FlexDivider_style = require("./FlexDivider.style.cjs");
+const FlexDivider = ({
+  padding = "none",
+  spacing = "none",
+  orientation,
+  autoHide = true,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(FlexDivider_style.FlexDivider, {
+  role: "separator",
+  ...restProps,
+  "$padding": padding,
+  "$spacing": spacing,
+  "$autoHide": autoHide,
+  ...orientation && {
+    "data-orientation": orientation,
+    "aria-orientation": orientation
+  }
+});
+exports.FlexDivider = FlexDivider;

package/dist/Layouts/FlexDivider/FlexDivider.d.ts

@@ -0,0 +1,2 @@
+import { FlexDividerProps } from './FlexDivider.types';
+export declare const FlexDivider: ({ padding, spacing, orientation, autoHide, ...restProps }: FlexDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/FlexDivider/FlexDivider.js

@@ -0,0 +1,22 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { FlexDivider as FlexDivider$1 } from "./FlexDivider.style.js";
+const FlexDivider = ({
+  padding = "none",
+  spacing = "none",
+  orientation,
+  autoHide = true,
+  ...restProps
+}) => jsxRuntimeExports.jsx(FlexDivider$1, {
+  role: "separator",
+  ...restProps,
+  "$padding": padding,
+  "$spacing": spacing,
+  "$autoHide": autoHide,
+  ...orientation && {
+    "data-orientation": orientation,
+    "aria-orientation": orientation
+  }
+});
+export {
+  FlexDivider
+};

package/dist/Layouts/FlexDivider/FlexDivider.style.cjs

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const FlexDivider = _styled__default.default.div.withConfig({
+  displayName: "FlexDividerstyle__FlexDivider",
+  componentId: "RedisUI__sc-i92bia-0"
+})(["flex:none;align-self:stretch;", " ", ""], ({
+  $padding,
+  $spacing
+}) => {
+  const styles = redisUiStyles.useTheme().components.layouts.flexDivider;
+  const padding = styles.padding[$padding] ?? $padding;
+  const spacing = styles.spacing[$spacing] ?? $spacing;
+  return _styled.css`
+      background-color: ${styles.color};
+      [data-flex-direction='row'] > :where(&&:not([data-orientation])),
+      [data-flex-direction='row-reverse'] > :where(&&:not([data-orientation])),
+      &[data-orientation='vertical'] {
+        width: ${styles.size};
+        margin-block: ${padding};
+        margin-inline: ${spacing};
+        display: inline-block;
+      }
+
+      [data-flex-direction='column'] > :where(&&:not([data-orientation])),
+      [data-flex-direction='column-reverse'] > :where(&&:not([data-orientation])),
+      &[data-orientation='horizontal'] {
+        height: ${styles.size};
+        margin-inline: ${padding};
+        margin-block: ${spacing};
+        display: block;
+      }
+    `;
+}, ({
+  $autoHide
+}) => $autoHide && _styled.css`
+      &:first-child,
+      &:last-child,
+      & + & {
+        display: none;
+      }
+    `);
+exports.FlexDivider = FlexDivider;

package/dist/Layouts/FlexDivider/FlexDivider.style.d.ts

@@ -0,0 +1,6 @@
+import { FlexDividerPaddingSize } from './FlexDivider.types';
+export declare const FlexDivider: import("styled-components").StyledComponent<"div", any, {
+    $padding: FlexDividerPaddingSize;
+    $spacing: FlexDividerPaddingSize;
+    $autoHide: boolean;
+}, never>;

package/dist/Layouts/FlexDivider/FlexDivider.style.js

@@ -0,0 +1,44 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const FlexDivider = _styled.div.withConfig({
+  displayName: "FlexDividerstyle__FlexDivider",
+  componentId: "RedisUI__sc-i92bia-0"
+})(["flex:none;align-self:stretch;", " ", ""], ({
+  $padding,
+  $spacing
+}) => {
+  const styles = useTheme().components.layouts.flexDivider;
+  const padding = styles.padding[$padding] ?? $padding;
+  const spacing = styles.spacing[$spacing] ?? $spacing;
+  return css`
+      background-color: ${styles.color};
+      [data-flex-direction='row'] > :where(&&:not([data-orientation])),
+      [data-flex-direction='row-reverse'] > :where(&&:not([data-orientation])),
+      &[data-orientation='vertical'] {
+        width: ${styles.size};
+        margin-block: ${padding};
+        margin-inline: ${spacing};
+        display: inline-block;
+      }
+
+      [data-flex-direction='column'] > :where(&&:not([data-orientation])),
+      [data-flex-direction='column-reverse'] > :where(&&:not([data-orientation])),
+      &[data-orientation='horizontal'] {
+        height: ${styles.size};
+        margin-inline: ${padding};
+        margin-block: ${spacing};
+        display: block;
+      }
+    `;
+}, ({
+  $autoHide
+}) => $autoHide && css`
+      &:first-child,
+      &:last-child,
+      & + & {
+        display: none;
+      }
+    `);
+export {
+  FlexDivider
+};

package/dist/Layouts/FlexDivider/FlexDivider.types.d.ts

@@ -0,0 +1,15 @@
+import { AnyOtherString, ChildFree, ComposeElementProps } from '../../Helpers';
+type FlexDividerOrientation = 'horizontal' | 'vertical';
+export type FlexDividerPaddingSize = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | 'none' | AnyOtherString;
+export type OwnFlexDividerProps = {
+    /** Paddings from the edges of the container */
+    padding?: FlexDividerPaddingSize;
+    /** Additional margins between divider line and dividing elements. Gap of flex container is preferred. Default - none */
+    spacing?: FlexDividerPaddingSize;
+    /** The orientation of the divider line when used in a custom container. FlexGroup automatically defines its orientation. */
+    orientation?: FlexDividerOrientation;
+    /** Hide extra Dividers if there are multiple ones next to each other or if one is displayed as the first/last element. Defaults to true. */
+    autoHide?: boolean;
+};
+export type FlexDividerProps = OwnFlexDividerProps & ChildFree<ComposeElementProps>;
+export {};

package/dist/Layouts/FlexGroup/FlexGroup.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const FlexGroup_style = require("./FlexGroup.style.cjs");
+const FlexGroup = ({
+  gap = "S",
+  direction = "row",
+  align = direction.includes("column") ? "stretch" : "center",
+  justify,
+  wrap,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(FlexGroup_style.FlexGroup, {
+  ...restProps,
+  "$gap": gap,
+  "$align": align,
+  "$justify": justify,
+  "$wrap": wrap,
+  "data-flex-direction": direction
+});
+exports.FlexGroup = FlexGroup;

package/dist/Layouts/FlexGroup/FlexGroup.d.ts

@@ -0,0 +1,2 @@
+import { FlexGroupProps } from './FlexGroup.types';
+export declare const FlexGroup: ({ gap, direction, align, justify, wrap, ...restProps }: FlexGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/FlexGroup/FlexGroup.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { FlexGroup as FlexGroup$1 } from "./FlexGroup.style.js";
+const FlexGroup = ({
+  gap = "S",
+  direction = "row",
+  align = direction.includes("column") ? "stretch" : "center",
+  justify,
+  wrap,
+  ...restProps
+}) => jsxRuntimeExports.jsx(FlexGroup$1, {
+  ...restProps,
+  "$gap": gap,
+  "$align": align,
+  "$justify": justify,
+  "$wrap": wrap,
+  "data-flex-direction": direction
+});
+export {
+  FlexGroup
+};

package/dist/Layouts/FlexGroup/FlexGroup.style.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const FlexItem = require("../FlexItem/FlexItem.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const FlexGroup = _styled__default.default(FlexItem.FlexItem).withConfig({
+  displayName: "FlexGroupstyle__FlexGroup",
+  componentId: "RedisUI__sc-1t0rzwk-0"
+})(["display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";flex-direction:", ";gap:", ";"], ({
+  $wrap
+}) => $wrap ? "wrap" : "nowrap", ({
+  $align
+}) => $align, ({
+  $justify
+}) => $justify, (props) => props["data-flex-direction"], ({
+  $gap
+}) => redisUiStyles.useTheme().components.layouts.flexGroup.gap[$gap] ?? $gap);
+exports.FlexGroup = FlexGroup;

package/dist/Layouts/FlexGroup/FlexGroup.style.d.ts

@@ -0,0 +1,9 @@
+import { FlexAlign } from '../FlexItem/FlexItem.types';
+import { FlexDirection, FlexGroupGapSize, FlexJustify } from './FlexGroup.types';
+export declare const FlexGroup: import("styled-components").StyledComponent<({ flex, selfAlign, component, ...restProps }: import("../FlexItem/FlexItem.types").FlexItemProps) => import("react/jsx-runtime").JSX.Element, any, {
+    $gap: FlexGroupGapSize;
+    $align: FlexAlign;
+    $justify?: FlexJustify | undefined;
+    $wrap?: boolean | undefined;
+    'data-flex-direction': FlexDirection;
+}, never>;

package/dist/Layouts/FlexGroup/FlexGroup.style.js

@@ -0,0 +1,18 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { FlexItem } from "../FlexItem/FlexItem.js";
+const FlexGroup = _styled(FlexItem).withConfig({
+  displayName: "FlexGroupstyle__FlexGroup",
+  componentId: "RedisUI__sc-1t0rzwk-0"
+})(["display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";flex-direction:", ";gap:", ";"], ({
+  $wrap
+}) => $wrap ? "wrap" : "nowrap", ({
+  $align
+}) => $align, ({
+  $justify
+}) => $justify, (props) => props["data-flex-direction"], ({
+  $gap
+}) => useTheme().components.layouts.flexGroup.gap[$gap] ?? $gap);
+export {
+  FlexGroup
+};

package/dist/Layouts/FlexGroup/FlexGroup.types.d.ts

@@ -0,0 +1,19 @@
+import { AnyOtherString } from '../../Helpers';
+import { FlexAlign, OwnFlexItemProps, RestFlexItemProps } from '../FlexItem/FlexItem.types';
+export type FlexGroupGapSize = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | AnyOtherString;
+export type FlexDirection = 'column' | 'row' | 'column-reverse' | 'row-reverse';
+export type FlexJustify = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+export type OwnFlexGroupProps = OwnFlexItemProps & {
+    /** Gap size between items. Supports predefined T-Shirt sizes and free text for applying values from theme */
+    gap?: FlexGroupGapSize;
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Align items along the cross axis */
+    align?: FlexAlign;
+    /** Justify content along the main axis */
+    justify?: FlexJustify;
+    /** Whether items should wrap to new lines */
+    wrap?: boolean;
+};
+export type RestFlexGroupProps = RestFlexItemProps;
+export type FlexGroupProps = OwnFlexGroupProps & RestFlexGroupProps;

package/dist/Layouts/FlexItem/FlexItem.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const FlexItem_style = require("./FlexItem.style.cjs");
+const FlexItem = ({
+  flex,
+  selfAlign,
+  component,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(FlexItem_style.FlexItem, {
+  ...restProps,
+  "$flex": flex,
+  "$selfAlign": selfAlign,
+  as: component
+});
+exports.FlexItem = FlexItem;

package/dist/Layouts/FlexItem/FlexItem.d.ts

@@ -0,0 +1,2 @@
+import { FlexItemProps } from './FlexItem.types';
+export declare const FlexItem: ({ flex, selfAlign, component, ...restProps }: FlexItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/FlexItem/FlexItem.js

@@ -0,0 +1,16 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { FlexItem as FlexItem$1 } from "./FlexItem.style.js";
+const FlexItem = ({
+  flex,
+  selfAlign,
+  component,
+  ...restProps
+}) => jsxRuntimeExports.jsx(FlexItem$1, {
+  ...restProps,
+  "$flex": flex,
+  "$selfAlign": selfAlign,
+  as: component
+});
+export {
+  FlexItem
+};

package/dist/Layouts/FlexItem/FlexItem.style.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const FlexItem = _styled__default.default.div.withConfig({
+  displayName: "FlexItemstyle__FlexItem",
+  componentId: "RedisUI__sc-sfog54-0"
+})(["flex:", ";align-self:", ";"], ({
+  $flex
+}) => $flex, ({
+  $selfAlign
+}) => $selfAlign);
+exports.FlexItem = FlexItem;

package/dist/Layouts/FlexItem/FlexItem.style.d.ts

@@ -0,0 +1,5 @@
+import { FlexAlign, FlexFlex } from './FlexItem.types';
+export declare const FlexItem: import("styled-components").StyledComponent<"div", any, {
+    $selfAlign?: FlexAlign | undefined;
+    $flex?: FlexFlex | undefined;
+}, never>;

package/dist/Layouts/FlexItem/FlexItem.style.js

@@ -0,0 +1,12 @@
+import _styled from "styled-components";
+const FlexItem = _styled.div.withConfig({
+  displayName: "FlexItemstyle__FlexItem",
+  componentId: "RedisUI__sc-sfog54-0"
+})(["flex:", ";align-self:", ";"], ({
+  $flex
+}) => $flex, ({
+  $selfAlign
+}) => $selfAlign);
+export {
+  FlexItem
+};

package/dist/Layouts/FlexItem/FlexItem.types.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+import { AnyOtherString, ComposeElementProps } from '../../Helpers';
+export type FlexAlign = 'start' | 'end' | 'center' | 'stretch';
+export type FlexFlex = 'auto' | 'none' | AnyOtherString;
+export type OwnFlexItemProps = {
+    /** Flex grow/shrink/basis value */
+    flex?: FlexFlex;
+    /** Align self in parent flex container along the cross axis of the parent flex */
+    selfAlign?: FlexAlign;
+    /** Use different component with Flex styling, default is `div` */
+    component?: string | ComponentType;
+};
+export type RestFlexItemProps = ComposeElementProps;
+export type FlexItemProps = OwnFlexItemProps & RestFlexItemProps;

package/dist/Layouts/FlexSplit/FlexSplit.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const FlexSplit_style = require("./FlexSplit.style.cjs");
+const FlexSplit = ({
+  extraMinSpace
+}) => jsxRuntime.jsxRuntimeExports.jsx(FlexSplit_style.FlexSplit, {
+  "$extraMinSpace": extraMinSpace
+});
+exports.FlexSplit = FlexSplit;

package/dist/Layouts/FlexSplit/FlexSplit.d.ts

@@ -0,0 +1,2 @@
+import { FlexSplitProps } from './FlexSplit.types';
+export declare const FlexSplit: ({ extraMinSpace }: FlexSplitProps) => import("react/jsx-runtime").JSX.Element;