@activecollab/components 2.0.163 → 2.0.165

package/dist/esm/components/Input/InputUrl.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Input } from "./Input";
 import { InputSelect } from "./InputSelect";
+import { StyledInputSelectTrigger } from "./Styles";
 import { useForkRef } from "../../utils";
-const options = [{
+const defaultOptions = [{
   id: "https://",
   name: "https://"
 }, {
@@ -16,10 +17,27 @@ export const InputUrl = /*#__PURE__*/forwardRef((_ref, ref) => {
     disabled,
     value: defaultValue = "",
     onChange,
+    scheme,
     ...rest
   } = _ref;
   const inputRef = useRef(null);
   const handleRef = useForkRef(ref, inputRef);
+  const options = useMemo(() => {
+    if (scheme && scheme.length > 0) {
+      if (Array.isArray(scheme)) {
+        return scheme.map(i => ({
+          id: i,
+          name: i
+        }));
+      } else {
+        return [{
+          id: scheme,
+          name: scheme
+        }];
+      }
+    }
+    return defaultOptions;
+  }, [scheme]);
   const [prefix, setPrefix] = useState(options[0].id);
   const [value, setValue] = useState("");
   const separatePrefixFromValue = fullValue => {
@@ -64,14 +82,14 @@ export const InputUrl = /*#__PURE__*/forwardRef((_ref, ref) => {
   },
   // eslint-disable-next-line
   [onChange, prefix]);
-  const handleSelectChange = val => {
+  const handleSelectChange = useCallback(val => {
     setPrefix(val);
     setTimeout(() => {
       var _inputRef$current;
       (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
     }, 200);
     typeof onChange === "function" && onChange(val + value);
-  };
+  }, [onChange, value]);
   const handlePaste = e => {
     e.preventDefault();
     const paste = e.clipboardData.getData("text");
@@ -87,6 +105,29 @@ export const InputUrl = /*#__PURE__*/forwardRef((_ref, ref) => {
       onChange(newPrefix + newValue);
     }
   };
+  const startAdornmentComponent = useMemo(() => {
+    if (options.length > 1) {
+      return /*#__PURE__*/React.createElement(InputSelect, {
+        key: prefix,
+        size: size,
+        onChange: handleSelectChange,
+        options: options,
+        selected: prefix,
+        disabled: disabled
+      });
+    } else {
+      return /*#__PURE__*/React.createElement(StyledInputSelectTrigger, {
+        key: prefix,
+        $disabled: disabled,
+        $size: size
+      }, prefix);
+    }
+  }, [disabled, handleSelectChange, options, prefix, size]);
+  useEffect(() => {
+    if (options.length > 0) {
+      setPrefix(options[0].id);
+    }
+  }, [options]);
   return /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
     ref: handleRef,
     size: size,
@@ -96,13 +137,7 @@ export const InputUrl = /*#__PURE__*/forwardRef((_ref, ref) => {
     onPaste: handlePaste,
     onChange: handleChange,
     "data-testid": "InputUrl",
-    startAdornment: /*#__PURE__*/React.createElement(InputSelect, {
-      size: size,
-      onChange: handleSelectChange,
-      options: options,
-      selected: prefix,
-      disabled: disabled
-    })
+    startAdornment: startAdornmentComponent
   }));
 });
 InputUrl.displayName = "InputUrl";

package/dist/esm/components/Input/InputUrl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputUrl.js","names":["React","forwardRef","useCallback","useEffect","useRef","useState","Input","InputSelect","useForkRef","options","id","name","InputUrl","_ref","ref","size","disabled","value","defaultValue","onChange","rest","inputRef","handleRef","prefix","setPrefix","setValue","separatePrefixFromValue","fullValue","newPrefix","newValue","forEach","option","startsWith","replace","handleChange","e","inputValue","target","handleSelectChange","val","setTimeout","_inputRef$current","current","focus","handlePaste","preventDefault","paste","clipboardData","getData","createElement","_extends","type","onPaste","startAdornment","selected","displayName"],"sources":["../../../../src/components/Input/InputUrl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Input, InputProps } from \"./Input\";\nimport { InputSelect } from \"./InputSelect\";\nimport { useForkRef } from \"../../utils\";\n\nexport interface InputUrlProps\n  extends Omit<\n    InputProps,\n    \"type\" | \"startAdornment\" | \"onChange\" | \"value\" | \"size\"\n  > {\n  /** Input value */\n  value?: string;\n  /** onChange function */\n  onChange?: (val: string) => void;\n  /** Input size */\n  size?: \"regular\" | \"big\" | \"biggest\";\n}\n\nconst options = [\n  { id: \"https://\", name: \"https://\" },\n  { id: \"http://\", name: \"http://\" },\n];\n\nexport const InputUrl = forwardRef<HTMLInputElement, InputUrlProps>(\n  (\n    { size = \"regular\", disabled, value: defaultValue = \"\", onChange, ...rest },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const handleRef = useForkRef(ref, inputRef);\n    const [prefix, setPrefix] = useState(options[0].id);\n\n    const [value, setValue] = useState(\"\");\n\n    const separatePrefixFromValue = (\n      fullValue: string\n    ): { newPrefix: string; newValue: string } => {\n      let newPrefix = prefix;\n      let newValue = fullValue;\n\n      options.forEach((option) => {\n        if (fullValue.startsWith(option.id)) {\n          newPrefix = option.id;\n          newValue = fullValue.replace(option.id, \"\");\n        }\n      });\n\n      setValue(newValue);\n      return { newPrefix, newValue };\n    };\n\n    useEffect(() => {\n      const { newPrefix, newValue } = separatePrefixFromValue(defaultValue);\n      setPrefix(newPrefix);\n      setValue(newValue);\n      // eslint-disable-next-line\n    }, [defaultValue]);\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        if (!inputValue.startsWith(prefix)) {\n          const { newPrefix, newValue } = separatePrefixFromValue(inputValue);\n          setPrefix(newPrefix);\n          setValue(newValue);\n          typeof onChange === \"function\" && onChange(newPrefix + newValue);\n        } else {\n          const newValue = inputValue.replace(prefix, \"\");\n          setValue(newValue);\n          typeof onChange === \"function\" && onChange(prefix + newValue);\n        }\n      },\n      // eslint-disable-next-line\n      [onChange, prefix]\n    );\n\n    const handleSelectChange = (val: string | number | (string | number)[]) => {\n      setPrefix(val as string);\n      setTimeout(() => {\n        inputRef.current?.focus();\n      }, 200);\n      typeof onChange === \"function\" && onChange((val as string) + value);\n    };\n\n    const handlePaste = (e: React.ClipboardEvent) => {\n      e.preventDefault();\n      const paste = e.clipboardData.getData(\"text\");\n      const { newPrefix, newValue } = separatePrefixFromValue(paste);\n      if (newPrefix !== prefix) {\n        setPrefix(newPrefix);\n      }\n      setValue(newValue);\n\n      if (typeof onChange === \"function\") {\n        onChange(newPrefix + newValue);\n      }\n    };\n\n    return (\n      <Input\n        {...rest}\n        ref={handleRef}\n        size={size}\n        value={value}\n        disabled={disabled}\n        type=\"text\"\n        onPaste={handlePaste}\n        onChange={handleChange}\n        data-testid=\"InputUrl\"\n        startAdornment={\n          <InputSelect\n            size={size}\n            onChange={handleSelectChange}\n            options={options}\n            selected={prefix}\n            disabled={disabled}\n          />\n        }\n      />\n    );\n  }\n);\n\nInputUrl.displayName = \"InputUrl\";\n"],"mappings":"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"}
+{"version":3,"file":"InputUrl.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Input","InputSelect","StyledInputSelectTrigger","useForkRef","defaultOptions","id","name","InputUrl","_ref","ref","size","disabled","value","defaultValue","onChange","scheme","rest","inputRef","handleRef","options","length","Array","isArray","map","i","prefix","setPrefix","setValue","separatePrefixFromValue","fullValue","newPrefix","newValue","forEach","option","startsWith","replace","handleChange","e","inputValue","target","handleSelectChange","val","setTimeout","_inputRef$current","current","focus","handlePaste","preventDefault","paste","clipboardData","getData","startAdornmentComponent","createElement","key","selected","$disabled","$size","_extends","type","onPaste","startAdornment","displayName"],"sources":["../../../../src/components/Input/InputUrl.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Input, InputProps } from \"./Input\";\nimport { InputSelect } from \"./InputSelect\";\nimport { StyledInputSelectTrigger } from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\n\nexport interface InputUrlProps\n  extends Omit<\n    InputProps,\n    \"type\" | \"startAdornment\" | \"onChange\" | \"value\" | \"size\"\n  > {\n  /** Input value */\n  value?: string;\n  /** onChange function */\n  onChange?: (val: string) => void;\n  /** Input size */\n  size?: \"regular\" | \"big\" | \"biggest\";\n  scheme?: string[] | string;\n}\n\nconst defaultOptions = [\n  { id: \"https://\", name: \"https://\" },\n  { id: \"http://\", name: \"http://\" },\n];\n\nexport const InputUrl = forwardRef<HTMLInputElement, InputUrlProps>(\n  (\n    {\n      size = \"regular\",\n      disabled,\n      value: defaultValue = \"\",\n      onChange,\n      scheme,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const handleRef = useForkRef(ref, inputRef);\n\n    const options = useMemo(() => {\n      if (scheme && scheme.length > 0) {\n        if (Array.isArray(scheme)) {\n          return scheme.map((i) => ({ id: i, name: i }));\n        } else {\n          return [{ id: scheme, name: scheme }];\n        }\n      }\n      return defaultOptions;\n    }, [scheme]);\n\n    const [prefix, setPrefix] = useState(options[0].id);\n\n    const [value, setValue] = useState(\"\");\n\n    const separatePrefixFromValue = (\n      fullValue: string\n    ): { newPrefix: string; newValue: string } => {\n      let newPrefix = prefix;\n      let newValue = fullValue;\n\n      options.forEach((option) => {\n        if (fullValue.startsWith(option.id)) {\n          newPrefix = option.id;\n          newValue = fullValue.replace(option.id, \"\");\n        }\n      });\n\n      setValue(newValue);\n      return { newPrefix, newValue };\n    };\n\n    useEffect(() => {\n      const { newPrefix, newValue } = separatePrefixFromValue(defaultValue);\n      setPrefix(newPrefix);\n      setValue(newValue);\n      // eslint-disable-next-line\n    }, [defaultValue]);\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        if (!inputValue.startsWith(prefix)) {\n          const { newPrefix, newValue } = separatePrefixFromValue(inputValue);\n          setPrefix(newPrefix);\n          setValue(newValue);\n          typeof onChange === \"function\" && onChange(newPrefix + newValue);\n        } else {\n          const newValue = inputValue.replace(prefix, \"\");\n          setValue(newValue);\n          typeof onChange === \"function\" && onChange(prefix + newValue);\n        }\n      },\n      // eslint-disable-next-line\n      [onChange, prefix]\n    );\n\n    const handleSelectChange = useCallback(\n      (val: string | number | (string | number)[]) => {\n        setPrefix(val as string);\n        setTimeout(() => {\n          inputRef.current?.focus();\n        }, 200);\n        typeof onChange === \"function\" && onChange((val as string) + value);\n      },\n      [onChange, value]\n    );\n\n    const handlePaste = (e: React.ClipboardEvent) => {\n      e.preventDefault();\n      const paste = e.clipboardData.getData(\"text\");\n      const { newPrefix, newValue } = separatePrefixFromValue(paste);\n      if (newPrefix !== prefix) {\n        setPrefix(newPrefix);\n      }\n      setValue(newValue);\n\n      if (typeof onChange === \"function\") {\n        onChange(newPrefix + newValue);\n      }\n    };\n\n    const startAdornmentComponent = useMemo(() => {\n      if (options.length > 1) {\n        return (\n          <InputSelect\n            key={prefix}\n            size={size}\n            onChange={handleSelectChange}\n            options={options}\n            selected={prefix}\n            disabled={disabled}\n          />\n        );\n      } else {\n        return (\n          <StyledInputSelectTrigger\n            key={prefix}\n            $disabled={disabled}\n            $size={size}\n          >\n            {prefix}\n          </StyledInputSelectTrigger>\n        );\n      }\n    }, [disabled, handleSelectChange, options, prefix, size]);\n\n    useEffect(() => {\n      if (options.length > 0) {\n        setPrefix(options[0].id);\n      }\n    }, [options]);\n\n    return (\n      <Input\n        {...rest}\n        ref={handleRef}\n        size={size}\n        value={value}\n        disabled={disabled}\n        type=\"text\"\n        onPaste={handlePaste}\n        onChange={handleChange}\n        data-testid=\"InputUrl\"\n        startAdornment={startAdornmentComponent}\n      />\n    );\n  }\n);\n\nInputUrl.displayName = \"InputUrl\";\n"],"mappings":"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"}

package/dist/esm/components/Input/Styles.d.ts

@@ -21,7 +21,7 @@ export declare const StyledPasswordIndicator: import("styled-components").Styled
 }, never>;
 export declare const StyledInputSelectTrigger: import("styled-components").StyledComponent<"div", any, {
     $size: string;
-    $disabled: boolean;
+    $disabled?: boolean | undefined;
 }, never>;
 export declare const StyledFlagTriggerLabel: import("styled-components").StyledComponent<"span", any, {
     $size: "small" | "regular" | "big";

package/dist/esm/components/Input/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,yFAuE9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFA+DvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC;AAIF,eAAO,MAAM,wBAAwB;WAC5B,MAAM;eACF,OAAO;SA+BnB,CAAC;AAIF,eAAO,MAAM,sBAAsB;WAC1B,OAAO,GAAG,SAAS,GAAG,KAAK;SAGnC,CAAC;AAIF,eAAO,MAAM,gBAAgB,qEAG5B,CAAC;AAIF,eAAO,MAAM,gBAAgB,qEAI5B,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAQ/B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,yFAuE9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFA+DvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC;AAIF,eAAO,MAAM,wBAAwB;WAC5B,MAAM;;SAgCd,CAAC;AAIF,eAAO,MAAM,sBAAsB;WAC1B,OAAO,GAAG,SAAS,GAAG,KAAK;SAGnC,CAAC;AAIF,eAAO,MAAM,gBAAgB,qEAG5B,CAAC;AAIF,eAAO,MAAM,gBAAgB,qEAI5B,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAQ/B,CAAC"}

package/dist/esm/components/Input/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","InputResetStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger","StyledFlagTriggerLabel","span","_ref","StyledOptionFlag","StyledOptionName","StyledOptionWrapper"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputResetStyle } from \"../InputResetStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n  $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n  background-color: var(--input-background-color);\n  border-color: var(--color-theme-500);\n  border-radius: 8px;\n  border-style: solid;\n  border-width: 1px;\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n      border: none;\n      border-radius: none;\n    `}\n\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n  $mode?: InputMode;\n  $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${BoxSizingStyle}\n  ${InputResetStyle}\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n    `}\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n\n    ${(props) =>\n    props.$mode === \"flat\" &&\n    props.$invalid &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n\nexport const StyledFlagTriggerLabel = styled.span<{\n  $size: \"small\" | \"regular\" | \"big\";\n}>`\n  font-size: ${({ $size }) => ($size === \"small\" ? \"20px\" : \"24px\")};\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledFlagTriggerLabel\";\n\nexport const StyledOptionFlag = styled.span`\n  font-size: 24px;\n  margin-right: 4px;\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledOptionFlag\";\n\nexport const StyledOptionName = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nStyledOptionName.displayName = \"StyledOptionName\";\n\nexport const StyledOptionWrapper = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-right: 8px;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n`;\n\nStyledOptionWrapper.displayName = \"StyledOptionWrapper\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","InputResetStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger","StyledFlagTriggerLabel","span","_ref","StyledOptionFlag","StyledOptionName","StyledOptionWrapper"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputResetStyle } from \"../InputResetStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n  $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n  background-color: var(--input-background-color);\n  border-color: var(--color-theme-500);\n  border-radius: 8px;\n  border-style: solid;\n  border-width: 1px;\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n      border: none;\n      border-radius: none;\n    `}\n\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n  $mode?: InputMode;\n  $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${BoxSizingStyle}\n  ${InputResetStyle}\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n    `}\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n\n    ${(props) =>\n    props.$mode === \"flat\" &&\n    props.$invalid &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled?: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n\nexport const StyledFlagTriggerLabel = styled.span<{\n  $size: \"small\" | \"regular\" | \"big\";\n}>`\n  font-size: ${({ $size }) => ($size === \"small\" ? \"20px\" : \"24px\")};\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledFlagTriggerLabel\";\n\nexport const StyledOptionFlag = styled.span`\n  font-size: 24px;\n  margin-right: 4px;\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledOptionFlag\";\n\nexport const StyledOptionName = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nStyledOptionName.displayName = \"StyledOptionName\";\n\nexport const StyledOptionWrapper = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-right: 8px;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n`;\n\nStyledOptionWrapper.displayName = \"StyledOptionWrapper\";\n"],"mappings":"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"}

package/dist/esm/components/Sheet/Sheet.d.ts

@@ -1,7 +1,14 @@
 import React, { CSSProperties } from "react";
+interface ControlProps {
+    onClick: () => void;
+    icon: React.ReactElement;
+    tooltip: string;
+    disabled: boolean;
+    className: string;
+}
 interface ISheet {
     onClose?: () => void;
-    controls?: JSX.Element[];
+    controls?: ControlProps[];
     open?: boolean;
     animation?: "top" | "bottom" | "left" | "right";
     position?: "center" | "left" | "right";

package/dist/esm/components/Sheet/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAId,MAAM,OAAO,CAAC;AAef,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,oHAoIjB,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,aAAa,EAGd,MAAM,OAAO,CAAC;AAoBf,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAID,eAAO,MAAM,KAAK,oHAiLjB,CAAC"}

package/dist/esm/components/Sheet/Sheet.js

@@ -2,8 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback, useEffect, forwardRef, useState, useImperativeHandle } from "react";
 import { Transition } from "react-transition-group";
 import classnames from "classnames";
-import { StyledAnimatedSpan, StyledCssTransition, StyledSheetIcons, StyledSheetWrapper, StyledSheetWrapperPaper } from "./Styles";
+import { StyledAnimatedSpan, StyledCssTransition, StyledHeader, StyledIconsWrapperSmall, StyledListSeparator, StyledSheetIcons, StyledSheetWrapper, StyledSheetWrapperPaper } from "./Styles";
+import { IconButton } from "../IconButton";
 import { Overlay } from "../Overlay";
+import { Tooltip } from "../Tooltip";
 import { Window } from "../Window";
 export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -32,7 +34,7 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, []);
   const handleExited = useCallback(() => {
     setExited(true);
-    typeof onClose === "function" && onClose();
+    onClose == null || onClose();
   }, [onClose]);
   const handleClose = useCallback(() => {
     setOpen(false);
@@ -53,34 +55,47 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     onClose: handleClose,
     disableFocusLock: disableFocusLock,
     disableScrollLock: disableScrollLock
-  }), open ? /*#__PURE__*/React.createElement(Overlay, {
+  }), open && /*#__PURE__*/React.createElement(Overlay, {
     onClick: handleBackgroundClick,
     disableBackgroundColor: disableBackgroundColor
-  }) : null, /*#__PURE__*/React.createElement(StyledSheetWrapper, {
+  }), /*#__PURE__*/React.createElement(StyledSheetWrapper, {
     className: classnames("c-sheet__wrapper", bodyClassName),
     style: bodyStyle,
     $position: position,
     $mode: mode
-  }, controls.length ? /*#__PURE__*/React.createElement(StyledSheetIcons, null, controls.map((item, index) => {
-    const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s
-    const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s
+  }, controls.length > 0 && /*#__PURE__*/React.createElement(StyledSheetIcons, null, controls.map((_ref2, index) => {
+    let {
+      icon: IconComponent,
+      tooltip,
+      onClick,
+      disabled,
+      className
+    } = _ref2;
+    const maxDurationIn = 4;
+    const maxDurationOut = 2;
     const control = index + 1;
-    const durationOut = controls.length > maxDurationOut ? maxDurationOut : maxDurationOut - control;
-    const durationIn = control >= maxDurationIn ? 1 : control;
+    const durationOut = Math.max(0, maxDurationOut - control);
+    const durationIn = Math.min(control, maxDurationIn);
     return /*#__PURE__*/React.createElement(Transition, {
       appear: true,
       in: open,
       timeout: maxDurationIn * 100,
       key: "c-sheet-control-" + index
-    }, state => /*#__PURE__*/React.createElement(StyledAnimatedSpan, {
-      $state: state,
+    }, state => /*#__PURE__*/React.createElement(Tooltip, {
+      title: tooltip,
+      disable: !tooltip || disabled
+    }, /*#__PURE__*/React.createElement(StyledAnimatedSpan, {
+      onClick: onClick,
+      $disabled: disabled,
       $mode: mode,
+      $state: state,
+      className: className,
       $maxDurationIn: maxDurationIn / 10,
       $maxDurationOut: maxDurationOut / 10,
       $durationOut: durationOut / 10,
       $durationIn: durationIn / 10
-    }, item));
-  })) : null, /*#__PURE__*/React.createElement(StyledCssTransition, {
+    }, IconComponent)));
+  })), /*#__PURE__*/React.createElement(StyledCssTransition, {
     appear: true,
     in: open,
     timeout: 400,
@@ -90,7 +105,25 @@ export const Sheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     onExited: handleExited
   }, /*#__PURE__*/React.createElement(StyledSheetWrapperPaper, {
     paperClass: "c-sheet__wrapper__paper"
-  }, children))));
+  }, controls.length > 0 && /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(StyledIconsWrapperSmall, null, controls.map((_ref3, index) => {
+    let {
+      icon: IconComponent,
+      tooltip,
+      onClick,
+      disabled,
+      className
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: tooltip,
+      disable: !tooltip || disabled,
+      key: index
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      onClick: onClick,
+      disabled: disabled,
+      className: className,
+      variant: "text gray"
+    }, IconComponent));
+  })), /*#__PURE__*/React.createElement(StyledListSeparator, null)), children))));
 });
 Sheet.displayName = "Sheet";
 //# sourceMappingURL=Sheet.js.map

package/dist/esm/components/Sheet/Sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","Transition","classnames","StyledAnimatedSpan","StyledCssTransition","StyledSheetIcons","StyledSheetWrapper","StyledSheetWrapperPaper","Overlay","Window","Sheet","_ref","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","close","createElement","_extends","onClick","className","style","$position","$mode","length","map","item","index","maxDurationIn","maxDurationOut","control","durationOut","durationIn","appear","in","timeout","key","state","$state","$maxDurationIn","$maxDurationOut","$durationOut","$durationIn","classNames","$direction","onEnter","onExited","paperClass","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  ReactElement,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: JSX.Element[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n  close: () => void;\n}\n\nexport const Sheet = forwardRef<\n  SheetMethods,\n  ISheet & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    useImperativeHandle(ref, () => ({\n      close: handleClose,\n    }));\n\n    if (!open && exited) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          {controls.length ? (\n            <StyledSheetIcons>\n              {controls.map((item, index) => {\n                const maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s\n                const maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s\n                const control = index + 1;\n                const durationOut =\n                  controls.length > maxDurationOut\n                    ? maxDurationOut\n                    : maxDurationOut - control;\n                const durationIn = control >= maxDurationIn ? 1 : control;\n                return (\n                  <Transition\n                    appear\n                    in={open}\n                    timeout={maxDurationIn * 100}\n                    key={`c-sheet-control-${index}`}\n                  >\n                    {(state): ReactElement => (\n                      <StyledAnimatedSpan\n                        $state={state}\n                        $mode={mode}\n                        $maxDurationIn={maxDurationIn / 10}\n                        $maxDurationOut={maxDurationOut / 10}\n                        $durationOut={durationOut / 10}\n                        $durationIn={durationIn / 10}\n                      >\n                        {item}\n                      </StyledAnimatedSpan>\n                    )}\n                  </Transition>\n                );\n              })}\n            </StyledSheetIcons>\n          ) : null}\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={400}\n            classNames=\"c-sheet__animation\"\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n              {children}\n            </StyledSheetWrapperPaper>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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"}
+{"version":3,"file":"Sheet.js","names":["React","useCallback","useEffect","forwardRef","useState","useImperativeHandle","Transition","classnames","StyledAnimatedSpan","StyledCssTransition","StyledHeader","StyledIconsWrapperSmall","StyledListSeparator","StyledSheetIcons","StyledSheetWrapper","StyledSheetWrapperPaper","IconButton","Overlay","Tooltip","Window","Sheet","_ref","ref","children","onClose","controls","open","defaultOpen","animation","position","mode","disableFocusLock","disableScrollLock","disableBackgroundColor","bodyStyle","bodyClassName","disableBackgroundClick","rest","setOpen","exited","setExited","handleEnter","handleExited","handleClose","handleBackgroundClick","event","preventDefault","close","createElement","_extends","onClick","className","style","$position","$mode","length","map","_ref2","index","icon","IconComponent","tooltip","disabled","maxDurationIn","maxDurationOut","control","durationOut","Math","max","durationIn","min","appear","in","timeout","key","state","title","disable","$disabled","$state","$maxDurationIn","$maxDurationOut","$durationOut","$durationIn","classNames","$direction","onEnter","onExited","paperClass","_ref3","variant","displayName"],"sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  CSSProperties,\n  MouseEvent,\n  useImperativeHandle,\n} from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledAnimatedSpan,\n  StyledCssTransition,\n  StyledHeader,\n  StyledIconsWrapperSmall,\n  StyledListSeparator,\n  StyledSheetIcons,\n  StyledSheetWrapper,\n  StyledSheetWrapperPaper,\n} from \"./Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { Overlay } from \"../Overlay\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Window } from \"../Window\";\n\ninterface ControlProps {\n  onClick: () => void;\n  icon: React.ReactElement;\n  tooltip: string;\n  disabled: boolean;\n  className: string;\n}\n\ninterface ISheet {\n  onClose?: () => void;\n  controls?: ControlProps[];\n  open?: boolean;\n  animation?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  position?: \"center\" | \"left\" | \"right\";\n  mode?: \"normal\" | \"stretch\";\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  disableBackgroundColor?: boolean;\n  bodyStyle?: CSSProperties;\n  bodyClassName?: string;\n  disableBackgroundClick?: boolean;\n}\n\nexport interface SheetMethods {\n  close: () => void;\n}\n\ntype SheetProps = ISheet & HTMLAttributes<HTMLDivElement>;\n\nexport const Sheet = forwardRef<SheetMethods, SheetProps>(\n  (\n    {\n      children,\n      onClose,\n      controls = [],\n      open: defaultOpen = false,\n      animation = \"top\",\n      position = \"center\",\n      mode = \"normal\",\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundColor = false,\n      bodyStyle,\n      bodyClassName,\n      disableBackgroundClick = false,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      onClose?.();\n    }, [onClose]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n    }, []);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          handleClose();\n        }\n      },\n      [disableBackgroundClick, handleClose]\n    );\n\n    useImperativeHandle(ref, () => ({\n      close: handleClose,\n    }));\n\n    if (!open && exited) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n      >\n        {open && (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        )}\n        <StyledSheetWrapper\n          className={classnames(\"c-sheet__wrapper\", bodyClassName)}\n          style={bodyStyle}\n          $position={position}\n          $mode={mode}\n        >\n          {controls.length > 0 && (\n            <StyledSheetIcons>\n              {controls.map(\n                (\n                  {\n                    icon: IconComponent,\n                    tooltip,\n                    onClick,\n                    disabled,\n                    className,\n                  },\n                  index\n                ) => {\n                  const maxDurationIn = 4;\n                  const maxDurationOut = 2;\n                  const control = index + 1;\n                  const durationOut = Math.max(0, maxDurationOut - control);\n                  const durationIn = Math.min(control, maxDurationIn);\n\n                  return (\n                    <Transition\n                      appear\n                      in={open}\n                      timeout={maxDurationIn * 100}\n                      key={`c-sheet-control-${index}`}\n                    >\n                      {(state) => (\n                        <Tooltip title={tooltip} disable={!tooltip || disabled}>\n                          <StyledAnimatedSpan\n                            onClick={onClick}\n                            $disabled={disabled}\n                            $mode={mode}\n                            $state={state}\n                            className={className}\n                            $maxDurationIn={maxDurationIn / 10}\n                            $maxDurationOut={maxDurationOut / 10}\n                            $durationOut={durationOut / 10}\n                            $durationIn={durationIn / 10}\n                          >\n                            {IconComponent}\n                          </StyledAnimatedSpan>\n                        </Tooltip>\n                      )}\n                    </Transition>\n                  );\n                }\n              )}\n            </StyledSheetIcons>\n          )}\n          <StyledCssTransition\n            appear\n            in={open}\n            timeout={400}\n            classNames=\"c-sheet__animation\"\n            $direction={animation}\n            onEnter={handleEnter}\n            onExited={handleExited}\n          >\n            <StyledSheetWrapperPaper paperClass=\"c-sheet__wrapper__paper\">\n              {controls.length > 0 && (\n                <StyledHeader>\n                  <StyledIconsWrapperSmall>\n                    {controls.map(\n                      (\n                        {\n                          icon: IconComponent,\n                          tooltip,\n                          onClick,\n                          disabled,\n                          className,\n                        },\n                        index\n                      ) => (\n                        <Tooltip\n                          title={tooltip}\n                          disable={!tooltip || disabled}\n                          key={index}\n                        >\n                          <IconButton\n                            onClick={onClick}\n                            disabled={disabled}\n                            className={className}\n                            variant=\"text gray\"\n                          >\n                            {IconComponent}\n                          </IconButton>\n                        </Tooltip>\n                      )\n                    )}\n                  </StyledIconsWrapperSmall>\n                  <StyledListSeparator />\n                </StyledHeader>\n              )}\n              {children}\n            </StyledSheetWrapperPaper>\n          </StyledCssTransition>\n        </StyledSheetWrapper>\n      </Window>\n    );\n  }\n);\n\nSheet.displayName = \"Sheet\";\n"],"mappings":"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"}

package/dist/esm/components/Sheet/Styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CSSTransition } from "react-transition-group";
 export declare const StyledSheetIcons: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IStyledSheetWrapper {
@@ -15,15 +16,22 @@ export declare const StyledSheetControlsCenterIn: import("styled-components").Ke
 export declare const StyledSheetControlsCenterOut: import("styled-components").Keyframes;
 interface IStyledAnimatedSpan {
     $mode: string;
-    $state: string;
+    $state?: string;
     $maxDurationIn: number;
     $maxDurationOut: number;
     $durationOut: number;
     $durationIn: number;
+    $disabled?: boolean;
 }
 export declare const StyledAnimatedSpan: import("styled-components").StyledComponent<"span", any, IStyledAnimatedSpan, never>;
 export declare const StyledCssTransition: import("styled-components").StyledComponent<typeof CSSTransition, any, {
     $direction: string;
 }, never>;
+export declare const StyledListSeparator: import("styled-components").StyledComponent<{
+    ({ className, ...props }: import("react").HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+    displayName: string;
+}, any, {}, never>;
+export declare const StyledIconsWrapperSmall: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Sheet/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAQvD,eAAO,MAAM,gBAAgB,oEAuB5B,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,qFA0F9B,CAAC;AAIF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,0FAanC,CAAC;AAIF,eAAO,MAAM,sBAAsB,uCASlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,uCASrC,CAAC;AAEF,eAAO,MAAM,2BAA2B,uCASvC,CAAC;AAEF,eAAO,MAAM,4BAA4B,uCASxC,CAAC;AAEF,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFAiD9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/Styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AASvD,eAAO,MAAM,gBAAgB,oEA2B5B,CAAC;AAIF,UAAU,mBAAmB;IAC3B,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,qFAmG9B,CAAC;AAIF,UAAU,wBAAwB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,0FAanC,CAAC;AAIF,eAAO,MAAM,sBAAsB,uCASlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,uCASrC,CAAC;AAEF,eAAO,MAAM,2BAA2B,uCASvC,CAAC;AAEF,eAAO,MAAM,4BAA4B,uCASxC,CAAC;AAEF,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,sFA2D9B,CAAC;AAIF,eAAO,MAAM,mBAAmB;gBAClB,MAAM;SA6HnB,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;kBAE/B,CAAC;AAIF,eAAO,MAAM,uBAAuB,oEASnC,CAAC;AAIF,eAAO,MAAM,YAAY,oEAIxB,CAAC"}

package/dist/esm/components/Sheet/Styles.js

@@ -2,15 +2,16 @@ import { CSSTransition } from "react-transition-group";
 import styled, { css, keyframes } from "styled-components";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { FontStyle } from "../FontStyle";
+import { ListSeparator } from "../List";
 export const StyledSheetIcons = styled.div.withConfig({
   displayName: "Styles__StyledSheetIcons",
   componentId: "sc-144eyxd-0"
-})(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}"]);
+})(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}@media (max-width:768px){display:none;}"]);
 StyledSheetIcons.displayName = "StyledSheetIcons";
 export const StyledSheetWrapper = styled.div.withConfig({
   displayName: "Styles__StyledSheetWrapper",
   componentId: "sc-144eyxd-1"
-})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => props.$mode === "stretch" ? css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons), props => props.$position === "center" && css(["", ""], {
+})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => props.$mode === "stretch" ? css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && css(["@media (max-width:768px){width:100%;height:100%;}"]), props => props.$position === "center" && css(["", ""], {
   "marginLeft": "auto",
   "marginRight": "auto"
 }), props => props.$position === "left" && css(["", ""], {
@@ -37,11 +38,26 @@ export const StyledSheetControlsCenterOut = keyframes(["0%{transform:translateY(
 export const StyledAnimatedSpan = styled.span.withConfig({
   displayName: "Styles__StyledAnimatedSpan",
   componentId: "sc-144eyxd-3"
-})(["background:red;", " ", " ", " ", ""], props => props.$state === "entering" && css(["opacity:1;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, props.$durationIn + "s", props.$durationIn + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, props.$maxDurationIn + "s")), props => props.$state === "entered" && css(["opacity:1;"]), props => props.$state === "exiting" && css(["opacity:0;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, props.$durationOut + "s", props.$durationOut + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, props.$maxDurationOut + "s")), props => props.$state === "exited" && css(["opacity:0;"]));
+})(["background:red;", " ", " ", " ", " ", ""], props => props.$state === "entering" && css(["opacity:1;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, props.$durationIn + "s", props.$durationIn + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, props.$maxDurationIn + "s")), props => props.$state === "entered" && css(["opacity:1;"]), props => props.$disabled && css(["pointer-events:none;svg{opacity:0.5;}"]), props => props.$state === "exiting" && css(["opacity:0;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, props.$durationOut + "s", props.$durationOut + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, props.$maxDurationOut + "s")), props => props.$state === "exited" && css(["opacity:0;"]));
 StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
 export const StyledCssTransition = styled(CSSTransition).withConfig({
   displayName: "Styles__StyledCssTransition",
   componentId: "sc-144eyxd-4"
 })(["", " ", " ", " ", ""], props => props.$direction === "top" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "bottom" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "left" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]), props => props.$direction === "right" && css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]));
 StyledCssTransition.displayName = "StyledCssTransition";
+export const StyledListSeparator = styled(ListSeparator).withConfig({
+  displayName: "Styles__StyledListSeparator",
+  componentId: "sc-144eyxd-5"
+})(["margin:0;"]);
+StyledListSeparator.displayName = "StyledListSeparator";
+export const StyledIconsWrapperSmall = styled.div.withConfig({
+  displayName: "Styles__StyledIconsWrapperSmall",
+  componentId: "sc-144eyxd-6"
+})(["height:40px;display:flex;gap:8px;padding-left:16px;padding-right:16px;align-items:center;place-content:end;flex-direction:row-reverse;"]);
+StyledIconsWrapperSmall.displayName = "StyledIconsWrapperSmall";
+export const StyledHeader = styled.div.withConfig({
+  displayName: "Styles__StyledHeader",
+  componentId: "sc-144eyxd-7"
+})(["@media (min-width:768px){display:none;}"]);
+StyledHeader.displayName = "StyledHeader";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Sheet/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["CSSTransition","styled","css","keyframes","BoxSizingStyle","FontStyle","StyledSheetIcons","div","withConfig","displayName","componentId","StyledSheetWrapper","props","$mode","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","$direction"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-200px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n  0% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n`;\n\ninterface IStyledAnimatedSpan {\n  $mode: string;\n  $state: string;\n  $maxDurationIn: number;\n  $maxDurationOut: number;\n  $durationOut: number;\n  $durationIn: number;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  background: red;\n  ${(props) =>\n    props.$state === \"entering\" &&\n    css`\n      opacity: 1;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsTop};\n            animation-duration: ${`${props.$durationIn}s`};\n            animation-delay: ${`${props.$durationIn}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterIn};\n            animation-duration: ${`${props.$maxDurationIn}s`};\n            animation-delay: 0s;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"entered\" &&\n    css`\n      opacity: 1;\n    `}\n\n  ${(props) =>\n    props.$state === \"exiting\" &&\n    css`\n      opacity: 0;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsBottom};\n            animation-duration: ${`${props.$durationOut}s`};\n            animation-delay: ${`${props.$durationOut}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterOut};\n            animation-duration: ${`${props.$maxDurationOut}s`};\n            animation-delay: 0;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"exited\" &&\n    css`\n      opacity: 0;\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["CSSTransition","styled","css","keyframes","BoxSizingStyle","FontStyle","ListSeparator","StyledSheetIcons","div","withConfig","displayName","componentId","StyledSheetWrapper","props","$mode","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$disabled","$durationOut","$maxDurationOut","StyledCssTransition","$direction","StyledListSeparator","StyledIconsWrapperSmall","StyledHeader"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ListSeparator } from \"../List\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n\n  @media (max-width: 768px) {\n    display: none;\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    css`\n      @media (max-width: 768px) {\n        width: 100%;\n        height: 100%;\n      }\n    `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n  paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n  (props) => ({\n    className: props.paperClass,\n  })\n)<IStyledSheetWrapperPaper>`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-200px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n  0% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n`;\n\ninterface IStyledAnimatedSpan {\n  $mode: string;\n  $state?: string;\n  $maxDurationIn: number;\n  $maxDurationOut: number;\n  $durationOut: number;\n  $durationIn: number;\n  $disabled?: boolean;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  background: red;\n  ${(props) =>\n    props.$state === \"entering\" &&\n    css`\n      opacity: 1;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsTop};\n            animation-duration: ${`${props.$durationIn}s`};\n            animation-delay: ${`${props.$durationIn}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterIn};\n            animation-duration: ${`${props.$maxDurationIn}s`};\n            animation-delay: 0s;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"entered\" &&\n    css`\n      opacity: 1;\n    `}\n\n    ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n\n      svg {\n        opacity: 0.5;\n      }\n    `}\n\n  ${(props) =>\n    props.$state === \"exiting\" &&\n    css`\n      opacity: 0;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsBottom};\n            animation-duration: ${`${props.$durationOut}s`};\n            animation-delay: ${`${props.$durationOut}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterOut};\n            animation-duration: ${`${props.$maxDurationOut}s`};\n            animation-delay: 0;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"exited\" &&\n    css`\n      opacity: 0;\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n\nexport const StyledListSeparator = styled(ListSeparator)`\n  margin: 0;\n`;\n\nStyledListSeparator.displayName = \"StyledListSeparator\";\n\nexport const StyledIconsWrapperSmall = styled.div`\n  height: 40px;\n  display: flex;\n  gap: 8px;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n  place-content: end;\n  flex-direction: row-reverse;\n`;\n\nStyledIconsWrapperSmall.displayName = \"StyledIconsWrapperSmall\";\n\nexport const StyledHeader = styled.div`\n  @media (min-width: 768px) {\n    display: none;\n  }\n`;\n\nStyledHeader.displayName = \"StyledHeader\";\n"],"mappings":"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"}