@jenesei-software/jenesei-kit-react 1.0.0

package/build/component.styles-Dok17vPl.js

@@ -0,0 +1,126 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useCallback, useMemo } from "react";
+import styled, { useTheme } from "styled-components";
+import { a as addError } from "./style-DeAgDHyI.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+const Range = (props) => {
+  const { onChange } = props;
+  const handleChange = useCallback(
+    (index, newValue) => {
+      const newValues = [...props.values];
+      newValues[index] = Math.min(props.max, Math.max(props.min, newValue));
+      onChange(newValues.sort((a, b) => a - b));
+    },
+    [onChange, props.max, props.min, props.values]
+  );
+  const getThumbPositionPercent = useCallback(
+    (val) => (val - props.min) / (props.max - props.min) * 100,
+    [props.max, props.min]
+  );
+  const positions = useMemo(
+    () => props.values.map((val) => getThumbPositionPercent(val)),
+    [getThumbPositionPercent, props.values]
+  );
+  const theme = useTheme();
+  const colorTrackBackground = theme.colors.range[props.genre].track.background.rest;
+  const colorTrackGradient = theme.colors.range[props.genre].track.gradient.rest;
+  const colorThumbBorder = theme.colors.range[props.genre].thumb.border.rest;
+  const colorThumbBackground = theme.colors.range[props.genre].thumb.background.rest;
+  const trackGradient = useMemo(
+    () => positions.map((position, idx) => {
+      const isFirst = idx === 0;
+      const isLast = idx === positions.length - 1;
+      if (isFirst)
+        return `${colorTrackBackground} 0%, ${colorTrackBackground} ${position}%, ${colorTrackGradient} ${position}%`;
+      if (isLast)
+        return `${colorTrackGradient} ${position}%, ${colorTrackBackground} ${position}%, ${colorTrackBackground} 100%`;
+      return `${colorTrackGradient} ${position}%`;
+    }).join(", "),
+    [colorTrackGradient, colorTrackBackground, positions]
+  );
+  const gradient = useMemo(() => `linear-gradient(to right, ${trackGradient})`, [trackGradient]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RangeWrapper, { $size: props.size, $sx: props.sx, $error: props.error, onBlur: props.onBlur, children: [
+    props.values.map((val, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      RangeThumb,
+      {
+        type: "range",
+        $size: props.size,
+        $genre: props.genre,
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        value: val,
+        onChange: (e) => handleChange(idx, parseFloat(e.target.value)),
+        style: { zIndex: 100 + idx },
+        $colorBackground: colorThumbBackground,
+        $colorBorder: colorThumbBorder
+      },
+      idx
+    )),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      RangeTrack,
+      {
+        $size: props.size,
+        $genre: props.genre,
+        style: {
+          background: gradient
+        }
+      }
+    )
+  ] });
+};
+const RangeWrapper = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  height: 20px;
+  ${addError};
+  ${addSX};
+`;
+const RangeTrack = styled.div`
+  position: absolute;
+  height: 3px;
+  width: 100%;
+  padding: 0px 10px;
+  border-radius: 2px;
+`;
+const RangeThumb = styled.input`
+  position: absolute;
+  width: 100%;
+  outline: none !important;
+  pointer-events: none;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  left: 0;
+  margin: 0;
+  &::-webkit-slider-thumb {
+    pointer-events: all;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    padding: 0;
+    border-radius: 50%;
+    background: ${(props) => props.$colorBackground};
+    border: 3px ${(props) => props.$colorBorder} solid;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: 0px;
+    transition:
+      transform ${(props) => props.theme.transition.default},
+      color ${(props) => props.theme.transition.default},
+      background-color ${(props) => props.theme.transition.default};
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+`;
+export {
+  Range as R,
+  RangeWrapper as a,
+  RangeTrack as b,
+  RangeThumb as c
+};
+//# sourceMappingURL=component.styles-Dok17vPl.js.map

package/build/component.styles-Dok17vPl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-Dok17vPl.js","sources":["../src/components/range/component.tsx","../src/components/range/component.styles.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport { RangeProps, RangeThumb, RangeTrack, RangeWrapper } from '.'\n\nexport const Range = (props: RangeProps) => {\n  const { onChange } = props\n  const handleChange = useCallback(\n    (index: number, newValue: number) => {\n      const newValues = [...props.values]\n      newValues[index] = Math.min(props.max, Math.max(props.min, newValue))\n      onChange(newValues.sort((a, b) => a - b))\n    },\n    [onChange, props.max, props.min, props.values]\n  )\n  const getThumbPositionPercent = useCallback(\n    (val: number) => ((val - props.min) / (props.max - props.min)) * 100,\n    [props.max, props.min]\n  )\n  const positions = useMemo(\n    () => props.values.map(val => getThumbPositionPercent(val)),\n    [getThumbPositionPercent, props.values]\n  )\n  const theme = useTheme()\n\n  const colorTrackBackground = theme.colors.range[props.genre].track.background.rest\n  const colorTrackGradient = theme.colors.range[props.genre].track.gradient.rest\n  const colorThumbBorder = theme.colors.range[props.genre].thumb.border.rest\n  const colorThumbBackground = theme.colors.range[props.genre].thumb.background.rest\n\n  const trackGradient = useMemo(\n    () =>\n      positions\n        .map((position, idx) => {\n          const isFirst = idx === 0\n          const isLast = idx === positions.length - 1\n\n          if (isFirst)\n            return `${colorTrackBackground} 0%, ${colorTrackBackground} ${position}%, ${colorTrackGradient} ${position}%`\n          if (isLast)\n            return `${colorTrackGradient} ${position}%, ${colorTrackBackground} ${position}%, ${colorTrackBackground} 100%`\n          return `${colorTrackGradient} ${position}%`\n        })\n        .join(', '),\n    [colorTrackGradient, colorTrackBackground, positions]\n  )\n  const gradient = useMemo(() => `linear-gradient(to right, ${trackGradient})`, [trackGradient])\n\n  return (\n    <RangeWrapper $size={props.size} $sx={props.sx} $error={props.error} onBlur={props.onBlur}>\n      {props.values.map((val, idx) => (\n        <RangeThumb\n          key={idx}\n          type=\"range\"\n          $size={props.size}\n          $genre={props.genre}\n          min={props.min}\n          max={props.max}\n          step={props.step}\n          value={val}\n          onChange={e => handleChange(idx, parseFloat(e.target.value))}\n          style={{ zIndex: 100 + idx }}\n          $colorBackground={colorThumbBackground}\n          $colorBorder={colorThumbBorder}\n        />\n      ))}\n      <RangeTrack\n        $size={props.size}\n        $genre={props.genre}\n        style={{\n          background: gradient\n        }}\n      />\n    </RangeWrapper>\n  )\n}\n","import styled from 'styled-components'\n\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\n\nimport { RangeComponentProps, RangeThumbProps, RangeWrapperProps } from '.'\n\nexport const RangeWrapper = styled.div<RangeWrapperProps>`\n  position: relative;\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  height: 20px;\n  ${addError};\n  ${addSX};\n`\n\nexport const RangeTrack = styled.div<RangeComponentProps>`\n  position: absolute;\n  height: 3px;\n  width: 100%;\n  padding: 0px 10px;\n  border-radius: 2px;\n`\nexport const RangeThumb = styled.input<RangeThumbProps>`\n  position: absolute;\n  width: 100%;\n  outline: none !important;\n  pointer-events: none;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  left: 0;\n  margin: 0;\n  &::-webkit-slider-thumb {\n    pointer-events: all;\n    width: 16px;\n    height: 16px;\n    margin: 0;\n    padding: 0;\n    border-radius: 50%;\n    background: ${props => props.$colorBackground};\n    border: 3px ${props => props.$colorBorder} solid;\n    cursor: pointer;\n    -webkit-appearance: none;\n    margin-top: 0px;\n    transition:\n      transform ${props => props.theme.transition.default},\n      color ${props => props.theme.transition.default},\n      background-color ${props => props.theme.transition.default};\n    &:hover {\n      transform: scale(1.2);\n    }\n  }\n`\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/build/component.styles-Dpg-__rn.cjs

@@ -0,0 +1,43 @@
+"use strict";const e=require("styled-components");require("./jsx-runtime-BcGej2Kr.cjs"),require("react");const o="JENESEI_RIPPLE",t=e.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+`,i=e.span`
+  transform: scale(0);
+  border-radius: 100%;
+  position: absolute;
+  opacity: 0.75;
+  background-color: ${e=>e.$color};
+  animation-name: ripple;
+  animation-duration: ${e=>e.$duration}ms;
+
+  @keyframes ripple {
+    to {
+      opacity: 0;
+      transform: scale(2);
+    }
+  }
+`,s=e.css`
+  ${t=>t.$isRipple&&e.css`
+      position: relative;
+      overflow: hidden;
+      isolation: isolate;
+
+      & *:not(#${o}) {
+        user-select: none;
+        pointer-events: none;
+      }
+    `}
+`,n=e.css`
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+
+  & *:not(#${o}) {
+    user-select: none;
+    pointer-events: none;
+  }
+`;exports.DEFAULT_RIPPLE_DURATION=600,exports.DEFAULT_RIPPLE_ID=o,exports.RippleContainer=t,exports.RippleSpan=i,exports.addRipple=s,exports.addRippleDefault=n;
+//# sourceMappingURL=component.styles-Dpg-__rn.cjs.map

package/build/component.styles-Dpg-__rn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-Dpg-__rn.cjs","sources":["../src/components/ripple/component.constants.tsx","../src/components/ripple/component.styles.tsx"],"sourcesContent":["export const DEFAULT_RIPPLE_DURATION = 600\nexport const DEFAULT_RIPPLE_ID = 'JENESEI_RIPPLE'\n","import styled, { css } from 'styled-components'\n\nimport { DEFAULT_RIPPLE_ID, RippleContainerProps } from '.'\n\nexport const RippleContainer = styled.div<RippleContainerProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`\n\nexport const RippleSpan = styled.span<RippleContainerProps>`\n  transform: scale(0);\n  border-radius: 100%;\n  position: absolute;\n  opacity: 0.75;\n  background-color: ${props => props.$color};\n  animation-name: ripple;\n  animation-duration: ${props => props.$duration}ms;\n\n  @keyframes ripple {\n    to {\n      opacity: 0;\n      transform: scale(2);\n    }\n  }\n`\n\nexport const addRipple = css<{ $isRipple?: boolean }>`\n  ${props =>\n    props.$isRipple &&\n    css`\n      position: relative;\n      overflow: hidden;\n      isolation: isolate;\n\n      & *:not(#${DEFAULT_RIPPLE_ID}) {\n        user-select: none;\n        pointer-events: none;\n      }\n    `}\n`\nexport const addRippleDefault = css`\n  position: relative;\n  overflow: hidden;\n  isolation: isolate;\n\n  & *:not(#${DEFAULT_RIPPLE_ID}) {\n    user-select: none;\n    pointer-events: none;\n  }\n`\n"],"names":["DEFAULT_RIPPLE_ID","RippleContainer","styled","div","RippleSpan","span","props","$color","$duration","addRipple","css","$isRipple","addRippleDefault"],"mappings":"yGAAO,MACMA,EAAoB,iBCGpBC,EAAkBC,EAAOC,GAAA;;;;;;EAQzBC,EAAaF,EAAOG,IAAA;;;;;sBAKXC,GAASA,EAAMC;;wBAEbD,GAASA,EAAME;;;;;;;;EAU1BC,EAAYC,EAAAA,GAAAA;IACrBJ,GACAA,EAAMK,WACND,EAAAA,GAAAA;;;;;iBAKaV;;;;;EAMJY,EAAmBF,EAAAA,GAAAA;;;;;aAKnBV;;;;kCDhD0B"}

package/build/component.styles-DpkFoWEh.cjs

@@ -0,0 +1,81 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("react"),r=require("styled-components"),s=require("./style-CtGd1JVB.cjs"),o=require("./theme.global-D6XU05Et.cjs"),i=require("./component-C52VCES6.cjs"),l=require("./style-Dm74EPGE.cjs"),n=require("./style-fRZ6xrVp.cjs"),a=r.div`
+  width: max-content;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  width: 100%;
+  ${n.addSX};
+`,c=r.css`
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    ${e=>i.getFontSizeStyles(16,e.$isBold?500:400,e.theme.font.family,e.theme.font.lineHeight)};
+    color: ${e=>e.theme.colors.input[e.$genre].color.placeholder};
+    opacity: 1;
+  }
+  &:-ms-input-placeholder {
+    ${e=>i.getFontSizeStyles(16,e.$isBold?500:400,e.theme.font.family,e.theme.font.lineHeight)};
+    color: ${e=>e.theme.colors.input[e.$genre].color.placeholder};
+    opacity: 1;
+  }
+`,d=r.css`
+  ${e=>r.css`
+    background: ${e.theme.colors.input[e.$genre].background.rest};
+    border-color: ${e.theme.colors.input[e.$genre].border.rest};
+    color: ${e.theme.colors.input[e.$genre].color.rest};
+
+    &:active {
+      background: ${e.theme.colors.input[e.$genre].background.rest};
+      border-color: ${e.theme.colors.input[e.$genre].border.rest};
+      color: ${e.theme.colors.input[e.$genre].color.rest};
+    }
+    &:hover {
+      background: ${e.theme.colors.input[e.$genre].background.hover};
+      border-color: ${e.theme.colors.input[e.$genre].border.hover};
+      color: ${e.theme.colors.input[e.$genre].color.hover};
+    }
+    &:focus-visible {
+      border-color: ${e.theme.colors.input[e.$genre].border.rest};
+      background: ${e.theme.colors.input[e.$genre].background.rest};
+      color: ${e.theme.colors.input[e.$genre].color.rest};
+    }
+  `};
+`,u=r.css`
+  ${e=>h(o.KEY_SIZE_DATA[e.$size])};
+`,h=e=>r.css`
+  padding: ${e.padding-4}px ${e.padding}px ${e.padding-6}px ${e.padding}px;
+  border-radius: ${e.radius}px;
+`,$=r.css`
+  opacity: ${e=>e.$isDisabled?.5:1};
+`,p=r.css`
+  ${e=>e.$isTextAreaEffect&&r.css`
+      box-shadow: ${e.theme.effects.input};
+    `}
+`,g=r.css`
+  ${e=>!e.$isResize&&r.css`
+      resize: none;
+    `}
+`,x=r.css`
+  overflow-x: hidden;
+  width: 100% !important;
+  border: 1px solid;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-wrap: auto;
+
+  ${e=>i.getFontSizeStyles(16,e.$isBold?500:400,e.theme.font.family,e.theme.font.lineHeight)};
+
+  ${g};
+  ${u};
+  ${d};
+  ${c};
+  ${$};
+  ${p};
+  ${l.addTransitionWithoutSize};
+  ${l.addOutline};
+  ${s.addError};
+`,m=r.textarea`
+  ${x};
+`;exports.StyledTextArea=m,exports.StyledTextAreaCSS=x,exports.StyledTextAreaWrapper=a,exports.TextArea=i=>{const l=r.useTheme(),n=t.useCallback(e=>{var t,r;if(i.isNoSpaces){const r=e.replace(/\s+/g,"");null==(t=i.onChange)||t.call(i,r)}else null==(r=i.onChange)||r.call(i,e)},[i]),c=t.useRef(null),d=t.useCallback(e=>{if(c.current){const t=o.KEY_SIZE_DATA[i.size].height,r=Math.max(o.KEY_SIZE_DATA[i.size].height,e);c.current.style.height=`${t}px`;const s=c.current.scrollHeight;let l=e;l=i.isAutoHeight&&!i.height?Math.max(t,Math.min(s,r)):Math.max(t,e),c.current.style.height=`${l}px`,c.current.style.minHeight=`${t}px`,c.current.style.maxHeight=`${r}px`,c.current.scrollHeight>r?c.current.style.overflowY="auto":c.current.style.overflowY="hidden"}},[i.height,i.isAutoHeight,i.size]),u=t.useCallback(()=>{if(i.height)d(i.height);else if(i.maxRows){const e=l.font.sizeDefault.default*l.font.lineHeight,t=i.maxRows?e*i.maxRows:e;d(t+2*o.KEY_SIZE_DATA[i.size].padding-8)}else d(o.KEY_SIZE_DATA[i.size].height)},[d,i.height,i.maxRows,i.size,l.font.lineHeight,l.font.sizeDefault.default]);return t.useEffect(()=>{u()},[u,i.isAutoHeight,i.value]),e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(a,{$isTextAreaEffect:i.isTextAreaEffect,className:i.className,$isDisabled:i.isDisabled,$sx:i.sx,children:e.jsxRuntimeExports.jsx(m,{ref:c,$isResize:i.isResize,$error:i.error,$isTextAreaEffect:i.isTextAreaEffect,$isLoading:i.isLoading,$genre:i.genre,$size:i.size,$isBold:i.isBold,$isDisabled:i.isDisabled,disabled:i.isDisabled,readOnly:i.isReadOnly,required:i.isRequired,defaultValue:i.defaultValue,value:i.value??"",placeholder:i.placeholder,onChange:e=>n(e.target.value),onBlur:i.onBlur,onFocus:i.onFocus,name:i.name,id:i.id})}),(null==i?void 0:i.error)?e.jsxRuntimeExports.jsx(s.ErrorMessage,{...i.error,size:(null==i?void 0:i.error.size)??i.size}):null]})},exports.TextAreaIsTextAreaEffect=p,exports.TextAreaPlaceholder=c,exports.TextAreaSize=u,exports.TextAreaSizeConstructor=h;
+//# sourceMappingURL=component.styles-DpkFoWEh.cjs.map

package/build/component.styles-DpkFoWEh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-DpkFoWEh.cjs","sources":["../src/components/textarea/component.styles.ts","../src/components/textarea/component.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nimport { getFontSizeStyles } from '@local/components/typography'\nimport { addOutline, addTransitionWithoutSize } from '@local/styles/add'\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledTextAreaProps, StyledTextAreaWrapperProps } from '.'\n\n/****************************************** Wrapper *************************************************/\nexport const StyledTextAreaWrapper = styled.div<StyledTextAreaWrapperProps>`\n  width: max-content;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: column;\n  width: 100%;\n  ${addSX};\n`\n\n/****************************************** Placeholder *************************************************/\nexport const TextAreaPlaceholder = css<StyledTextAreaProps>`\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n  &:-ms-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n`\n\n/****************************************** Genre *************************************************/\nconst TextAreaGenre = css<StyledTextAreaProps>`\n  ${props => css`\n    background: ${props.theme.colors.input[props.$genre].background.rest};\n    border-color: ${props.theme.colors.input[props.$genre].border.rest};\n    color: ${props.theme.colors.input[props.$genre].color.rest};\n\n    &:active {\n      background: ${props.theme.colors.input[props.$genre].background.rest};\n      border-color: ${props.theme.colors.input[props.$genre].border.rest};\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n    &:hover {\n      background: ${props.theme.colors.input[props.$genre].background.hover};\n      border-color: ${props.theme.colors.input[props.$genre].border.hover};\n      color: ${props.theme.colors.input[props.$genre].color.hover};\n    }\n    &:focus-visible {\n      border-color: ${props.theme.colors.input[props.$genre].border.rest};\n      background: ${props.theme.colors.input[props.$genre].background.rest};\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n  `};\n`\n\n/****************************************** Size *************************************************/\nexport const TextAreaSize = css<StyledTextAreaProps>`\n  ${props => TextAreaSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const TextAreaSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  padding: ${props.padding - 4}px ${props.padding}px ${props.padding - 6}px ${props.padding}px;\n  border-radius: ${props.radius}px;\n`\n\n/****************************************** Hidden *************************************************/\nconst TextAreaHidden = css<StyledTextAreaProps>`\n  opacity: ${props => (props.$isDisabled ? 0.5 : 1)};\n`\n/****************************************** is PlaystationEffect *************************************************/\nexport const TextAreaIsTextAreaEffect = css<Pick<StyledTextAreaProps, '$isTextAreaEffect'>>`\n  ${props =>\n    props.$isTextAreaEffect &&\n    css`\n      box-shadow: ${props.theme.effects.input};\n    `}\n`\n\n/****************************************** is Resize *************************************************/\nconst TextAreaIsResize = css<Pick<StyledTextAreaProps, '$isResize'>>`\n  ${props =>\n    !props.$isResize &&\n    css`\n      resize: none;\n    `}\n`\n/****************************************** Default *************************************************/\nexport const StyledTextAreaCSS = css<StyledTextAreaProps>`\n  overflow-x: hidden;\n  width: 100% !important;\n  border: 1px solid;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-wrap: auto;\n\n  ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n\n  ${TextAreaIsResize};\n  ${TextAreaSize};\n  ${TextAreaGenre};\n  ${TextAreaPlaceholder};\n  ${TextAreaHidden};\n  ${TextAreaIsTextAreaEffect};\n  ${addTransitionWithoutSize};\n  ${addOutline};\n  ${addError};\n`\n\nexport const StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  ${StyledTextAreaCSS};\n`\n\n// /****************************************** Loading *************************************************/\n// const TextAreaStyledLoadingSize = css<StyledTextAreaProps>`\n//   ${props => TextAreaStyledLoadingConstructor(KEY_SIZE_DATA[props.$size])};\n// `\n// const TextAreaStyledLoadingConstructor = (props: IThemeSizePropertyDefault) => css`\n//   padding: ${props.padding - 6}px ${props.padding}px ${props.padding - 4}px ${props.padding}px;\n// `\n\n// export const TextAreaStyledLoading = styled(Loading)<StyledTextAreaProps>`\n//   ${TextAreaStyledLoadingSize};\n//   position: absolute;\n//   display: flex;\n//   align-items: center;\n//   right: 0px;\n//   box-sizing: content-box;\n//   backdrop-filter: blur(2px);\n//   mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 100%);\n// `\n","import { useCallback, useEffect, useRef } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport { ErrorMessage } from '@local/styles/error'\nimport { KEY_SIZE_DATA } from '@local/theme/theme'\n\nimport { StyledTextArea, StyledTextAreaWrapper, TextAreaProps } from '.'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const theme = useTheme()\n  const handleOnChange = useCallback(\n    (value: string) => {\n      if (props.isNoSpaces) {\n        const valueWithoutSpaces = value.replace(/\\s+/g, '')\n        props.onChange?.(valueWithoutSpaces)\n      } else {\n        props.onChange?.(value)\n      }\n    },\n    [props]\n  )\n\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleHeight = useCallback(\n    (contentHeight: number) => {\n      if (textareaRef.current) {\n        const minHeight = KEY_SIZE_DATA[props.size].height\n        const maxHeight = Math.max(KEY_SIZE_DATA[props.size].height, contentHeight)\n\n        textareaRef.current.style.height = `${minHeight}px`\n        const scrollHeight = textareaRef.current.scrollHeight\n\n        let newHeight = contentHeight\n        if (props.isAutoHeight && !props.height) {\n          newHeight = Math.max(minHeight, Math.min(scrollHeight, maxHeight))\n        } else {\n          newHeight = Math.max(minHeight, contentHeight)\n        }\n\n        textareaRef.current.style.height = `${newHeight}px`\n        textareaRef.current.style.minHeight = `${minHeight}px`\n        textareaRef.current.style.maxHeight = `${maxHeight}px`\n\n        if (textareaRef.current.scrollHeight > maxHeight) {\n          textareaRef.current.style.overflowY = 'auto'\n        } else {\n          textareaRef.current.style.overflowY = 'hidden'\n        }\n      }\n    },\n    [props.height, props.isAutoHeight, props.size]\n  )\n  const checkHeight = useCallback(() => {\n    if (props.height) {\n      handleHeight(props.height)\n    } else {\n      if (props.maxRows) {\n        const lineHeight = theme.font.sizeDefault.default * theme.font.lineHeight\n        const initialHeight = props.maxRows ? lineHeight * props.maxRows : lineHeight\n        handleHeight(initialHeight + KEY_SIZE_DATA[props.size].padding * 2 - 8)\n      } else {\n        handleHeight(KEY_SIZE_DATA[props.size].height)\n      }\n    }\n  }, [handleHeight, props.height, props.maxRows, props.size, theme.font.lineHeight, theme.font.sizeDefault.default])\n\n  useEffect(() => {\n    checkHeight()\n  }, [checkHeight, props.isAutoHeight, props.value])\n\n  return (\n    <>\n      <StyledTextAreaWrapper\n        $isTextAreaEffect={props.isTextAreaEffect}\n        className={props.className}\n        $isDisabled={props.isDisabled}\n        $sx={props.sx}\n      >\n        <StyledTextArea\n          ref={textareaRef}\n          $isResize={props.isResize}\n          $error={props.error}\n          $isTextAreaEffect={props.isTextAreaEffect}\n          $isLoading={props.isLoading}\n          $genre={props.genre}\n          $size={props.size}\n          $isBold={props.isBold}\n          $isDisabled={props.isDisabled}\n          disabled={props.isDisabled}\n          readOnly={props.isReadOnly}\n          required={props.isRequired}\n          defaultValue={props.defaultValue}\n          value={props.value ?? ''}\n          placeholder={props.placeholder}\n          onChange={event => handleOnChange(event.target.value)}\n          onBlur={props.onBlur}\n          onFocus={props.onFocus}\n          name={props.name}\n          id={props.id}\n        />\n        {/* {props.isLoading && (\n          <TextAreaStyledLoading\n            $genre={props.genre}\n            $size={props.size}\n            size={props.size}\n            color={theme.colors.input[props.genre].color.rest}\n          />\n        )} */}\n      </StyledTextAreaWrapper>\n      {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n    </>\n  )\n}\n"],"names":["StyledTextAreaWrapper","styled","div","addSX","TextAreaPlaceholder","css","props","getFontSizeStyles","$isBold","theme","font","family","lineHeight","colors","input","$genre","color","placeholder","TextAreaGenre","background","rest","border","hover","TextAreaSize","TextAreaSizeConstructor","KEY_SIZE_DATA","$size","padding","radius","TextAreaHidden","$isDisabled","TextAreaIsTextAreaEffect","$isTextAreaEffect","effects","TextAreaIsResize","$isResize","StyledTextAreaCSS","addTransitionWithoutSize","addOutline","addError","StyledTextArea","textarea","useTheme","handleOnChange","useCallback","value","isNoSpaces","valueWithoutSpaces","replace","_a","onChange","call","_b","textareaRef","useRef","handleHeight","contentHeight","current","minHeight","size","height","maxHeight","Math","max","style","scrollHeight","newHeight","isAutoHeight","min","overflowY","checkHeight","maxRows","sizeDefault","default","initialHeight","useEffect","jsxs","Fragment","children","jsx","isTextAreaEffect","className","isDisabled","$sx","sx","ref","isResize","$error","error","$isLoading","isLoading","genre","isBold","disabled","readOnly","isReadOnly","required","isRequired","defaultValue","event","target","onBlur","onFocus","name","id","ErrorMessage"],"mappings":"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"}

package/build/component.styles-DqsBDAEo.js

@@ -0,0 +1,202 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useCallback, useRef, useEffect } from "react";
+import styled, { useTheme, css } from "styled-components";
+import { b as ErrorMessage, a as addError } from "./style-DeAgDHyI.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-bN9HlSWE.js";
+import { g as getFontSizeStyles } from "./component-C2JFFh-k.js";
+import { c as addTransitionWithoutSize, f as addOutline } from "./style-CEGJOjRW.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+const TextArea = (props) => {
+  const theme = useTheme();
+  const handleOnChange = useCallback(
+    (value) => {
+      var _a, _b;
+      if (props.isNoSpaces) {
+        const valueWithoutSpaces = value.replace(/\s+/g, "");
+        (_a = props.onChange) == null ? void 0 : _a.call(props, valueWithoutSpaces);
+      } else {
+        (_b = props.onChange) == null ? void 0 : _b.call(props, value);
+      }
+    },
+    [props]
+  );
+  const textareaRef = useRef(null);
+  const handleHeight = useCallback(
+    (contentHeight) => {
+      if (textareaRef.current) {
+        const minHeight = KEY_SIZE_DATA[props.size].height;
+        const maxHeight = Math.max(KEY_SIZE_DATA[props.size].height, contentHeight);
+        textareaRef.current.style.height = `${minHeight}px`;
+        const scrollHeight = textareaRef.current.scrollHeight;
+        let newHeight = contentHeight;
+        if (props.isAutoHeight && !props.height) {
+          newHeight = Math.max(minHeight, Math.min(scrollHeight, maxHeight));
+        } else {
+          newHeight = Math.max(minHeight, contentHeight);
+        }
+        textareaRef.current.style.height = `${newHeight}px`;
+        textareaRef.current.style.minHeight = `${minHeight}px`;
+        textareaRef.current.style.maxHeight = `${maxHeight}px`;
+        if (textareaRef.current.scrollHeight > maxHeight) {
+          textareaRef.current.style.overflowY = "auto";
+        } else {
+          textareaRef.current.style.overflowY = "hidden";
+        }
+      }
+    },
+    [props.height, props.isAutoHeight, props.size]
+  );
+  const checkHeight = useCallback(() => {
+    if (props.height) {
+      handleHeight(props.height);
+    } else {
+      if (props.maxRows) {
+        const lineHeight = theme.font.sizeDefault.default * theme.font.lineHeight;
+        const initialHeight = props.maxRows ? lineHeight * props.maxRows : lineHeight;
+        handleHeight(initialHeight + KEY_SIZE_DATA[props.size].padding * 2 - 8);
+      } else {
+        handleHeight(KEY_SIZE_DATA[props.size].height);
+      }
+    }
+  }, [handleHeight, props.height, props.maxRows, props.size, theme.font.lineHeight, theme.font.sizeDefault.default]);
+  useEffect(() => {
+    checkHeight();
+  }, [checkHeight, props.isAutoHeight, props.value]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      StyledTextAreaWrapper,
+      {
+        $isTextAreaEffect: props.isTextAreaEffect,
+        className: props.className,
+        $isDisabled: props.isDisabled,
+        $sx: props.sx,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          StyledTextArea,
+          {
+            ref: textareaRef,
+            $isResize: props.isResize,
+            $error: props.error,
+            $isTextAreaEffect: props.isTextAreaEffect,
+            $isLoading: props.isLoading,
+            $genre: props.genre,
+            $size: props.size,
+            $isBold: props.isBold,
+            $isDisabled: props.isDisabled,
+            disabled: props.isDisabled,
+            readOnly: props.isReadOnly,
+            required: props.isRequired,
+            defaultValue: props.defaultValue,
+            value: props.value ?? "",
+            placeholder: props.placeholder,
+            onChange: (event) => handleOnChange(event.target.value),
+            onBlur: props.onBlur,
+            onFocus: props.onFocus,
+            name: props.name,
+            id: props.id
+          }
+        )
+      }
+    ),
+    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { ...props.error, size: (props == null ? void 0 : props.error.size) ?? props.size }) : null
+  ] });
+};
+const StyledTextAreaWrapper = styled.div`
+  width: max-content;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+  width: 100%;
+  ${addSX};
+`;
+const TextAreaPlaceholder = css`
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+    color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
+    opacity: 1;
+  }
+  &:-ms-input-placeholder {
+    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+    color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
+    opacity: 1;
+  }
+`;
+const TextAreaGenre = css`
+  ${(props) => css`
+    background: ${props.theme.colors.input[props.$genre].background.rest};
+    border-color: ${props.theme.colors.input[props.$genre].border.rest};
+    color: ${props.theme.colors.input[props.$genre].color.rest};
+
+    &:active {
+      background: ${props.theme.colors.input[props.$genre].background.rest};
+      border-color: ${props.theme.colors.input[props.$genre].border.rest};
+      color: ${props.theme.colors.input[props.$genre].color.rest};
+    }
+    &:hover {
+      background: ${props.theme.colors.input[props.$genre].background.hover};
+      border-color: ${props.theme.colors.input[props.$genre].border.hover};
+      color: ${props.theme.colors.input[props.$genre].color.hover};
+    }
+    &:focus-visible {
+      border-color: ${props.theme.colors.input[props.$genre].border.rest};
+      background: ${props.theme.colors.input[props.$genre].background.rest};
+      color: ${props.theme.colors.input[props.$genre].color.rest};
+    }
+  `};
+`;
+const TextAreaSize = css`
+  ${(props) => TextAreaSizeConstructor(KEY_SIZE_DATA[props.$size])};
+`;
+const TextAreaSizeConstructor = (props) => css`
+  padding: ${props.padding - 4}px ${props.padding}px ${props.padding - 6}px ${props.padding}px;
+  border-radius: ${props.radius}px;
+`;
+const TextAreaHidden = css`
+  opacity: ${(props) => props.$isDisabled ? 0.5 : 1};
+`;
+const TextAreaIsTextAreaEffect = css`
+  ${(props) => props.$isTextAreaEffect && css`
+      box-shadow: ${props.theme.effects.input};
+    `}
+`;
+const TextAreaIsResize = css`
+  ${(props) => !props.$isResize && css`
+      resize: none;
+    `}
+`;
+const StyledTextAreaCSS = css`
+  overflow-x: hidden;
+  width: 100% !important;
+  border: 1px solid;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-wrap: auto;
+
+  ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+
+  ${TextAreaIsResize};
+  ${TextAreaSize};
+  ${TextAreaGenre};
+  ${TextAreaPlaceholder};
+  ${TextAreaHidden};
+  ${TextAreaIsTextAreaEffect};
+  ${addTransitionWithoutSize};
+  ${addOutline};
+  ${addError};
+`;
+const StyledTextArea = styled.textarea`
+  ${StyledTextAreaCSS};
+`;
+export {
+  StyledTextAreaWrapper as S,
+  TextArea as T,
+  TextAreaPlaceholder as a,
+  TextAreaSize as b,
+  TextAreaSizeConstructor as c,
+  TextAreaIsTextAreaEffect as d,
+  StyledTextAreaCSS as e,
+  StyledTextArea as f
+};
+//# sourceMappingURL=component.styles-DqsBDAEo.js.map

package/build/component.styles-DqsBDAEo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-DqsBDAEo.js","sources":["../src/components/textarea/component.tsx","../src/components/textarea/component.styles.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport { ErrorMessage } from '@local/styles/error'\nimport { KEY_SIZE_DATA } from '@local/theme/theme'\n\nimport { StyledTextArea, StyledTextAreaWrapper, TextAreaProps } from '.'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const theme = useTheme()\n  const handleOnChange = useCallback(\n    (value: string) => {\n      if (props.isNoSpaces) {\n        const valueWithoutSpaces = value.replace(/\\s+/g, '')\n        props.onChange?.(valueWithoutSpaces)\n      } else {\n        props.onChange?.(value)\n      }\n    },\n    [props]\n  )\n\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleHeight = useCallback(\n    (contentHeight: number) => {\n      if (textareaRef.current) {\n        const minHeight = KEY_SIZE_DATA[props.size].height\n        const maxHeight = Math.max(KEY_SIZE_DATA[props.size].height, contentHeight)\n\n        textareaRef.current.style.height = `${minHeight}px`\n        const scrollHeight = textareaRef.current.scrollHeight\n\n        let newHeight = contentHeight\n        if (props.isAutoHeight && !props.height) {\n          newHeight = Math.max(minHeight, Math.min(scrollHeight, maxHeight))\n        } else {\n          newHeight = Math.max(minHeight, contentHeight)\n        }\n\n        textareaRef.current.style.height = `${newHeight}px`\n        textareaRef.current.style.minHeight = `${minHeight}px`\n        textareaRef.current.style.maxHeight = `${maxHeight}px`\n\n        if (textareaRef.current.scrollHeight > maxHeight) {\n          textareaRef.current.style.overflowY = 'auto'\n        } else {\n          textareaRef.current.style.overflowY = 'hidden'\n        }\n      }\n    },\n    [props.height, props.isAutoHeight, props.size]\n  )\n  const checkHeight = useCallback(() => {\n    if (props.height) {\n      handleHeight(props.height)\n    } else {\n      if (props.maxRows) {\n        const lineHeight = theme.font.sizeDefault.default * theme.font.lineHeight\n        const initialHeight = props.maxRows ? lineHeight * props.maxRows : lineHeight\n        handleHeight(initialHeight + KEY_SIZE_DATA[props.size].padding * 2 - 8)\n      } else {\n        handleHeight(KEY_SIZE_DATA[props.size].height)\n      }\n    }\n  }, [handleHeight, props.height, props.maxRows, props.size, theme.font.lineHeight, theme.font.sizeDefault.default])\n\n  useEffect(() => {\n    checkHeight()\n  }, [checkHeight, props.isAutoHeight, props.value])\n\n  return (\n    <>\n      <StyledTextAreaWrapper\n        $isTextAreaEffect={props.isTextAreaEffect}\n        className={props.className}\n        $isDisabled={props.isDisabled}\n        $sx={props.sx}\n      >\n        <StyledTextArea\n          ref={textareaRef}\n          $isResize={props.isResize}\n          $error={props.error}\n          $isTextAreaEffect={props.isTextAreaEffect}\n          $isLoading={props.isLoading}\n          $genre={props.genre}\n          $size={props.size}\n          $isBold={props.isBold}\n          $isDisabled={props.isDisabled}\n          disabled={props.isDisabled}\n          readOnly={props.isReadOnly}\n          required={props.isRequired}\n          defaultValue={props.defaultValue}\n          value={props.value ?? ''}\n          placeholder={props.placeholder}\n          onChange={event => handleOnChange(event.target.value)}\n          onBlur={props.onBlur}\n          onFocus={props.onFocus}\n          name={props.name}\n          id={props.id}\n        />\n        {/* {props.isLoading && (\n          <TextAreaStyledLoading\n            $genre={props.genre}\n            $size={props.size}\n            size={props.size}\n            color={theme.colors.input[props.genre].color.rest}\n          />\n        )} */}\n      </StyledTextAreaWrapper>\n      {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n    </>\n  )\n}\n","import styled, { css } from 'styled-components'\n\nimport { getFontSizeStyles } from '@local/components/typography'\nimport { addOutline, addTransitionWithoutSize } from '@local/styles/add'\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledTextAreaProps, StyledTextAreaWrapperProps } from '.'\n\n/****************************************** Wrapper *************************************************/\nexport const StyledTextAreaWrapper = styled.div<StyledTextAreaWrapperProps>`\n  width: max-content;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: column;\n  width: 100%;\n  ${addSX};\n`\n\n/****************************************** Placeholder *************************************************/\nexport const TextAreaPlaceholder = css<StyledTextAreaProps>`\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n  &:-ms-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n`\n\n/****************************************** Genre *************************************************/\nconst TextAreaGenre = css<StyledTextAreaProps>`\n  ${props => css`\n    background: ${props.theme.colors.input[props.$genre].background.rest};\n    border-color: ${props.theme.colors.input[props.$genre].border.rest};\n    color: ${props.theme.colors.input[props.$genre].color.rest};\n\n    &:active {\n      background: ${props.theme.colors.input[props.$genre].background.rest};\n      border-color: ${props.theme.colors.input[props.$genre].border.rest};\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n    &:hover {\n      background: ${props.theme.colors.input[props.$genre].background.hover};\n      border-color: ${props.theme.colors.input[props.$genre].border.hover};\n      color: ${props.theme.colors.input[props.$genre].color.hover};\n    }\n    &:focus-visible {\n      border-color: ${props.theme.colors.input[props.$genre].border.rest};\n      background: ${props.theme.colors.input[props.$genre].background.rest};\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n  `};\n`\n\n/****************************************** Size *************************************************/\nexport const TextAreaSize = css<StyledTextAreaProps>`\n  ${props => TextAreaSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const TextAreaSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  padding: ${props.padding - 4}px ${props.padding}px ${props.padding - 6}px ${props.padding}px;\n  border-radius: ${props.radius}px;\n`\n\n/****************************************** Hidden *************************************************/\nconst TextAreaHidden = css<StyledTextAreaProps>`\n  opacity: ${props => (props.$isDisabled ? 0.5 : 1)};\n`\n/****************************************** is PlaystationEffect *************************************************/\nexport const TextAreaIsTextAreaEffect = css<Pick<StyledTextAreaProps, '$isTextAreaEffect'>>`\n  ${props =>\n    props.$isTextAreaEffect &&\n    css`\n      box-shadow: ${props.theme.effects.input};\n    `}\n`\n\n/****************************************** is Resize *************************************************/\nconst TextAreaIsResize = css<Pick<StyledTextAreaProps, '$isResize'>>`\n  ${props =>\n    !props.$isResize &&\n    css`\n      resize: none;\n    `}\n`\n/****************************************** Default *************************************************/\nexport const StyledTextAreaCSS = css<StyledTextAreaProps>`\n  overflow-x: hidden;\n  width: 100% !important;\n  border: 1px solid;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-wrap: auto;\n\n  ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n\n  ${TextAreaIsResize};\n  ${TextAreaSize};\n  ${TextAreaGenre};\n  ${TextAreaPlaceholder};\n  ${TextAreaHidden};\n  ${TextAreaIsTextAreaEffect};\n  ${addTransitionWithoutSize};\n  ${addOutline};\n  ${addError};\n`\n\nexport const StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  ${StyledTextAreaCSS};\n`\n\n// /****************************************** Loading *************************************************/\n// const TextAreaStyledLoadingSize = css<StyledTextAreaProps>`\n//   ${props => TextAreaStyledLoadingConstructor(KEY_SIZE_DATA[props.$size])};\n// `\n// const TextAreaStyledLoadingConstructor = (props: IThemeSizePropertyDefault) => css`\n//   padding: ${props.padding - 6}px ${props.padding}px ${props.padding - 4}px ${props.padding}px;\n// `\n\n// export const TextAreaStyledLoading = styled(Loading)<StyledTextAreaProps>`\n//   ${TextAreaStyledLoadingSize};\n//   position: absolute;\n//   display: flex;\n//   align-items: center;\n//   right: 0px;\n//   box-sizing: content-box;\n//   backdrop-filter: blur(2px);\n//   mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 100%);\n// `\n"],"names":["jsxs","Fragment","jsx"],"mappings":"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"}