@veeqo/ui 10.0.0-beta.4 → 10.0.0-beta.6

package/dist/components/DatePicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../tempIcons/CalendarIcon';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Button } from '../Button';\nimport { DatePickerFooter } from './styled';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n  value: DateValue | null;\n  'aria-label': string;\n  onChange: (date: DateValue | null) => void;\n  isDisabled?: boolean;\n  shouldCloseOnSelect?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n} & WithLabelsProps &\n  DateValidationProps &\n  Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n  className,\n  style,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  isDisabled,\n  shouldCloseOnSelect = true,\n  rootElementRef,\n  maxValue,\n  minValue,\n  disabledRanges,\n  disallowWeekends,\n  ...withLabelProps\n}: DatePickerProps) => {\n  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n  const resetToValue = useRef(value);\n\n  const rangeRef = useRef<HTMLDivElement | null>(null);\n  const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeDropdown = () => {\n    setShouldShowDropdown(false);\n    openDropdownRef.current?.focus();\n  };\n\n  const onSelectDate = (date: DateValue | null) => {\n    onChange(date);\n\n    if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n    setTimeout(closeDropdown, 0); // Calendar state must update first.\n  };\n\n  const validationProps = {\n    maxValue,\n    minValue,\n    disabledRanges,\n    disallowWeekends,\n  } as DateValidationProps;\n\n  const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n  const isSelectedDateInvalid = useMemo(\n    () => (value ? isDateUnavailable(value) : false),\n    [isDateUnavailable, value],\n  );\n\n  const error =\n    withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n  return (\n    <>\n      <DateInputField\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        startValue={value}\n        rightActionRef={openDropdownRef}\n        rightAction={{\n          iconSlot: <CalendarIcon />,\n          'aria-label': 'Open Calendar',\n          onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n          disabled: isDisabled,\n          'aria-controls': 'data-picker-dropdown',\n          'aria-haspopup': true,\n          'aria-expanded': shouldShowDropdown,\n        }}\n        onChange={onSelectDate}\n        rangeRef={rangeRef}\n        className={className}\n        style={style}\n        {...withLabelProps}\n        {...validationProps}\n        error={error}\n      />\n\n      {shouldShowDropdown && (\n        <Popover\n          id=\"date-picker-dropdown\"\n          style={{ marginTop: sizes.sm }}\n          anchorElement={rangeRef.current}\n          onShouldClose={closeDropdown}\n          placement=\"bottom-start\"\n          ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n          rootElementRef={rootElementRef}\n        >\n          <Card.Surface style={{ padding: sizes.base }}>\n            <Calendar\n              value={value}\n              onChange={onSelectDate}\n              aria-label={`${ariaLabel} Calendar`}\n              isDisabled={isDisabled}\n              {...validationProps}\n            />\n            <DatePickerFooter>\n              <Button\n                type=\"button\"\n                variant=\"flat\"\n                onClick={() => onSelectDate(resetToValue.current)}\n                size=\"sm\"\n                disabled={isDisabled}\n              >\n                Reset\n              </Button>\n            </DatePickerFooter>\n          </Card.Surface>\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["useState","useRef","useIsDateUnavailable","useMemo","React","DateInputField","CalendarIcon","Popover","sizes","Card","Calendar","DatePickerFooter","Button"],"mappings":"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"}
+{"version":3,"file":"DatePicker.cjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons/CalendarIcon';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Button } from '../Button';\nimport { DatePickerFooter } from './styled';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n  value: DateValue | null;\n  'aria-label': string;\n  onChange: (date: DateValue | null) => void;\n  isDisabled?: boolean;\n  shouldCloseOnSelect?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n} & WithLabelsProps &\n  DateValidationProps &\n  Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n  className,\n  style,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  isDisabled,\n  shouldCloseOnSelect = true,\n  rootElementRef,\n  maxValue,\n  minValue,\n  disabledRanges,\n  disallowWeekends,\n  ...withLabelProps\n}: DatePickerProps) => {\n  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n  const resetToValue = useRef(value);\n\n  const rangeRef = useRef<HTMLDivElement | null>(null);\n  const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeDropdown = () => {\n    setShouldShowDropdown(false);\n    openDropdownRef.current?.focus();\n  };\n\n  const onSelectDate = (date: DateValue | null) => {\n    onChange(date);\n\n    if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n    setTimeout(closeDropdown, 0); // Calendar state must update first.\n  };\n\n  const validationProps = {\n    maxValue,\n    minValue,\n    disabledRanges,\n    disallowWeekends,\n  } as DateValidationProps;\n\n  const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n  const isSelectedDateInvalid = useMemo(\n    () => (value ? isDateUnavailable(value) : false),\n    [isDateUnavailable, value],\n  );\n\n  const error =\n    withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n  return (\n    <>\n      <DateInputField\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        startValue={value}\n        rightActionRef={openDropdownRef}\n        rightAction={{\n          iconSlot: <CalendarIcon />,\n          'aria-label': 'Open Calendar',\n          onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n          disabled: isDisabled,\n          'aria-controls': 'data-picker-dropdown',\n          'aria-haspopup': true,\n          'aria-expanded': shouldShowDropdown,\n        }}\n        onChange={onSelectDate}\n        rangeRef={rangeRef}\n        className={className}\n        style={style}\n        {...withLabelProps}\n        {...validationProps}\n        error={error}\n      />\n\n      {shouldShowDropdown && (\n        <Popover\n          id=\"date-picker-dropdown\"\n          style={{ marginTop: sizes.sm }}\n          anchorElement={rangeRef.current}\n          onShouldClose={closeDropdown}\n          placement=\"bottom-start\"\n          ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n          rootElementRef={rootElementRef}\n        >\n          <Card.Surface style={{ padding: sizes.base }}>\n            <Calendar\n              value={value}\n              onChange={onSelectDate}\n              aria-label={`${ariaLabel} Calendar`}\n              isDisabled={isDisabled}\n              {...validationProps}\n            />\n            <DatePickerFooter>\n              <Button\n                type=\"button\"\n                variant=\"flat\"\n                onClick={() => onSelectDate(resetToValue.current)}\n                size=\"sm\"\n                disabled={isDisabled}\n              >\n                Reset\n              </Button>\n            </DatePickerFooter>\n          </Card.Surface>\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["useState","useRef","useIsDateUnavailable","useMemo","React","DateInputField","CalendarIcon","Popover","sizes","Card","Calendar","DatePickerFooter","Button"],"mappings":"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"}

package/dist/components/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
 import React__default, { useState, useRef, useMemo } from 'react';
 import { sizes } from '../../theme/modules/sizes.js';
-import { CalendarIcon } from '../../tempIcons/CalendarIcon.js';
+import { CalendarIcon } from '../../icons/CalendarIcon.js';
 import { DateInputField } from '../DateInputField/index.js';
 import { Popover } from '../Popover/Popover.js';
 import { Card } from '../Card/Card.js';

package/dist/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../tempIcons/CalendarIcon';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Button } from '../Button';\nimport { DatePickerFooter } from './styled';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n  value: DateValue | null;\n  'aria-label': string;\n  onChange: (date: DateValue | null) => void;\n  isDisabled?: boolean;\n  shouldCloseOnSelect?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n} & WithLabelsProps &\n  DateValidationProps &\n  Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n  className,\n  style,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  isDisabled,\n  shouldCloseOnSelect = true,\n  rootElementRef,\n  maxValue,\n  minValue,\n  disabledRanges,\n  disallowWeekends,\n  ...withLabelProps\n}: DatePickerProps) => {\n  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n  const resetToValue = useRef(value);\n\n  const rangeRef = useRef<HTMLDivElement | null>(null);\n  const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeDropdown = () => {\n    setShouldShowDropdown(false);\n    openDropdownRef.current?.focus();\n  };\n\n  const onSelectDate = (date: DateValue | null) => {\n    onChange(date);\n\n    if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n    setTimeout(closeDropdown, 0); // Calendar state must update first.\n  };\n\n  const validationProps = {\n    maxValue,\n    minValue,\n    disabledRanges,\n    disallowWeekends,\n  } as DateValidationProps;\n\n  const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n  const isSelectedDateInvalid = useMemo(\n    () => (value ? isDateUnavailable(value) : false),\n    [isDateUnavailable, value],\n  );\n\n  const error =\n    withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n  return (\n    <>\n      <DateInputField\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        startValue={value}\n        rightActionRef={openDropdownRef}\n        rightAction={{\n          iconSlot: <CalendarIcon />,\n          'aria-label': 'Open Calendar',\n          onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n          disabled: isDisabled,\n          'aria-controls': 'data-picker-dropdown',\n          'aria-haspopup': true,\n          'aria-expanded': shouldShowDropdown,\n        }}\n        onChange={onSelectDate}\n        rangeRef={rangeRef}\n        className={className}\n        style={style}\n        {...withLabelProps}\n        {...validationProps}\n        error={error}\n      />\n\n      {shouldShowDropdown && (\n        <Popover\n          id=\"date-picker-dropdown\"\n          style={{ marginTop: sizes.sm }}\n          anchorElement={rangeRef.current}\n          onShouldClose={closeDropdown}\n          placement=\"bottom-start\"\n          ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n          rootElementRef={rootElementRef}\n        >\n          <Card.Surface style={{ padding: sizes.base }}>\n            <Calendar\n              value={value}\n              onChange={onSelectDate}\n              aria-label={`${ariaLabel} Calendar`}\n              isDisabled={isDisabled}\n              {...validationProps}\n            />\n            <DatePickerFooter>\n              <Button\n                type=\"button\"\n                variant=\"flat\"\n                onClick={() => onSelectDate(resetToValue.current)}\n                size=\"sm\"\n                disabled={isDisabled}\n              >\n                Reset\n              </Button>\n            </DatePickerFooter>\n          </Card.Surface>\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { DateValue } from 'react-aria-components';\nimport { sizes } from 'Theme/modules/sizes';\nimport { WithLabelsProps } from '../../hoc/withLabels/withLabels';\nimport { CalendarIcon } from '../../icons/CalendarIcon';\nimport { DateInputField } from '../DateInputField';\nimport { Popover } from '../Popover';\nimport { Card } from '../Card';\nimport { Calendar } from '../Calendars';\nimport { Button } from '../Button';\nimport { DatePickerFooter } from './styled';\nimport { PopoverProps } from '../Popover/types';\nimport { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable';\nimport { DateValidationProps } from '../DateInputField/types';\n\ntype DatePickerProps = {\n  value: DateValue | null;\n  'aria-label': string;\n  onChange: (date: DateValue | null) => void;\n  isDisabled?: boolean;\n  shouldCloseOnSelect?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n} & WithLabelsProps &\n  DateValidationProps &\n  Pick<PopoverProps, 'rootElementRef'>;\n\nexport const DatePicker = ({\n  className,\n  style,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  isDisabled,\n  shouldCloseOnSelect = true,\n  rootElementRef,\n  maxValue,\n  minValue,\n  disabledRanges,\n  disallowWeekends,\n  ...withLabelProps\n}: DatePickerProps) => {\n  const [shouldShowDropdown, setShouldShowDropdown] = useState(false);\n  const resetToValue = useRef(value);\n\n  const rangeRef = useRef<HTMLDivElement | null>(null);\n  const openDropdownRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeDropdown = () => {\n    setShouldShowDropdown(false);\n    openDropdownRef.current?.focus();\n  };\n\n  const onSelectDate = (date: DateValue | null) => {\n    onChange(date);\n\n    if (!shouldCloseOnSelect || !shouldShowDropdown) return;\n    setTimeout(closeDropdown, 0); // Calendar state must update first.\n  };\n\n  const validationProps = {\n    maxValue,\n    minValue,\n    disabledRanges,\n    disallowWeekends,\n  } as DateValidationProps;\n\n  const { isDateUnavailable } = useIsDateUnavailable(validationProps);\n  const isSelectedDateInvalid = useMemo(\n    () => (value ? isDateUnavailable(value) : false),\n    [isDateUnavailable, value],\n  );\n\n  const error =\n    withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);\n\n  return (\n    <>\n      <DateInputField\n        disabled={isDisabled}\n        aria-label={ariaLabel}\n        startValue={value}\n        rightActionRef={openDropdownRef}\n        rightAction={{\n          iconSlot: <CalendarIcon />,\n          'aria-label': 'Open Calendar',\n          onClick: () => setShouldShowDropdown(!shouldShowDropdown),\n          disabled: isDisabled,\n          'aria-controls': 'data-picker-dropdown',\n          'aria-haspopup': true,\n          'aria-expanded': shouldShowDropdown,\n        }}\n        onChange={onSelectDate}\n        rangeRef={rangeRef}\n        className={className}\n        style={style}\n        {...withLabelProps}\n        {...validationProps}\n        error={error}\n      />\n\n      {shouldShowDropdown && (\n        <Popover\n          id=\"date-picker-dropdown\"\n          style={{ marginTop: sizes.sm }}\n          anchorElement={rangeRef.current}\n          onShouldClose={closeDropdown}\n          placement=\"bottom-start\"\n          ignoreAriaWarnings // We want to anchor to input, but be powered by right action.\n          rootElementRef={rootElementRef}\n        >\n          <Card.Surface style={{ padding: sizes.base }}>\n            <Calendar\n              value={value}\n              onChange={onSelectDate}\n              aria-label={`${ariaLabel} Calendar`}\n              isDisabled={isDisabled}\n              {...validationProps}\n            />\n            <DatePickerFooter>\n              <Button\n                type=\"button\"\n                variant=\"flat\"\n                onClick={() => onSelectDate(resetToValue.current)}\n                size=\"sm\"\n                disabled={isDisabled}\n              >\n                Reset\n              </Button>\n            </DatePickerFooter>\n          </Card.Surface>\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DimensionsInput/DimensionsInput.cjs

@@ -2,15 +2,13 @@
 
 var React = require('react');
 var withLabels = require('../../hoc/withLabels/withLabels.cjs');
-var index = require('../../theme/index.cjs');
 var invalidCharactersNumeric = require('../../utils/invalidCharactersNumeric.cjs');
 var blockInvalidCharacters = require('../../utils/blockInvalidCharacters.cjs');
-var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
 var InputAffix = require('../InputAffix/InputAffix.cjs');
-var index$2 = require('../TextField/index.cjs');
+var index$1 = require('../TextField/index.cjs');
 var Stack = require('../Stack/Stack.cjs');
 require('../Stack/types.cjs');
-var index$1 = require('../InputGroup/index.cjs');
+var index = require('../InputGroup/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -43,27 +41,23 @@ const DimensionsInput = withLabels.withLabels(({ size = 'base', handleChangeHeig
             style: styles.textField,
             ...rest,
         },
-        crossIcon: {
-            height: index.theme.sizes.base,
-            width: index.theme.sizes.base,
-            role: 'presentation',
-        },
         inputAffix: {
             compact,
             hasError,
         },
     };
-    return (React__default.default.createElement(Stack.Stack, { spacing: "sm", direction: "horizontal", alignY: "center", className: className },
-        React__default.default.createElement(index$1.InputGroup, { ...childProps.inputGroup },
-            React__default.default.createElement(index$2.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "L" }),
+    return (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", className: className },
+        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+            React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "L"),
+            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "length-unit", ...childProps.inputAffix }, unit)),
-        React__default.default.createElement(CrossIcon.CrossIcon, { ...childProps.crossIcon }),
-        React__default.default.createElement(index$1.InputGroup, { ...childProps.inputGroup },
-            React__default.default.createElement(index$2.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "W" }),
+        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+            React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "W"),
+            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "width-unit", ...childProps.inputAffix }, unit)),
-        React__default.default.createElement(CrossIcon.CrossIcon, { ...childProps.crossIcon }),
-        React__default.default.createElement(index$1.InputGroup, { ...childProps.inputGroup },
-            React__default.default.createElement(index$2.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "H" }),
+        React__default.default.createElement(index.InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+            React__default.default.createElement(InputAffix.InputAffix, { ...childProps.inputAffix }, "H"),
+            React__default.default.createElement(index$1.TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "0" }),
             React__default.default.createElement(InputAffix.InputAffix, { id: "height-unit", ...childProps.inputAffix }, unit))));
 });
 DimensionsInput.displayName = 'DimensionsInput';

package/dist/components/DimensionsInput/DimensionsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { theme } from '../../theme';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  crossIcon: any;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      crossIcon: {\n        height: theme.sizes.base,\n        width: theme.sizes.base,\n        role: 'presentation',\n      },\n      inputAffix: {\n        compact,\n        hasError,\n      },\n    };\n\n    return (\n      <Stack spacing=\"sm\" direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"L\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <CrossIcon {...childProps.crossIcon} />\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"W\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <CrossIcon {...childProps.crossIcon} />\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"H\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","theme","React","Stack","InputGroup","TextField","InputAffix","CrossIcon"],"mappings":"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"}
+{"version":3,"file":"DimensionsInput.cjs","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n        hasError,\n      },\n    };\n\n    return (\n      <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["blockInvalidCharacters","invalidCharsList","withLabels","React","Stack","InputGroup","InputAffix","TextField"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,iBAAiB,GAAG,CAAC,CAAsB,KAAKA,6CAAsB,CAAC,CAAC,EAAEC,yCAAgB,CAAC;AAEjG,MAAM,MAAM,GAAG;AACb,IAAA,UAAU,EAAE;AACV,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;CACF;AAEY,MAAA,eAAe,GAAGC,qBAAU,CACvC,CAAC,EACC,IAAI,GAAG,MAAM,EACb,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI;AAE7B,IAAA,MAAM,UAAU,GAAwB;AACtC,QAAA,UAAU,EAAE;YACV,QAAQ;YACR,OAAO;YACP,KAAK,EAAE,MAAM,CAAC,UAAU;AACzB,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,GAAG,EAAE,GAAG;AACR,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,SAAS,EAAE,iBAAiB;YAC5B,IAAI;YACJ,QAAQ;YACR,KAAK,EAAE,MAAM,CAAC,SAAS;AACvB,YAAA,GAAG,IAAI;AACR,SAAA;AACD,QAAA,UAAU,EAAE;YACV,OAAO;YACP,QAAQ;AACT,SAAA;KACF;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS,EAAA;AAChE,QAAAD,sBAAA,CAAA,aAAA,CAACE,gBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA;AACvD,YAAAF,sBAAA,CAAA,aAAA,CAACG,qBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAgB,EAAA,GAAA,CAAA;YACrDH,sBAAC,CAAA,aAAA,CAAAI,iBAAS,EACJ,EAAA,GAAA,UAAU,CAAC,SAAS,EACxB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,EACF,kBAAA,EAAA,aAAa,EAC9B,QAAQ,EAAE,kBAAkB,EAC5B,WAAW,EAAC,GAAG,EACf,CAAA;AACF,YAAAJ,sBAAA,CAAA,aAAA,CAACG,qBAAU,EAAA,EAAC,EAAE,EAAC,aAAa,EAAA,GAAK,UAAU,CAAC,UAAU,EAAA,EACnD,IAAI,CACM,CACF;AACb,QAAAH,sBAAA,CAAA,aAAA,CAACE,gBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA;AACvD,YAAAF,sBAAA,CAAA,aAAA,CAACG,qBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAgB,EAAA,GAAA,CAAA;YACrDH,sBAAC,CAAA,aAAA,CAAAI,iBAAS,EACJ,EAAA,GAAA,UAAU,CAAC,SAAS,EACxB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACD,YAAA,EAAA,OAAO,EACD,kBAAA,EAAA,YAAY,EAC7B,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EAAC,GAAG,EACf,CAAA;AACF,YAAAJ,sBAAA,CAAA,aAAA,CAACG,qBAAU,EAAA,EAAC,EAAE,EAAC,YAAY,EAAA,GAAK,UAAU,CAAC,UAAU,EAAA,EAClD,IAAI,CACM,CACF;AACb,QAAAH,sBAAA,CAAA,aAAA,CAACE,gBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA;AACvD,YAAAF,sBAAA,CAAA,aAAA,CAACG,qBAAU,EAAA,EAAA,GAAK,UAAU,CAAC,UAAU,EAAgB,EAAA,GAAA,CAAA;YACrDH,sBAAC,CAAA,aAAA,CAAAI,iBAAS,EACJ,EAAA,GAAA,UAAU,CAAC,SAAS,EACxB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACF,YAAA,EAAA,QAAQ,EACF,kBAAA,EAAA,aAAa,EAC9B,QAAQ,EAAE,kBAAkB,EAC5B,WAAW,EAAC,GAAG,EACf,CAAA;AACF,YAAAJ,sBAAA,CAAA,aAAA,CAACG,qBAAU,EAAA,EAAC,EAAE,EAAC,aAAa,EAAK,GAAA,UAAU,CAAC,UAAU,IACnD,IAAI,CACM,CACF,CACP;AAEZ,CAAC;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/DimensionsInput/DimensionsInput.d.ts

@@ -298,7 +298,7 @@ export declare const DimensionsInput: React.FC<{
     type?: import("../TextField").TextFieldType | undefined;
     onChange?: ((value: string) => void) | undefined;
     hasError?: boolean | undefined;
-    size?: import("../types").ComponentSize | undefined;
+    size?: "base" | "sm" | undefined;
     multiline?: boolean | undefined;
 } & {
     handleChangeHeight: (value: string) => void;

package/dist/components/DimensionsInput/DimensionsInput.js

@@ -1,9 +1,7 @@
 import React__default from 'react';
 import { withLabels } from '../../hoc/withLabels/withLabels.js';
-import { theme } from '../../theme/index.js';
 import { invalidCharsList } from '../../utils/invalidCharactersNumeric.js';
 import { blockInvalidCharacters } from '../../utils/blockInvalidCharacters.js';
-import { CrossIcon } from '../../tempIcons/CrossIcon.js';
 import { InputAffix } from '../InputAffix/InputAffix.js';
 import { TextField } from '../TextField/index.js';
 import { Stack } from '../Stack/Stack.js';
@@ -37,27 +35,23 @@ const DimensionsInput = withLabels(({ size = 'base', handleChangeHeight, handleC
             style: styles.textField,
             ...rest,
         },
-        crossIcon: {
-            height: theme.sizes.base,
-            width: theme.sizes.base,
-            role: 'presentation',
-        },
         inputAffix: {
             compact,
             hasError,
         },
     };
-    return (React__default.createElement(Stack, { spacing: "sm", direction: "horizontal", alignY: "center", className: className },
-        React__default.createElement(InputGroup, { ...childProps.inputGroup },
-            React__default.createElement(TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "L" }),
+    return (React__default.createElement(Stack, { direction: "horizontal", alignY: "center", className: className },
+        React__default.createElement(InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+            React__default.createElement(InputAffix, { ...childProps.inputAffix }, "L"),
+            React__default.createElement(TextField, { ...childProps.textField, name: "length", value: length, "aria-label": "Length", "aria-describedby": "length-unit", onChange: handleChangeLength, placeholder: "0" }),
             React__default.createElement(InputAffix, { id: "length-unit", ...childProps.inputAffix }, unit)),
-        React__default.createElement(CrossIcon, { ...childProps.crossIcon }),
-        React__default.createElement(InputGroup, { ...childProps.inputGroup },
-            React__default.createElement(TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "W" }),
+        React__default.createElement(InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+            React__default.createElement(InputAffix, { ...childProps.inputAffix }, "W"),
+            React__default.createElement(TextField, { ...childProps.textField, name: "width", value: width, "aria-label": "Width", "aria-describedby": "width-unit", onChange: handleChangeWidth, placeholder: "0" }),
             React__default.createElement(InputAffix, { id: "width-unit", ...childProps.inputAffix }, unit)),
-        React__default.createElement(CrossIcon, { ...childProps.crossIcon }),
-        React__default.createElement(InputGroup, { ...childProps.inputGroup },
-            React__default.createElement(TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "H" }),
+        React__default.createElement(InputGroup, { ...childProps.inputGroup, style: { flex: 1 } },
+            React__default.createElement(InputAffix, { ...childProps.inputAffix }, "H"),
+            React__default.createElement(TextField, { ...childProps.textField, name: "height", value: height, "aria-label": "Height", "aria-describedby": "height-unit", onChange: handleChangeHeight, placeholder: "0" }),
             React__default.createElement(InputAffix, { id: "height-unit", ...childProps.inputAffix }, unit))));
 });
 DimensionsInput.displayName = 'DimensionsInput';

package/dist/components/DimensionsInput/DimensionsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { theme } from '../../theme';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  crossIcon: any;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      crossIcon: {\n        height: theme.sizes.base,\n        width: theme.sizes.base,\n        role: 'presentation',\n      },\n      inputAffix: {\n        compact,\n        hasError,\n      },\n    };\n\n    return (\n      <Stack spacing=\"sm\" direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"L\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <CrossIcon {...childProps.crossIcon} />\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"W\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <CrossIcon {...childProps.crossIcon} />\n        <InputGroup {...childProps.inputGroup}>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"H\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DimensionsInput.js","sources":["../../../src/components/DimensionsInput/DimensionsInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withLabels } from '../../hoc';\nimport { invalidCharsList } from '../../utils/invalidCharactersNumeric';\nimport { blockInvalidCharacters } from '../../utils/blockInvalidCharacters';\n\nimport { InputAffix, InputAffixProps } from '../InputAffix';\nimport { TextField, TextFieldProps } from '../TextField';\nimport { Stack } from '../Stack';\nimport { InputGroup, InputGroupProps } from '../InputGroup';\n\nimport { DimensionsProps } from './types';\n\ntype ChildComponentProps = {\n  inputGroup: Partial<InputGroupProps>;\n  textField: Partial<TextFieldProps>;\n  inputAffix: Partial<InputAffixProps>;\n};\n\nconst blockInvalidChars = (e: React.KeyboardEvent) => blockInvalidCharacters(e, invalidCharsList);\n\nconst styles = {\n  inputGroup: {\n    flex: 1,\n  },\n  textField: {\n    flex: 1,\n  },\n};\n\nexport const DimensionsInput = withLabels<DimensionsProps>(\n  ({\n    size = 'base',\n    handleChangeHeight,\n    handleChangeWidth,\n    handleChangeLength,\n    className,\n    height,\n    width,\n    length,\n    unit = 'cm',\n    hasError,\n    ...rest\n  }) => {\n    const compact = size === 'sm';\n\n    const childProps: ChildComponentProps = {\n      inputGroup: {\n        hasError,\n        compact,\n        style: styles.inputGroup,\n      },\n      textField: {\n        type: 'number',\n        min: '0',\n        step: 'any',\n        onKeyDown: blockInvalidChars,\n        size,\n        hasError,\n        style: styles.textField,\n        ...rest,\n      },\n      inputAffix: {\n        compact,\n        hasError,\n      },\n    };\n\n    return (\n      <Stack direction=\"horizontal\" alignY=\"center\" className={className}>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>L</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"length\"\n            value={length}\n            aria-label=\"Length\"\n            aria-describedby=\"length-unit\"\n            onChange={handleChangeLength}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"length-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>W</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"width\"\n            value={width}\n            aria-label=\"Width\"\n            aria-describedby=\"width-unit\"\n            onChange={handleChangeWidth}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"width-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n        <InputGroup {...childProps.inputGroup} style={{ flex: 1 }}>\n          <InputAffix {...childProps.inputAffix}>H</InputAffix>\n          <TextField\n            {...childProps.textField}\n            name=\"height\"\n            value={height}\n            aria-label=\"Height\"\n            aria-describedby=\"height-unit\"\n            onChange={handleChangeHeight}\n            placeholder=\"0\"\n          />\n          <InputAffix id=\"height-unit\" {...childProps.inputAffix}>\n            {unit}\n          </InputAffix>\n        </InputGroup>\n      </Stack>\n    );\n  },\n);\n\nDimensionsInput.displayName = 'DimensionsInput';\n"],"names":["React"],"mappings":"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"}

package/dist/components/FilterTag/styled.cjs

@@ -7,8 +7,8 @@ var Text = require('../Text/Text.cjs');
 require('react');
 require('react-transition-group');
 require('../AnimatedDropdown/styled.cjs');
-var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
-var DownArrowIcon = require('../../tempIcons/DownArrowIcon.cjs');
+var CrossIcon = require('../../icons/CrossIcon.cjs');
+var DownArrowIcon = require('../../icons/DownArrowIcon.cjs');
 var sizes = require('../../theme/modules/sizes.cjs');
 var index = require('../../theme/index.cjs');
 

package/dist/components/FilterTag/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { DownArrowIcon } from '../../tempIcons/DownArrowIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":["styled","BaseContainer","colors","sizes","theme","Text","DownArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAYM,MAAA,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjCC,WAAK,CAAC,IAAI,CACT,QAAA,EAAAA,WAAK,CAAC,IAAI,+CAKIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAGJ,uBAAM,CAACK,SAAI,CAAC,uGAErC;AAED,MAAM,UAAU,GAAGL,uBAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAGA,uBAAM,CAACM,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAGN,uBAAM,CAACO,mBAAS,CAAC;AAMzC,MAAM,OAAO,GAAGP,uBAAM,CAACC,2BAAa,CAAC;AAOrC,MAAM,MAAM,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMPC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpBC,WAAK,CAAC,CAAC,CAAC,WACPA,WAAK,CAAC,CAAC,CAAC;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { DownArrowIcon } from '../../icons/DownArrowIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":["styled","BaseContainer","colors","sizes","theme","Text","DownArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAYM,MAAA,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAAC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxBA,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjCC,WAAK,CAAC,IAAI,CACT,QAAA,EAAAA,WAAK,CAAC,IAAI,+CAKIC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAGJ,uBAAM,CAACK,SAAI,CAAC,uGAErC;AAED,MAAM,UAAU,GAAGL,uBAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAGA,uBAAM,CAACM,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAGN,uBAAM,CAACO,mBAAS,CAAC;AAMzC,MAAM,OAAO,GAAGP,uBAAM,CAACC,2BAAa,CAAC;AAOrC,MAAM,MAAM,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMPC,aAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpBC,WAAK,CAAC,CAAC,CAAC,WACPA,WAAK,CAAC,CAAC,CAAC;;;;;;;;;;"}

package/dist/components/FilterTag/styled.js

@@ -5,8 +5,8 @@ import { Text } from '../Text/Text.js';
 import 'react';
 import 'react-transition-group';
 import '../AnimatedDropdown/styled.js';
-import { CrossIcon } from '../../tempIcons/CrossIcon.js';
-import { DownArrowIcon } from '../../tempIcons/DownArrowIcon.js';
+import { CrossIcon } from '../../icons/CrossIcon.js';
+import { DownArrowIcon } from '../../icons/DownArrowIcon.js';
 import { sizes } from '../../theme/modules/sizes.js';
 import { theme } from '../../theme/index.js';
 

package/dist/components/FilterTag/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { DownArrowIcon } from '../../tempIcons/DownArrowIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAYM,MAAA,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjC,KAAK,CAAC,IAAI,CACT,QAAA,EAAA,KAAK,CAAC,IAAI,+CAKI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,uGAErC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAMzC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;AAOrC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpB,KAAK,CAAC,CAAC,CAAC,WACP,KAAK,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/FilterTag/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { colors } from '../../theme/modules/colors';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { AnimatedDropdown } from '../AnimatedDropdown';\nimport { CrossIcon } from '../../icons/CrossIcon';\nimport { DownArrowIcon } from '../../icons/DownArrowIcon';\nimport { sizes } from '../../theme/modules/sizes';\nimport { theme } from '../../theme';\n\nconst Container = styled(BaseContainer).attrs({\n  as: 'button',\n})`\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${colors.neutral.grey.base};\n  padding: 4px 8px;\n  cursor: pointer;\n\n  border: 1px solid ${colors.neutral.grey.dark};\n  border-radius: 4px;\n\n  svg {\n    width: ${sizes.base};\n    height: ${sizes.base};\n  }\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst NonSelectableText = styled(Text)`\n  user-select: none;\n`;\n\nconst GroupLabel = styled(NonSelectableText)`\n  margin-right: 4px;\n`;\n\nconst MainIcon = styled(DownArrowIcon)<{ $shouldShow?: boolean }>`\n  margin-left: 4px;\n  transform: rotate(${(props) => (props.$shouldShow ? '180deg' : '0')});\n\n  width: 10px;\n  height: 10px;\n`;\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  margin-left: 4px;\n  height: 10px;\n  width: 10px;\n`;\n\nconst Content = styled(BaseContainer)`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n`;\n\nconst Header = styled(BaseContainer)<{ color: string }>`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 12px 18px;\n  border-bottom: 1px solid ${colors.neutral.grey.base};\n\n  svg {\n    color: ${({ color }) => color};\n    width: ${sizes[5]};\n    height: ${sizes[5]};\n    margin-right: 10px;\n  }\n`;\n\nexport {\n  Container,\n  Text,\n  AnimatedDropdown as Dropdown,\n  GroupLabel,\n  Content,\n  Header,\n  MainIcon,\n  StyledCrossIcon as CrossIcon,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAYM,MAAA,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,EAAE,EAAE,QAAQ;AACb,CAAA,CAAC,CAIoB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2EAAA,EAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iDAAA,EAIxB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,6BAAA,EAIjC,KAAK,CAAC,IAAI,CACT,QAAA,EAAA,KAAK,CAAC,IAAI,+CAKI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,uGAErC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAItC,MAAA,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA,EAEhB,CAAC,KAAK,MAAM,KAAK,CAAC,WAAW,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAA,yBAAA;AAMrE,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC;AAMzC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC;AAOrC,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAMP,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,cAGxC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,UACpB,KAAK,CAAC,CAAC,CAAC,WACP,KAAK,CAAC,CAAC,CAAC;;;;"}

package/dist/components/Flex/Flex.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._alignItems-flex-start_1jyn9_1 {\n  align-items: flex-start;\n}\n\n._alignItems-flex-end_1jyn9_5 {\n  align-items: flex-end;\n}\n\n._alignItems-center_1jyn9_9 {\n  align-items: center;\n}\n\n._alignItems-stretch_1jyn9_13 {\n  align-items: stretch;\n}\n\n._alignItems-baseline_1jyn9_17 {\n  align-items: baseline;\n}\n\n._justifyContent-flex-start_1jyn9_21 {\n  justify-content: flex-start;\n}\n\n._justifyContent-flex-end_1jyn9_25 {\n  justify-content: flex-end;\n}\n\n._justifyContent-center_1jyn9_29 {\n  justify-content: center;\n}\n\n._justifyContent-space-between_1jyn9_33 {\n  justify-content: space-between;\n}\n\n._justifyContent-space-around_1jyn9_37 {\n  justify-content: space-around;\n}\n\n._justifyContent-space-evenly_1jyn9_41 {\n  justify-content: space-evenly;\n}\n\n._flexWrap-nowrap_1jyn9_45 {\n  flex-wrap: nowrap;\n}\n\n._flexWrap-wrap_1jyn9_49 {\n  flex-wrap: wrap;\n}\n\n._flexWrap-wrap-reverse_1jyn9_53 {\n  flex-wrap: wrap-reverse;\n}\n\n._gap-none_1jyn9_57 {\n  gap: var(--sizes-none);\n}\n\n._gap-line_1jyn9_61 {\n  gap: var(--sizes-line);\n}\n\n._gap-xs_1jyn9_65 {\n  gap: var(--sizes-xs);\n}\n\n._gap-sm_1jyn9_69 {\n  gap: var(--sizes-sm);\n}\n\n._gap-base_1jyn9_73 {\n  gap: var(--sizes-base);\n}\n\n._gap-md_1jyn9_77 {\n  gap: var(--sizes-md);\n}\n\n._gap-lg_1jyn9_81 {\n  gap: var(--sizes-lg);\n}\n\n._gap-xl_1jyn9_85 {\n  gap: var(--sizes-xl);\n}\n\n._gap-xxl_1jyn9_89 {\n  gap: var(--sizes-xxl);\n}\n\n._gap-0_1jyn9_93 {\n  gap: var(--sizes-0);\n}\n\n._gap-1_1jyn9_97 {\n  gap: var(--sizes-1);\n}\n\n._gap-2_1jyn9_101 {\n  gap: var(--sizes-2);\n}\n\n._gap-3_1jyn9_105 {\n  gap: var(--sizes-3);\n}\n\n._gap-4_1jyn9_109 {\n  gap: var(--sizes-4);\n}\n\n._gap-5_1jyn9_113 {\n  gap: var(--sizes-5);\n}\n\n._gap-6_1jyn9_117 {\n  gap: var(--sizes-6);\n}\n\n._gap-7_1jyn9_121 {\n  gap: var(--sizes-7);\n}\n\n._gap-8_1jyn9_125 {\n  gap: var(--sizes-8);\n}\n\n._gap-9_1jyn9_129 {\n  gap: var(--sizes-9);\n}\n\n._gap-10_1jyn9_133 {\n  gap: var(--sizes-10);\n}\n\n._gap-11_1jyn9_137 {\n  gap: var(--sizes-11);\n}\n\n._gap-12_1jyn9_141 {\n  gap: var(--sizes-12);\n}\n\n._gap-13_1jyn9_145 {\n  gap: var(--sizes-13);\n}\n\n._gap-14_1jyn9_149 {\n  gap: var(--sizes-14);\n}\n\n._gap-15_1jyn9_153 {\n  gap: var(--sizes-15);\n}\n\n._gap-16_1jyn9_157 {\n  gap: var(--sizes-16);\n}\n\n._gap-17_1jyn9_161 {\n  gap: var(--sizes-17);\n}\n\n._gap-18_1jyn9_165 {\n  gap: var(--sizes-18);\n}\n\n._gap-19_1jyn9_169 {\n  gap: var(--sizes-19);\n}\n\n._gap-20_1jyn9_173 {\n  gap: var(--sizes-20);\n}");
+var flexStyles = {"alignItems-flex-start":"_alignItems-flex-start_1jyn9_1","alignItems-flex-end":"_alignItems-flex-end_1jyn9_5","alignItems-center":"_alignItems-center_1jyn9_9","alignItems-stretch":"_alignItems-stretch_1jyn9_13","alignItems-baseline":"_alignItems-baseline_1jyn9_17","justifyContent-flex-start":"_justifyContent-flex-start_1jyn9_21","justifyContent-flex-end":"_justifyContent-flex-end_1jyn9_25","justifyContent-center":"_justifyContent-center_1jyn9_29","justifyContent-space-between":"_justifyContent-space-between_1jyn9_33","justifyContent-space-around":"_justifyContent-space-around_1jyn9_37","justifyContent-space-evenly":"_justifyContent-space-evenly_1jyn9_41","flexWrap-nowrap":"_flexWrap-nowrap_1jyn9_45","flexWrap-wrap":"_flexWrap-wrap_1jyn9_49","flexWrap-wrap-reverse":"_flexWrap-wrap-reverse_1jyn9_53","gap-none":"_gap-none_1jyn9_57","gap-line":"_gap-line_1jyn9_61","gap-xs":"_gap-xs_1jyn9_65","gap-sm":"_gap-sm_1jyn9_69","gap-base":"_gap-base_1jyn9_73","gap-md":"_gap-md_1jyn9_77","gap-lg":"_gap-lg_1jyn9_81","gap-xl":"_gap-xl_1jyn9_85","gap-xxl":"_gap-xxl_1jyn9_89","gap-0":"_gap-0_1jyn9_93","gap-1":"_gap-1_1jyn9_97","gap-2":"_gap-2_1jyn9_101","gap-3":"_gap-3_1jyn9_105","gap-4":"_gap-4_1jyn9_109","gap-5":"_gap-5_1jyn9_113","gap-6":"_gap-6_1jyn9_117","gap-7":"_gap-7_1jyn9_121","gap-8":"_gap-8_1jyn9_125","gap-9":"_gap-9_1jyn9_129","gap-10":"_gap-10_1jyn9_133","gap-11":"_gap-11_1jyn9_137","gap-12":"_gap-12_1jyn9_141","gap-13":"_gap-13_1jyn9_145","gap-14":"_gap-14_1jyn9_149","gap-15":"_gap-15_1jyn9_153","gap-16":"_gap-16_1jyn9_157","gap-17":"_gap-17_1jyn9_161","gap-18":"_gap-18_1jyn9_165","gap-19":"_gap-19_1jyn9_169","gap-20":"_gap-20_1jyn9_173"};
+
+module.exports = flexStyles;
+//# sourceMappingURL=Flex.module.scss.cjs.map

package/dist/components/Flex/Flex.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/components/Flex/Flex.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._alignItems-flex-start_1jyn9_1 {\n  align-items: flex-start;\n}\n\n._alignItems-flex-end_1jyn9_5 {\n  align-items: flex-end;\n}\n\n._alignItems-center_1jyn9_9 {\n  align-items: center;\n}\n\n._alignItems-stretch_1jyn9_13 {\n  align-items: stretch;\n}\n\n._alignItems-baseline_1jyn9_17 {\n  align-items: baseline;\n}\n\n._justifyContent-flex-start_1jyn9_21 {\n  justify-content: flex-start;\n}\n\n._justifyContent-flex-end_1jyn9_25 {\n  justify-content: flex-end;\n}\n\n._justifyContent-center_1jyn9_29 {\n  justify-content: center;\n}\n\n._justifyContent-space-between_1jyn9_33 {\n  justify-content: space-between;\n}\n\n._justifyContent-space-around_1jyn9_37 {\n  justify-content: space-around;\n}\n\n._justifyContent-space-evenly_1jyn9_41 {\n  justify-content: space-evenly;\n}\n\n._flexWrap-nowrap_1jyn9_45 {\n  flex-wrap: nowrap;\n}\n\n._flexWrap-wrap_1jyn9_49 {\n  flex-wrap: wrap;\n}\n\n._flexWrap-wrap-reverse_1jyn9_53 {\n  flex-wrap: wrap-reverse;\n}\n\n._gap-none_1jyn9_57 {\n  gap: var(--sizes-none);\n}\n\n._gap-line_1jyn9_61 {\n  gap: var(--sizes-line);\n}\n\n._gap-xs_1jyn9_65 {\n  gap: var(--sizes-xs);\n}\n\n._gap-sm_1jyn9_69 {\n  gap: var(--sizes-sm);\n}\n\n._gap-base_1jyn9_73 {\n  gap: var(--sizes-base);\n}\n\n._gap-md_1jyn9_77 {\n  gap: var(--sizes-md);\n}\n\n._gap-lg_1jyn9_81 {\n  gap: var(--sizes-lg);\n}\n\n._gap-xl_1jyn9_85 {\n  gap: var(--sizes-xl);\n}\n\n._gap-xxl_1jyn9_89 {\n  gap: var(--sizes-xxl);\n}\n\n._gap-0_1jyn9_93 {\n  gap: var(--sizes-0);\n}\n\n._gap-1_1jyn9_97 {\n  gap: var(--sizes-1);\n}\n\n._gap-2_1jyn9_101 {\n  gap: var(--sizes-2);\n}\n\n._gap-3_1jyn9_105 {\n  gap: var(--sizes-3);\n}\n\n._gap-4_1jyn9_109 {\n  gap: var(--sizes-4);\n}\n\n._gap-5_1jyn9_113 {\n  gap: var(--sizes-5);\n}\n\n._gap-6_1jyn9_117 {\n  gap: var(--sizes-6);\n}\n\n._gap-7_1jyn9_121 {\n  gap: var(--sizes-7);\n}\n\n._gap-8_1jyn9_125 {\n  gap: var(--sizes-8);\n}\n\n._gap-9_1jyn9_129 {\n  gap: var(--sizes-9);\n}\n\n._gap-10_1jyn9_133 {\n  gap: var(--sizes-10);\n}\n\n._gap-11_1jyn9_137 {\n  gap: var(--sizes-11);\n}\n\n._gap-12_1jyn9_141 {\n  gap: var(--sizes-12);\n}\n\n._gap-13_1jyn9_145 {\n  gap: var(--sizes-13);\n}\n\n._gap-14_1jyn9_149 {\n  gap: var(--sizes-14);\n}\n\n._gap-15_1jyn9_153 {\n  gap: var(--sizes-15);\n}\n\n._gap-16_1jyn9_157 {\n  gap: var(--sizes-16);\n}\n\n._gap-17_1jyn9_161 {\n  gap: var(--sizes-17);\n}\n\n._gap-18_1jyn9_165 {\n  gap: var(--sizes-18);\n}\n\n._gap-19_1jyn9_169 {\n  gap: var(--sizes-19);\n}\n\n._gap-20_1jyn9_173 {\n  gap: var(--sizes-20);\n}");
+var flexStyles = {"alignItems-flex-start":"_alignItems-flex-start_1jyn9_1","alignItems-flex-end":"_alignItems-flex-end_1jyn9_5","alignItems-center":"_alignItems-center_1jyn9_9","alignItems-stretch":"_alignItems-stretch_1jyn9_13","alignItems-baseline":"_alignItems-baseline_1jyn9_17","justifyContent-flex-start":"_justifyContent-flex-start_1jyn9_21","justifyContent-flex-end":"_justifyContent-flex-end_1jyn9_25","justifyContent-center":"_justifyContent-center_1jyn9_29","justifyContent-space-between":"_justifyContent-space-between_1jyn9_33","justifyContent-space-around":"_justifyContent-space-around_1jyn9_37","justifyContent-space-evenly":"_justifyContent-space-evenly_1jyn9_41","flexWrap-nowrap":"_flexWrap-nowrap_1jyn9_45","flexWrap-wrap":"_flexWrap-wrap_1jyn9_49","flexWrap-wrap-reverse":"_flexWrap-wrap-reverse_1jyn9_53","gap-none":"_gap-none_1jyn9_57","gap-line":"_gap-line_1jyn9_61","gap-xs":"_gap-xs_1jyn9_65","gap-sm":"_gap-sm_1jyn9_69","gap-base":"_gap-base_1jyn9_73","gap-md":"_gap-md_1jyn9_77","gap-lg":"_gap-lg_1jyn9_81","gap-xl":"_gap-xl_1jyn9_85","gap-xxl":"_gap-xxl_1jyn9_89","gap-0":"_gap-0_1jyn9_93","gap-1":"_gap-1_1jyn9_97","gap-2":"_gap-2_1jyn9_101","gap-3":"_gap-3_1jyn9_105","gap-4":"_gap-4_1jyn9_109","gap-5":"_gap-5_1jyn9_113","gap-6":"_gap-6_1jyn9_117","gap-7":"_gap-7_1jyn9_121","gap-8":"_gap-8_1jyn9_125","gap-9":"_gap-9_1jyn9_129","gap-10":"_gap-10_1jyn9_133","gap-11":"_gap-11_1jyn9_137","gap-12":"_gap-12_1jyn9_141","gap-13":"_gap-13_1jyn9_145","gap-14":"_gap-14_1jyn9_149","gap-15":"_gap-15_1jyn9_153","gap-16":"_gap-16_1jyn9_157","gap-17":"_gap-17_1jyn9_161","gap-18":"_gap-18_1jyn9_165","gap-19":"_gap-19_1jyn9_169","gap-20":"_gap-20_1jyn9_173"};
+
+export { flexStyles as default };
+//# sourceMappingURL=Flex.module.scss.js.map

package/dist/components/Flex/Flex.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/Flex/FlexCol/FlexCol.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+var FlexCol_module = require('./FlexCol.module.scss.cjs');
+var Flex_module = require('../Flex.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const FLEX_COL_DEFAULT_PROPS = {
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    gap: 'sm',
+    flexWrap: 'wrap',
+};
+const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }) => {
+    const cssClasses = [
+        FlexCol_module.flexCol,
+        Flex_module[`alignItems-${alignItems}`],
+        Flex_module[`justifyContent-${justifyContent}`],
+        Flex_module[`gap-${gap}`],
+        Flex_module[`flexWrap-${flexWrap}`],
+        className,
+    ];
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: style, ...rest }, children));
+};
+
+exports.FLEX_COL_DEFAULT_PROPS = FLEX_COL_DEFAULT_PROPS;
+exports.FlexCol = FlexCol;
+//# sourceMappingURL=FlexCol.cjs.map

package/dist/components/Flex/FlexCol/FlexCol.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexCol.cjs","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'stretch',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n};\n\nexport const FlexCol: React.FC<FlexProps> = ({\n  alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n  justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n  gap = FLEX_COL_DEFAULT_PROPS.gap,\n  flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n  className,\n  style,\n  children,\n  ...rest\n}) => {\n  const cssClasses = [\n    flexColStyles.flexCol,\n    flexStyles[`alignItems-${alignItems}`],\n    flexStyles[`justifyContent-${justifyContent}`],\n    flexStyles[`gap-${gap}`],\n    flexStyles[`flexWrap-${flexWrap}`],\n    className,\n  ];\n\n  return (\n    <div className={buildClassnames(cssClasses)} style={style} {...rest}>\n      {children}\n    </div>\n  );\n};\n"],"names":["flexColStyles","flexStyles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;AAGL,MAAA,OAAO,GAAwB,CAAC,EAC3C,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAA,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;AAED,IAAA,QACEC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,+BAAe,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAM,GAAA,IAAI,IAChE,QAAQ,CACL;AAEV;;;;;"}

package/dist/components/Flex/FlexCol/FlexCol.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FlexDefaultProps, FlexProps } from '../types';
+export declare const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps;
+export declare const FlexCol: React.FC<FlexProps>;

package/dist/components/Flex/FlexCol/FlexCol.js

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import flexColStyles from './FlexCol.module.scss.js';
+import flexStyles from '../Flex.module.scss.js';
+
+const FLEX_COL_DEFAULT_PROPS = {
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+    gap: 'sm',
+    flexWrap: 'wrap',
+};
+const FlexCol = ({ alignItems = FLEX_COL_DEFAULT_PROPS.alignItems, justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent, gap = FLEX_COL_DEFAULT_PROPS.gap, flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }) => {
+    const cssClasses = [
+        flexColStyles.flexCol,
+        flexStyles[`alignItems-${alignItems}`],
+        flexStyles[`justifyContent-${justifyContent}`],
+        flexStyles[`gap-${gap}`],
+        flexStyles[`flexWrap-${flexWrap}`],
+        className,
+    ];
+    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: style, ...rest }, children));
+};
+
+export { FLEX_COL_DEFAULT_PROPS, FlexCol };
+//# sourceMappingURL=FlexCol.js.map

package/dist/components/Flex/FlexCol/FlexCol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexCol.js","sources":["../../../../src/components/Flex/FlexCol/FlexCol.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils/buildClassnames';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexColStyles from './FlexCol.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'stretch',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n};\n\nexport const FlexCol: React.FC<FlexProps> = ({\n  alignItems = FLEX_COL_DEFAULT_PROPS.alignItems,\n  justifyContent = FLEX_COL_DEFAULT_PROPS.justifyContent,\n  gap = FLEX_COL_DEFAULT_PROPS.gap,\n  flexWrap = FLEX_COL_DEFAULT_PROPS.flexWrap,\n  className,\n  style,\n  children,\n  ...rest\n}) => {\n  const cssClasses = [\n    flexColStyles.flexCol,\n    flexStyles[`alignItems-${alignItems}`],\n    flexStyles[`justifyContent-${justifyContent}`],\n    flexStyles[`gap-${gap}`],\n    flexStyles[`flexWrap-${flexWrap}`],\n    className,\n  ];\n\n  return (\n    <div className={buildClassnames(cssClasses)} style={style} {...rest}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;AAGL,MAAA,OAAO,GAAwB,CAAC,EAC3C,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;AAED,IAAA,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAM,GAAA,IAAI,IAChE,QAAQ,CACL;AAEV;;;;"}

package/dist/components/Flex/FlexCol/FlexCol.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._flexCol_amseb_1 {\n  display: flex;\n  flex-direction: column;\n}");
+var flexColStyles = {"flexCol":"_flexCol_amseb_1"};
+
+module.exports = flexColStyles;
+//# sourceMappingURL=FlexCol.module.scss.cjs.map

package/dist/components/Flex/FlexCol/FlexCol.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexCol.module.scss.cjs","sources":["../../../../src/components/Flex/FlexCol/FlexCol.module.scss"],"sourcesContent":[".flexCol {\n  display: flex;\n  flex-direction: column;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qEAAA;AACA,oBAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}

package/dist/components/Flex/FlexCol/FlexCol.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._flexCol_amseb_1 {\n  display: flex;\n  flex-direction: column;\n}");
+var flexColStyles = {"flexCol":"_flexCol_amseb_1"};
+
+export { flexColStyles as default };
+//# sourceMappingURL=FlexCol.module.scss.js.map

package/dist/components/Flex/FlexCol/FlexCol.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexCol.module.scss.js","sources":["../../../../src/components/Flex/FlexCol/FlexCol.module.scss"],"sourcesContent":[".flexCol {\n  display: flex;\n  flex-direction: column;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qEAAA;AACA,oBAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}

package/dist/components/Flex/FlexCol/index.d.ts

@@ -0,0 +1 @@
+export { FlexCol } from './FlexCol';

package/dist/components/Flex/FlexRow/FlexRow.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var FlexRow_module = require('./FlexRow.module.scss.cjs');
+var Flex_module = require('../Flex.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const FLEX_ROW_DEFAULT_PROPS = {
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 'sm',
+    flexWrap: 'wrap',
+};
+const FlexRow = React__default.default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }, ref) => {
+    const cssClasses = [
+        FlexRow_module.flexRow,
+        Flex_module[`alignItems-${alignItems}`],
+        Flex_module[`justifyContent-${justifyContent}`],
+        Flex_module[`gap-${gap}`],
+        Flex_module[`flexWrap-${flexWrap}`],
+        className,
+    ];
+    return (React__default.default.createElement("div", { className: buildClassnames.buildClassnames(cssClasses), style: style, ref: ref, ...rest }, children));
+});
+
+exports.FLEX_ROW_DEFAULT_PROPS = FLEX_ROW_DEFAULT_PROPS;
+exports.FlexRow = FlexRow;
+//# sourceMappingURL=FlexRow.cjs.map

package/dist/components/Flex/FlexRow/FlexRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexRow.cjs","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n      justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n      gap = FLEX_ROW_DEFAULT_PROPS.gap,\n      flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const cssClasses = [\n      flexRowStyles.flexRow,\n      flexStyles[`alignItems-${alignItems}`],\n      flexStyles[`justifyContent-${justifyContent}`],\n      flexStyles[`gap-${gap}`],\n      flexStyles[`flexWrap-${flexWrap}`],\n      className,\n    ];\n\n    return (\n      <div className={buildClassnames(cssClasses)} style={style} ref={ref} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React","flexRowStyles","flexStyles","buildClassnames"],"mappings":";;;;;;;;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;MAGL,OAAO,GAAGA,sBAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAAC,cAAa,CAAC,OAAO;AACrB,QAAAC,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAAA,WAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAAA,WAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAAA,WAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEF,8CAAK,SAAS,EAAEG,+BAAe,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,EAC1E,EAAA,QAAQ,CACL;AAEV,CAAC;;;;;"}

package/dist/components/Flex/FlexRow/FlexRow.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FlexDefaultProps } from '../types';
+export declare const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps;
+export declare const FlexRow: React.ForwardRefExoticComponent<{
+    alignItems?: import("csstype").Property.AlignItems | undefined;
+    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
+    flexWrap?: import("csstype").Property.FlexWrap | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexRow/FlexRow.js

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import flexRowStyles from './FlexRow.module.scss.js';
+import flexStyles from '../Flex.module.scss.js';
+
+const FLEX_ROW_DEFAULT_PROPS = {
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 'sm',
+    flexWrap: 'wrap',
+};
+const FlexRow = React__default.forwardRef(({ alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems, justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent, gap = FLEX_ROW_DEFAULT_PROPS.gap, flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap, className, style, children, ...rest }, ref) => {
+    const cssClasses = [
+        flexRowStyles.flexRow,
+        flexStyles[`alignItems-${alignItems}`],
+        flexStyles[`justifyContent-${justifyContent}`],
+        flexStyles[`gap-${gap}`],
+        flexStyles[`flexWrap-${flexWrap}`],
+        className,
+    ];
+    return (React__default.createElement("div", { className: buildClassnames(cssClasses), style: style, ref: ref, ...rest }, children));
+});
+
+export { FLEX_ROW_DEFAULT_PROPS, FlexRow };
+//# sourceMappingURL=FlexRow.js.map

package/dist/components/Flex/FlexRow/FlexRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexRow.js","sources":["../../../../src/components/Flex/FlexRow/FlexRow.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { FlexDefaultProps, FlexProps } from '../types';\nimport flexRowStyles from './FlexRow.module.scss';\nimport flexStyles from '../Flex.module.scss';\n\nexport const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps = {\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 'sm',\n  flexWrap: 'wrap',\n};\n\nexport const FlexRow = React.forwardRef<HTMLDivElement, FlexProps>(\n  (\n    {\n      alignItems = FLEX_ROW_DEFAULT_PROPS.alignItems,\n      justifyContent = FLEX_ROW_DEFAULT_PROPS.justifyContent,\n      gap = FLEX_ROW_DEFAULT_PROPS.gap,\n      flexWrap = FLEX_ROW_DEFAULT_PROPS.flexWrap,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const cssClasses = [\n      flexRowStyles.flexRow,\n      flexStyles[`alignItems-${alignItems}`],\n      flexStyles[`justifyContent-${justifyContent}`],\n      flexStyles[`gap-${gap}`],\n      flexStyles[`flexWrap-${flexWrap}`],\n      className,\n    ];\n\n    return (\n      <div className={buildClassnames(cssClasses)} style={style} ref={ref} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;;;AAMa,MAAA,sBAAsB,GAAqB;AACtD,IAAA,UAAU,EAAE,QAAQ;AACpB,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,GAAG,EAAE,IAAI;AACT,IAAA,QAAQ,EAAE,MAAM;;MAGL,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CACE,EACE,UAAU,GAAG,sBAAsB,CAAC,UAAU,EAC9C,cAAc,GAAG,sBAAsB,CAAC,cAAc,EACtD,GAAG,GAAG,sBAAsB,CAAC,GAAG,EAChC,QAAQ,GAAG,sBAAsB,CAAC,QAAQ,EAC1C,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,aAAa,CAAC,OAAO;AACrB,QAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;AACtC,QAAA,UAAU,CAAC,CAAA,eAAA,EAAkB,cAAc,CAAA,CAAE,CAAC;AAC9C,QAAA,UAAU,CAAC,CAAA,IAAA,EAAO,GAAG,CAAA,CAAE,CAAC;AACxB,QAAA,UAAU,CAAC,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAC;QAClC,SAAS;KACV;IAED,QACEA,sCAAK,SAAS,EAAE,eAAe,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,GAAM,IAAI,EAC1E,EAAA,QAAQ,CACL;AAEV,CAAC;;;;"}