@activecollab/components 2.0.20 → 2.0.22

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

@@ -1 +1 @@
-{"version":3,"file":"CounterButton.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_CloseSmall","_Tooltip","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CounterButton","exports","forwardRef","_ref","ref","label","icon","active","counter","tooltipText","onClearAll","className","disabled","args","createElement","StyledCounterButtonWrapper","StyledCounterButton","_extends2","classNames","variant","$active","$selected","React","cloneElement","StyledCounterButtonLabel","color","weight","StyledBadge","isStandalone","dimension","value","Tooltip","title","popperTooltipClassName","StyledCounterButtonReset","onClick","displayName"],"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n  StyledBadge,\n  StyledCounterButton,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n  StyledCounterButtonWrapper,\n} from \"./Styles\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport interface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: (event?) => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n  /** Disabled state of a button */\n  disabled?: boolean;\n}\n\nexport const CounterButton = forwardRef<HTMLDivElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      disabled = false,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <StyledCounterButtonWrapper ref={ref} className={className}>\n        <StyledCounterButton\n          disabled={disabled}\n          aria-disabled={disabled}\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          variant=\"text gray\"\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className=\"c-counter-button__label\"\n              $active={counter > 0 || active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledBadge isStandalone={true} dimension={16} value={counter} />\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </StyledCounterButtonWrapper>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"mappings":"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"}
+{"version":3,"file":"CounterButton.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_CloseSmall","_Tooltip","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CounterButton","exports","forwardRef","_ref","ref","label","icon","active","counter","tooltipText","onClearAll","className","labelClassName","disabled","args","createElement","StyledCounterButtonWrapper","StyledCounterButton","_extends2","classNames","variant","$active","$selected","React","cloneElement","StyledCounterButtonLabel","color","weight","StyledBadge","isStandalone","dimension","value","Tooltip","title","popperTooltipClassName","StyledCounterButtonReset","onClick","displayName"],"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n  StyledBadge,\n  StyledCounterButton,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n  StyledCounterButtonWrapper,\n} from \"./Styles\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport interface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: (event?) => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n  /** Applies passed classes for label text */\n  labelClassName?: string;\n  /** Disabled state of a button */\n  disabled?: boolean;\n}\n\nexport const CounterButton = forwardRef<HTMLDivElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      labelClassName,\n      disabled = false,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <StyledCounterButtonWrapper ref={ref} className={className}>\n        <StyledCounterButton\n          disabled={disabled}\n          aria-disabled={disabled}\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          variant=\"text gray\"\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className={classNames(\"c-counter-button__label\", labelClassName)}\n              $active={counter > 0 || active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledBadge isStandalone={true} dimension={16} value={counter} />\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </StyledCounterButtonWrapper>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"mappings":"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"}

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

@@ -40,6 +40,8 @@ export interface FilterProps {
     icon?: ReactElement;
     /** Disabled state of the trigger. */
     disabled?: boolean;
+    /** Applies passed classes for label text */
+    className?: string;
 }
 export declare const Filter: FC<PropsWithChildren<FilterProps>>;
 //# sourceMappingURL=Filter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EACF,YAAY,EAKZ,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQ3C,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAGxE,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAyNrD,CAAC"}
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EACF,YAAY,EAKZ,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQ3C,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAGxE,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CA2NrD,CAAC"}

package/dist/esm/components/Filter/Filter.js

@@ -32,7 +32,8 @@ const Filter = _ref => {
     children,
     icon = /*#__PURE__*/_react.default.createElement(_Icons.FilterIcon, null),
     position = "bottom-end",
-    disabled = false
+    disabled = false,
+    className
   } = _ref;
   const [open, setOpen] = (0, _react.useState)(false);
   const [menu, setMenu] = (0, _react.useState)("index");
@@ -126,7 +127,8 @@ const Filter = _ref => {
       counter: count,
       tooltipText: clearAllText,
       onClearAll: handleClearAll,
-      disabled: disabled
+      disabled: disabled,
+      labelClassName: className
     })
   }, /*#__PURE__*/_react.default.createElement(_Transitions.ResizeTransition, {
     in: true

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_reactFocusLock","_StartMenu","_Styles","_Submenu","_Button","_CounterButton","_Icons","_Select","_Transitions","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Filter","_ref","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","icon","createElement","FilterIcon","position","disabled","open","setOpen","useState","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","useEffect","keys","length","handleOpen","useCallback","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","useMemo","c","values","forEach","entry","shouldRenderSubmenus","submenu","StyledMenu","onOpen","onClose","target","CounterButton","active","counter","tooltipText","onClearAll","ResizeTransition","in","style","SlideLeftRightTransition","direction","onEnter","onEntered","MoveFocusInside","StartMenu","onHeightChange","onItemClick","map","_ref2","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","rest","key","Submenu","onBack","indexPage","Select","_extends2","options","type","autoHeightMax","placeholder","keepSameOptionsOrder","Boolean","disableSearch","disabledInternalSort","StyledMenuFooter","Button","variant","size","onClick","exports"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, {\n  FC,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  PropsWithChildren,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\n\nimport { Placement } from \"@popperjs/core\";\n\nimport { StartMenu } from \"./StartMenu\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\nimport { Submenu } from \"./Submenu\";\nimport { Button } from \"../Button\";\nimport { CounterButton } from \"../CounterButton\";\nimport { FilterIcon } from \"../Icons\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\n\nexport type DataType = {\n  id: number | string;\n  title: string;\n  searchPlaceholder?: string;\n  disableInternalSort?: boolean;\n  submenu: Array<IOptionGroupProps | IOptionItemProps>;\n  isSingleSelect?: boolean;\n  defaultValue?: string;\n  emptyValue?: string;\n  emptyAction?: (e: string | undefined) => void;\n};\n\nexport type SelectedType = {\n  [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n  /** Data rendered in submenus */\n  data: Array<DataType>;\n  /** Selected data inside submenus */\n  selected?: SelectedType;\n  /** Main filter label */\n  label: string;\n  /** Filter width */\n  width?: number;\n  /** Text displayed for the tooltip of clear all button */\n  clearAllText: string;\n  /** Handler for changes on the filter */\n  onChange: (selected: SelectedType) => void;\n  /** Label for reset button inside submenu */\n  resetLabel?: string;\n  /** Text to show when search results are empty */\n  noResultText: string;\n  /** Text to show when there are no submenus to display */\n  emptyFilterText?: string;\n  /** Position of the dropped menu. */\n  position?: Placement;\n  /** Icon of the trigger element. */\n  icon?: ReactElement;\n  /** Disabled state of the trigger. */\n  disabled?: boolean;\n}\n\nexport const Filter: FC<PropsWithChildren<FilterProps>> = ({\n  data,\n  selected = {},\n  label,\n  clearAllText,\n  resetLabel = \"Reset\",\n  onChange,\n  width = 260,\n  noResultText,\n  emptyFilterText,\n  children,\n  icon = <FilterIcon />,\n  position = \"bottom-end\",\n  disabled = false,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [menu, setMenu] = useState<number | string>(\"index\");\n  const [isLeft, setIsLeft] = useState(true);\n  const [height, setHeight] = useState(0);\n  const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n  const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n  useEffect(() => {\n    if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n      setFilter(selected);\n    }\n  }, [selected, filter]);\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setOpen(false);\n    setMenu(\"index\");\n    setHeight(0);\n  }, []);\n\n  const handleHeight = useCallback((element) => {\n    setHeight(element?.offsetHeight ?? 0);\n  }, []);\n\n  const handleItemClick = useCallback((value) => {\n    setMenu(value);\n    setIsLeft(true);\n  }, []);\n\n  const setIndex = useCallback(() => {\n    setMenu(\"index\");\n    setIsLeft(false);\n  }, []);\n\n  const handleChange = useCallback(\n    (selectedArray) => {\n      let newFilters = {};\n      if (selectedArray.length) {\n        newFilters = {\n          ...filter,\n          [menu]: selectedArray,\n        };\n      } else {\n        newFilters = { ...filter };\n        delete newFilters[menu];\n      }\n      setFilter(newFilters);\n      onChange(newFilters);\n    },\n    [filter, menu, onChange]\n  );\n\n  const handleClearAll = useCallback(\n    (event) => {\n      event.stopPropagation();\n      setFilter({});\n      onChange({});\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(() => {\n    const newFilters = { ...filter };\n    delete newFilters[menu];\n    setFilter(newFilters);\n    onChange(newFilters);\n  }, [filter, menu, onChange]);\n\n  const count = useMemo(() => {\n    let c = 0;\n\n    Object.values(filter).forEach((entry) => {\n      if (typeof entry === \"string\") {\n        return (c += 1);\n      }\n\n      return (c += entry.length);\n    });\n    return c;\n  }, [filter]);\n\n  const shouldRenderSubmenus = useMemo(() => {\n    if (data.length === 0) {\n      return false;\n    }\n\n    for (const entry of data) {\n      if (entry.submenu?.length > 1) {\n        return true;\n      }\n    }\n\n    return false;\n  }, [data]);\n\n  return (\n    <StyledMenu\n      open={open}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      position={position}\n      target={\n        <CounterButton\n          active={open}\n          label={label}\n          icon={icon}\n          counter={count}\n          tooltipText={clearAllText}\n          onClearAll={handleClearAll}\n          disabled={disabled}\n        />\n      }\n    >\n      <ResizeTransition in>\n        <div style={{ height, width }}>\n          <SlideLeftRightTransition\n            in={menu === \"index\"}\n            direction={isLeft ? \"left\" : \"right\"}\n            onEnter={handleHeight}\n            onEntered={() => setEnteredMenu(\"index\")}\n          >\n            <MoveFocusInside>\n              <StartMenu\n                data={data}\n                selected={filter}\n                style={{ width }}\n                onHeightChange={setHeight}\n                onItemClick={handleItemClick}\n                shouldRenderSubmenus={shouldRenderSubmenus}\n                emptyFilterText={emptyFilterText}\n              >\n                {children}\n              </StartMenu>\n            </MoveFocusInside>\n          </SlideLeftRightTransition>\n          {shouldRenderSubmenus &&\n            data.map(\n              (\n                {\n                  id,\n                  title,\n                  submenu,\n                  searchPlaceholder,\n                  disableInternalSort,\n                  isSingleSelect,\n                  defaultValue,\n                  ...rest\n                }: DataType,\n                index: number\n              ) => (\n                <SlideLeftRightTransition\n                  key={`filter-submenu-${index}`}\n                  in={menu === id}\n                  direction={isLeft ? \"left\" : \"right\"}\n                  onEnter={handleHeight}\n                  onEntered={() => setEnteredMenu(id)}\n                >\n                  <Submenu\n                    title={title}\n                    onBack={setIndex}\n                    onHeightChange={setHeight}\n                    style={{ width }}\n                    indexPage={menu === \"index\"}\n                  >\n                    <MoveFocusInside disabled={enteredMenu !== id}>\n                      <Select\n                        options={submenu}\n                        selected={filter[id]}\n                        onChange={handleChange}\n                        type={isSingleSelect ? \"single\" : \"multiple\"}\n                        autoHeightMax={255}\n                        placeholder={searchPlaceholder}\n                        noResultText={noResultText}\n                        keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n                        disableSearch={Boolean(submenu.length <= 7)}\n                        disabledInternalSort={disableInternalSort}\n                        defaultValue={defaultValue}\n                        {...rest}\n                      />\n                      {filter[id]?.length ? (\n                        <StyledMenuFooter>\n                          <Button\n                            variant=\"text colored\"\n                            size=\"small\"\n                            onClick={handleReset}\n                          >\n                            {resetLabel}\n                          </Button>\n                        </StyledMenuFooter>\n                      ) : null}\n                    </MoveFocusInside>\n                  </Submenu>\n                </SlideLeftRightTransition>\n              )\n            )}\n        </div>\n      </ResizeTransition>\n    </StyledMenu>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_reactFocusLock","_StartMenu","_Styles","_Submenu","_Button","_CounterButton","_Icons","_Select","_Transitions","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Filter","_ref","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","icon","createElement","FilterIcon","position","disabled","className","open","setOpen","useState","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","useEffect","keys","length","handleOpen","useCallback","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","useMemo","c","values","forEach","entry","shouldRenderSubmenus","submenu","StyledMenu","onOpen","onClose","target","CounterButton","active","counter","tooltipText","onClearAll","labelClassName","ResizeTransition","in","style","SlideLeftRightTransition","direction","onEnter","onEntered","MoveFocusInside","StartMenu","onHeightChange","onItemClick","map","_ref2","index","id","title","searchPlaceholder","disableInternalSort","isSingleSelect","defaultValue","rest","key","Submenu","onBack","indexPage","Select","_extends2","options","type","autoHeightMax","placeholder","keepSameOptionsOrder","Boolean","disableSearch","disabledInternalSort","StyledMenuFooter","Button","variant","size","onClick","exports"],"sources":["../../../../src/components/Filter/Filter.tsx"],"sourcesContent":["import React, {\n  FC,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  PropsWithChildren,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\n\nimport { Placement } from \"@popperjs/core\";\n\nimport { StartMenu } from \"./StartMenu\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\nimport { Submenu } from \"./Submenu\";\nimport { Button } from \"../Button\";\nimport { CounterButton } from \"../CounterButton\";\nimport { FilterIcon } from \"../Icons\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\n\nexport type DataType = {\n  id: number | string;\n  title: string;\n  searchPlaceholder?: string;\n  disableInternalSort?: boolean;\n  submenu: Array<IOptionGroupProps | IOptionItemProps>;\n  isSingleSelect?: boolean;\n  defaultValue?: string;\n  emptyValue?: string;\n  emptyAction?: (e: string | undefined) => void;\n};\n\nexport type SelectedType = {\n  [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n  /** Data rendered in submenus */\n  data: Array<DataType>;\n  /** Selected data inside submenus */\n  selected?: SelectedType;\n  /** Main filter label */\n  label: string;\n  /** Filter width */\n  width?: number;\n  /** Text displayed for the tooltip of clear all button */\n  clearAllText: string;\n  /** Handler for changes on the filter */\n  onChange: (selected: SelectedType) => void;\n  /** Label for reset button inside submenu */\n  resetLabel?: string;\n  /** Text to show when search results are empty */\n  noResultText: string;\n  /** Text to show when there are no submenus to display */\n  emptyFilterText?: string;\n  /** Position of the dropped menu. */\n  position?: Placement;\n  /** Icon of the trigger element. */\n  icon?: ReactElement;\n  /** Disabled state of the trigger. */\n  disabled?: boolean;\n  /** Applies passed classes for label text */\n  className?: string;\n}\n\nexport const Filter: FC<PropsWithChildren<FilterProps>> = ({\n  data,\n  selected = {},\n  label,\n  clearAllText,\n  resetLabel = \"Reset\",\n  onChange,\n  width = 260,\n  noResultText,\n  emptyFilterText,\n  children,\n  icon = <FilterIcon />,\n  position = \"bottom-end\",\n  disabled = false,\n  className,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [menu, setMenu] = useState<number | string>(\"index\");\n  const [isLeft, setIsLeft] = useState(true);\n  const [height, setHeight] = useState(0);\n  const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n  const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n  useEffect(() => {\n    if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n      setFilter(selected);\n    }\n  }, [selected, filter]);\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setOpen(false);\n    setMenu(\"index\");\n    setHeight(0);\n  }, []);\n\n  const handleHeight = useCallback((element) => {\n    setHeight(element?.offsetHeight ?? 0);\n  }, []);\n\n  const handleItemClick = useCallback((value) => {\n    setMenu(value);\n    setIsLeft(true);\n  }, []);\n\n  const setIndex = useCallback(() => {\n    setMenu(\"index\");\n    setIsLeft(false);\n  }, []);\n\n  const handleChange = useCallback(\n    (selectedArray) => {\n      let newFilters = {};\n      if (selectedArray.length) {\n        newFilters = {\n          ...filter,\n          [menu]: selectedArray,\n        };\n      } else {\n        newFilters = { ...filter };\n        delete newFilters[menu];\n      }\n      setFilter(newFilters);\n      onChange(newFilters);\n    },\n    [filter, menu, onChange]\n  );\n\n  const handleClearAll = useCallback(\n    (event) => {\n      event.stopPropagation();\n      setFilter({});\n      onChange({});\n    },\n    [onChange]\n  );\n\n  const handleReset = useCallback(() => {\n    const newFilters = { ...filter };\n    delete newFilters[menu];\n    setFilter(newFilters);\n    onChange(newFilters);\n  }, [filter, menu, onChange]);\n\n  const count = useMemo(() => {\n    let c = 0;\n\n    Object.values(filter).forEach((entry) => {\n      if (typeof entry === \"string\") {\n        return (c += 1);\n      }\n\n      return (c += entry.length);\n    });\n    return c;\n  }, [filter]);\n\n  const shouldRenderSubmenus = useMemo(() => {\n    if (data.length === 0) {\n      return false;\n    }\n\n    for (const entry of data) {\n      if (entry.submenu?.length > 1) {\n        return true;\n      }\n    }\n\n    return false;\n  }, [data]);\n\n  return (\n    <StyledMenu\n      open={open}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      position={position}\n      target={\n        <CounterButton\n          active={open}\n          label={label}\n          icon={icon}\n          counter={count}\n          tooltipText={clearAllText}\n          onClearAll={handleClearAll}\n          disabled={disabled}\n          labelClassName={className}\n        />\n      }\n    >\n      <ResizeTransition in>\n        <div style={{ height, width }}>\n          <SlideLeftRightTransition\n            in={menu === \"index\"}\n            direction={isLeft ? \"left\" : \"right\"}\n            onEnter={handleHeight}\n            onEntered={() => setEnteredMenu(\"index\")}\n          >\n            <MoveFocusInside>\n              <StartMenu\n                data={data}\n                selected={filter}\n                style={{ width }}\n                onHeightChange={setHeight}\n                onItemClick={handleItemClick}\n                shouldRenderSubmenus={shouldRenderSubmenus}\n                emptyFilterText={emptyFilterText}\n              >\n                {children}\n              </StartMenu>\n            </MoveFocusInside>\n          </SlideLeftRightTransition>\n          {shouldRenderSubmenus &&\n            data.map(\n              (\n                {\n                  id,\n                  title,\n                  submenu,\n                  searchPlaceholder,\n                  disableInternalSort,\n                  isSingleSelect,\n                  defaultValue,\n                  ...rest\n                }: DataType,\n                index: number\n              ) => (\n                <SlideLeftRightTransition\n                  key={`filter-submenu-${index}`}\n                  in={menu === id}\n                  direction={isLeft ? \"left\" : \"right\"}\n                  onEnter={handleHeight}\n                  onEntered={() => setEnteredMenu(id)}\n                >\n                  <Submenu\n                    title={title}\n                    onBack={setIndex}\n                    onHeightChange={setHeight}\n                    style={{ width }}\n                    indexPage={menu === \"index\"}\n                  >\n                    <MoveFocusInside disabled={enteredMenu !== id}>\n                      <Select\n                        options={submenu}\n                        selected={filter[id]}\n                        onChange={handleChange}\n                        type={isSingleSelect ? \"single\" : \"multiple\"}\n                        autoHeightMax={255}\n                        placeholder={searchPlaceholder}\n                        noResultText={noResultText}\n                        keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n                        disableSearch={Boolean(submenu.length <= 7)}\n                        disabledInternalSort={disableInternalSort}\n                        defaultValue={defaultValue}\n                        {...rest}\n                      />\n                      {filter[id]?.length ? (\n                        <StyledMenuFooter>\n                          <Button\n                            variant=\"text colored\"\n                            size=\"small\"\n                            onClick={handleReset}\n                          >\n                            {resetLabel}\n                          </Button>\n                        </StyledMenuFooter>\n                      ) : null}\n                    </MoveFocusInside>\n                  </Submenu>\n                </SlideLeftRightTransition>\n              )\n            )}\n        </div>\n      </ResizeTransition>\n    </StyledMenu>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { InputProps } from "./Input";
+export interface InputPasswordProps extends Omit<InputProps, "type" | "size"> {
+    /** Input size */
+    size?: "regular" | "big" | "biggest";
+    /** Renders with shown text */
+    show?: boolean;
+    /** Removes show/hide control  */
+    hideControl?: boolean;
+    /** Removes strenght indicator  */
+    hideIndicator?: boolean;
+    /** Show tooltip text */
+    showTooltipText?: string;
+    /** Hide tooltip text */
+    hideTooltipText?: string;
+    /** Too short strength indicator text */
+    tooShortText?: string;
+    /** Weak strength indicator text */
+    weakText?: string;
+    /** Okay strength indicator text */
+    okayText?: string;
+    /** Good strength indicator text */
+    goodText?: string;
+    /** Strong strength indicator text */
+    strongText?: string;
+    /** Error message tooltip text */
+    errorMessage?: string;
+}
+export declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=InputPassword.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputPassword.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAwB5C,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3E,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IACrC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgFD,eAAO,MAAM,aAAa,6FAoIzB,CAAC"}

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

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputPassword = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Input = require("./Input");
+var _Styles = require("./Styles");
+var _utils = require("../../utils");
+var _IconButton = require("../IconButton");
+var _Icons = require("../Icons");
+var _Tooltip = require("../Tooltip");
+var _Typography = require("../Typography");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const transform = {
+  biggest: "big",
+  regular: "small",
+  big: "medium"
+};
+const StypedEyeIconSmall = (0, _styledComponents.default)(_Icons.EyeSmallIcon).withConfig({
+  displayName: "InputPassword__StypedEyeIconSmall",
+  componentId: "sc-v930fj-0"
+})(["", ""], {
+  "cursor": "pointer"
+});
+const StypedEyeOffIconSmall = (0, _styledComponents.default)(_Icons.EyeOffSmallIcon).withConfig({
+  displayName: "InputPassword__StypedEyeOffIconSmall",
+  componentId: "sc-v930fj-1"
+})(["", ""], {
+  "cursor": "pointer"
+});
+const StypedEyeIcon = (0, _styledComponents.default)(_Icons.EyeIcon).withConfig({
+  displayName: "InputPassword__StypedEyeIcon",
+  componentId: "sc-v930fj-2"
+})(["", ""], {
+  "cursor": "pointer"
+});
+const StypedEyeOffIcon = (0, _styledComponents.default)(_Icons.EyeOffIcon).withConfig({
+  displayName: "InputPassword__StypedEyeOffIcon",
+  componentId: "sc-v930fj-3"
+})(["", ""], {
+  "cursor": "pointer"
+});
+const StyledInfoIcon = (0, _styledComponents.default)(_Icons.InfoIcon).withConfig({
+  displayName: "InputPassword__StyledInfoIcon",
+  componentId: "sc-v930fj-4"
+})(["", ""], {
+  "marginRight": "0.25rem",
+  "cursor": "help",
+  "fill": "var(--red-alert)"
+});
+const StyledInfoSmallIcon = (0, _styledComponents.default)(_Icons.InfoSmallIcon).withConfig({
+  displayName: "InputPassword__StyledInfoSmallIcon",
+  componentId: "sc-v930fj-5"
+})(["", ""], {
+  "marginRight": "0.25rem",
+  "cursor": "pointer",
+  "fill": "var(--red-alert)"
+});
+const InputPasswordAdornment = _ref => {
+  let {
+    invalid,
+    errorMessage,
+    size,
+    hideControl,
+    showText,
+    hideTooltipText,
+    showTooltipText,
+    disabled,
+    toggleShow
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && errorMessage && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: errorMessage
+  }, size === "regular" ? /*#__PURE__*/_react.default.createElement(StyledInfoSmallIcon, null) : /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null)), !hideControl && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: showText ? hideTooltipText : showTooltipText
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    variant: "text gray",
+    type: "button",
+    size: transform[size],
+    disabled: disabled,
+    onClick: toggleShow
+  }, showText ? size === "regular" ? /*#__PURE__*/_react.default.createElement(StypedEyeOffIconSmall, null) : /*#__PURE__*/_react.default.createElement(StypedEyeOffIcon, null) : size === "regular" ? /*#__PURE__*/_react.default.createElement(StypedEyeIconSmall, null) : /*#__PURE__*/_react.default.createElement(StypedEyeIcon, null))));
+};
+const InputPassword = exports.InputPassword = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    size = "regular",
+    disabled,
+    show = false,
+    hideControl,
+    hideIndicator,
+    showTooltipText = "Show",
+    hideTooltipText = "Hide",
+    value: defaultValue,
+    tooShortText = "Too short",
+    weakText = "Weak",
+    okayText = "Okay",
+    goodText = "Good",
+    strongText = "Strong",
+    errorMessage,
+    invalid,
+    onChange,
+    ...rest
+  } = _ref2;
+  const inputRef = (0, _react.useRef)(null);
+  const handleRef = (0, _utils.useForkRef)(ref, inputRef);
+  const [showText, setShowText] = (0, _react.useState)(show);
+  const [strength, setStrength] = (0, _react.useState)(0);
+  const [strengthText, setStrengthText] = (0, _react.useState)(tooShortText);
+  const [value, setValue] = (0, _react.useState)(() => defaultValue);
+  const calculateStrength = (0, _react.useCallback)(passwordString => {
+    let score = 0;
+    if (passwordString.length < 4) {
+      score = 0;
+      setStrengthText(tooShortText);
+    } else if (passwordString.length === 4) {
+      score = 1;
+      setStrengthText(weakText);
+    } else if (passwordString.length >= 5 && passwordString.length < 10) {
+      score = 2;
+      setStrengthText(okayText);
+      if (/[A-Z!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(passwordString) && passwordString.length >= 5 && passwordString.length < 10) {
+        score = 3;
+        setStrengthText(goodText);
+      }
+    } else if (passwordString.length >= 10) {
+      score = 4;
+      setStrengthText(strongText);
+    }
+    setStrength(score);
+  }, [goodText, okayText, strongText, tooShortText, weakText]);
+  const handleChange = (0, _react.useCallback)(e => {
+    setValue(e.target.value);
+    calculateStrength(e.target.value);
+    typeof onChange === "function" && onChange(e.target.value);
+  }, [calculateStrength, onChange]);
+  const toggleShow = (0, _react.useCallback)(() => {
+    inputRef.current?.focus();
+    setShowText(prevState => !prevState);
+  }, []);
+  (0, _react.useEffect)(() => {
+    setShowText(show);
+  }, [show]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "fit-content",
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, (0, _extends2.default)({}, rest, {
+    ref: handleRef,
+    size: size,
+    value: value,
+    disabled: disabled,
+    type: showText ? "text" : "password",
+    onChange: handleChange,
+    invalid: invalid,
+    "data-testid": "InputPassword",
+    endAdornment: /*#__PURE__*/_react.default.createElement(InputPasswordAdornment, {
+      invalid: invalid,
+      errorMessage: errorMessage,
+      size: size,
+      hideControl: hideControl,
+      showText: showText,
+      hideTooltipText: hideTooltipText,
+      showTooltipText: showTooltipText,
+      disabled: disabled,
+      toggleShow: toggleShow
+    })
+  })), !hideIndicator && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledPasswordIndicatorWrapper, null, [...Array(4)].map((_, index) => /*#__PURE__*/_react.default.createElement(_Styles.StyledPasswordIndicator, {
+    key: index,
+    $strength: strength,
+    $index: index,
+    "data-testid": strength >= index + 1 ? "active" : ""
+  }))), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    align: "right",
+    color: "tertiary"
+  }, strengthText)));
+});
+InputPassword.displayName = "InputPassword";
+//# sourceMappingURL=InputPassword.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputPassword.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Input","_Styles","_utils","_IconButton","_Icons","_Tooltip","_Typography","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","transform","biggest","regular","big","StypedEyeIconSmall","styled","EyeSmallIcon","withConfig","displayName","componentId","StypedEyeOffIconSmall","EyeOffSmallIcon","StypedEyeIcon","EyeIcon","StypedEyeOffIcon","EyeOffIcon","StyledInfoIcon","InfoIcon","StyledInfoSmallIcon","InfoSmallIcon","InputPasswordAdornment","_ref","invalid","errorMessage","size","hideControl","showText","hideTooltipText","showTooltipText","disabled","toggleShow","createElement","Fragment","Tooltip","title","IconButton","variant","type","onClick","InputPassword","exports","forwardRef","_ref2","ref","show","hideIndicator","value","defaultValue","tooShortText","weakText","okayText","goodText","strongText","onChange","rest","inputRef","useRef","handleRef","useForkRef","setShowText","useState","strength","setStrength","strengthText","setStrengthText","setValue","calculateStrength","useCallback","passwordString","score","length","test","handleChange","target","current","focus","prevState","useEffect","style","width","display","flexDirection","Input","_extends2","endAdornment","StyledPasswordIndicatorWrapper","Array","map","_","index","StyledPasswordIndicator","key","$strength","$index","Caption1","align","color"],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Input, InputProps } from \"./Input\";\nimport {\n  StyledPasswordIndicator,\n  StyledPasswordIndicatorWrapper,\n} from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\nimport { IconButton } from \"../IconButton\";\nimport {\n  EyeIcon,\n  EyeOffIcon,\n  EyeOffSmallIcon,\n  EyeSmallIcon,\n  InfoIcon,\n  InfoSmallIcon,\n} from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Caption1 } from \"../Typography\";\n\nconst transform = {\n  biggest: \"big\",\n  regular: \"small\",\n  big: \"medium\",\n} as const;\n\nexport interface InputPasswordProps extends Omit<InputProps, \"type\" | \"size\"> {\n  /** Input size */\n  size?: \"regular\" | \"big\" | \"biggest\";\n  /** Renders with shown text */\n  show?: boolean;\n  /** Removes show/hide control  */\n  hideControl?: boolean;\n  /** Removes strenght indicator  */\n  hideIndicator?: boolean;\n  /** Show tooltip text */\n  showTooltipText?: string;\n  /** Hide tooltip text */\n  hideTooltipText?: string;\n  /** Too short strength indicator text */\n  tooShortText?: string;\n  /** Weak strength indicator text */\n  weakText?: string;\n  /** Okay strength indicator text */\n  okayText?: string;\n  /** Good strength indicator text */\n  goodText?: string;\n  /** Strong strength indicator text */\n  strongText?: string;\n  /** Error message tooltip text */\n  errorMessage?: string;\n}\n\nconst StypedEyeIconSmall = styled(EyeSmallIcon)`\n  ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeOffIconSmall = styled(EyeOffSmallIcon)`\n  ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeIcon = styled(EyeIcon)`\n  ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeOffIcon = styled(EyeOffIcon)`\n  ${tw`tw-cursor-pointer`}\n`;\nconst StyledInfoIcon = styled(InfoIcon)`\n  ${tw`tw-cursor-help tw-fill-alert tw-mr-1`}\n`;\n\nconst StyledInfoSmallIcon = styled(InfoSmallIcon)`\n  ${tw`tw-cursor-pointer tw-fill-alert tw-mr-1`}\n`;\n\ninterface InputPasswordAdornmentProps {\n  invalid?: boolean;\n  errorMessage?: string;\n  size: \"regular\" | \"big\" | \"biggest\";\n  hideControl?: boolean;\n  showText: boolean;\n  hideTooltipText: string;\n  showTooltipText: string;\n  disabled?: boolean;\n  toggleShow?: () => void;\n}\n\nconst InputPasswordAdornment = ({\n  invalid,\n  errorMessage,\n  size,\n  hideControl,\n  showText,\n  hideTooltipText,\n  showTooltipText,\n  disabled,\n  toggleShow,\n}: InputPasswordAdornmentProps) => (\n  <>\n    {invalid && errorMessage && (\n      <Tooltip title={errorMessage}>\n        {size === \"regular\" ? <StyledInfoSmallIcon /> : <StyledInfoIcon />}\n      </Tooltip>\n    )}\n    {!hideControl && (\n      <Tooltip title={showText ? hideTooltipText : showTooltipText}>\n        <IconButton\n          variant=\"text gray\"\n          type=\"button\"\n          size={transform[size] as \"big\" | \"small\" | \"medium\"}\n          disabled={disabled}\n          onClick={toggleShow}\n        >\n          {showText ? (\n            size === \"regular\" ? (\n              <StypedEyeOffIconSmall />\n            ) : (\n              <StypedEyeOffIcon />\n            )\n          ) : size === \"regular\" ? (\n            <StypedEyeIconSmall />\n          ) : (\n            <StypedEyeIcon />\n          )}\n        </IconButton>\n      </Tooltip>\n    )}\n  </>\n);\n\nexport const InputPassword = forwardRef<HTMLInputElement, InputPasswordProps>(\n  (\n    {\n      size = \"regular\",\n      disabled,\n      show = false,\n      hideControl,\n      hideIndicator,\n      showTooltipText = \"Show\",\n      hideTooltipText = \"Hide\",\n      value: defaultValue,\n      tooShortText = \"Too short\",\n      weakText = \"Weak\",\n      okayText = \"Okay\",\n      goodText = \"Good\",\n      strongText = \"Strong\",\n      errorMessage,\n      invalid,\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const handleRef = useForkRef(ref, inputRef);\n\n    const [showText, setShowText] = useState(show);\n    const [strength, setStrength] = useState(0);\n    const [strengthText, setStrengthText] = useState(tooShortText);\n    const [value, setValue] = useState(() => defaultValue as string);\n\n    const calculateStrength = useCallback(\n      (passwordString: string) => {\n        let score = 0;\n\n        if (passwordString.length < 4) {\n          score = 0;\n          setStrengthText(tooShortText);\n        } else if (passwordString.length === 4) {\n          score = 1;\n          setStrengthText(weakText);\n        } else if (passwordString.length >= 5 && passwordString.length < 10) {\n          score = 2;\n          setStrengthText(okayText);\n          if (\n            /[A-Z!@#$%^&*()_+\\-=[\\]{};':\"\\\\|,.<>/?]/.test(passwordString) &&\n            passwordString.length >= 5 &&\n            passwordString.length < 10\n          ) {\n            score = 3;\n            setStrengthText(goodText);\n          }\n        } else if (passwordString.length >= 10) {\n          score = 4;\n          setStrengthText(strongText);\n        }\n\n        setStrength(score);\n      },\n      [goodText, okayText, strongText, tooShortText, weakText]\n    );\n\n    const handleChange = useCallback(\n      (e) => {\n        setValue(e.target.value);\n        calculateStrength(e.target.value);\n        typeof onChange === \"function\" && onChange(e.target.value);\n      },\n      [calculateStrength, onChange]\n    );\n\n    const toggleShow = useCallback(() => {\n      inputRef.current?.focus();\n      setShowText((prevState) => !prevState);\n    }, []);\n\n    useEffect(() => {\n      setShowText(show);\n    }, [show]);\n\n    return (\n      <div\n        style={{\n          width: \"fit-content\",\n          display: \"flex\",\n          flexDirection: \"column\",\n        }}\n      >\n        <Input\n          {...rest}\n          ref={handleRef}\n          size={size}\n          value={value}\n          disabled={disabled}\n          type={showText ? \"text\" : \"password\"}\n          onChange={handleChange}\n          invalid={invalid}\n          data-testid=\"InputPassword\"\n          endAdornment={\n            <InputPasswordAdornment\n              invalid={invalid}\n              errorMessage={errorMessage}\n              size={size}\n              hideControl={hideControl}\n              showText={showText}\n              hideTooltipText={hideTooltipText}\n              showTooltipText={showTooltipText}\n              disabled={disabled}\n              toggleShow={toggleShow}\n            />\n          }\n        />\n        {!hideIndicator && (\n          <>\n            <StyledPasswordIndicatorWrapper>\n              {[...Array(4)].map((_, index) => (\n                <StyledPasswordIndicator\n                  key={index}\n                  $strength={strength}\n                  $index={index}\n                  data-testid={strength >= index + 1 ? \"active\" : \"\"}\n                />\n              ))}\n            </StyledPasswordIndicatorWrapper>\n            <Caption1 align=\"right\" color=\"tertiary\">\n              {strengthText}\n            </Caption1>\n          </>\n        )}\n      </div>\n    );\n  }\n);\n\nInputPassword.displayName = \"InputPassword\";\n"],"mappings":"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"}

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

@@ -11,5 +11,10 @@ interface StyledInputProps extends Pick<InputProps, "align"> {
     $loading?: boolean;
 }
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
+export declare const StyledPasswordIndicatorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPasswordIndicator: import("styled-components").StyledComponent<"div", any, {
+    $strength: number;
+    $index: number;
+}, never>;
 export {};
 //# sourceMappingURL=Styles.d.ts.map

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,MAAM,SAAS,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAgDvB,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,MAAM,SAAS,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAgDvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC"}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledInputWrapper = exports.StyledInput = void 0;
+exports.StyledPasswordIndicatorWrapper = exports.StyledPasswordIndicator = exports.StyledInputWrapper = exports.StyledInput = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _BoxSizingStyle = require("../BoxSizingStyle");
 var _FontStyle = require("../FontStyle");
@@ -19,4 +19,30 @@ const StyledInput = exports.StyledInput = _styledComponents.default.input.withCo
   componentId: "sc-ce8kcp-1"
 })(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", ""], props => props.$size === "big" && (0, _styledComponents.css)(["font-size:1rem;"]), props => props.$size === "biggest" && (0, _styledComponents.css)(["font-size:1.25rem;font-weight:700;"]), props => props.disabled && (0, _styledComponents.css)(["cursor:default;"]), props => props.$loading && (0, _styledComponents.css)(["cursor:progress;"]), props => props.align && (0, _styledComponents.css)(["text-align:", ";"], props.align));
 StyledInput.displayName = "StyledInput";
+const StyledPasswordIndicatorWrapper = exports.StyledPasswordIndicatorWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledPasswordIndicatorWrapper",
+  componentId: "sc-ce8kcp-2"
+})(["display:flex;gap:2px;margin-top:6px;margin-bottom:4px;"]);
+StyledPasswordIndicatorWrapper.displayName = "StyledPasswordIndicatorWrapper";
+const StyledPasswordIndicator = exports.StyledPasswordIndicator = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledPasswordIndicator",
+  componentId: "sc-ce8kcp-3"
+})(["width:100%;height:4px;border-radius:6px;background-color:", ";"], props => {
+  const {
+    $strength,
+    $index
+  } = props;
+  if ($strength === 0) {
+    return "var(--color-theme-300)";
+  } else if ($strength === 1) {
+    return $index === 0 ? "var(--red-alert)" : "var(--color-theme-300)";
+  } else if ($strength === 2) {
+    return $index < 2 ? "var(--color-orange)" : "var(--color-theme-300)";
+  } else if ($strength === 3) {
+    return $index < 3 ? "var(--color-blue-sky)" : "var(--color-theme-300)";
+  } else {
+    return "var(--color-sucess-green)";
+  }
+});
+StyledPasswordIndicator.displayName = "StyledPasswordIndicator";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInputWrapper","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","StyledInput","input","disabled","$loading","align"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\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  ${(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    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}\n\nexport const StyledInput = styled.input<StyledInputProps>`\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  &::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\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInputWrapper","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\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  ${(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    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}\n\nexport const StyledInput = styled.input<StyledInputProps>`\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  &::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\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"],"mappings":"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"}

package/dist/index.js

@@ -8373,7 +8373,7 @@
   });
   Tooltip.displayName = "Tooltip";
 
-  var _excluded$1b = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "disabled"];
+  var _excluded$1b = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "labelClassName", "disabled"];
   var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var label = _ref.label,
       icon = _ref.icon,
@@ -8383,6 +8383,7 @@
       tooltipText = _ref.tooltipText,
       onClearAll = _ref.onClearAll,
       className = _ref.className,
+      labelClassName = _ref.labelClassName,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       args = _objectWithoutProperties(_ref, _excluded$1b);
@@ -8404,7 +8405,7 @@
     }), label && /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonLabel, {
       color: "secondary",
       weight: "medium",
-      className: "c-counter-button__label",
+      className: classNames__default["default"]("c-counter-button__label", labelClassName),
       $active: counter > 0 || active
     }, label), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
       isStandalone: true,
@@ -11160,6 +11161,30 @@
     return props.align && styled.css(["text-align:", ";"], props.align);
   });
   StyledInput$2.displayName = "StyledInput";
+  var StyledPasswordIndicatorWrapper = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledPasswordIndicatorWrapper",
+    componentId: "sc-ce8kcp-2"
+  })(["display:flex;gap:2px;margin-top:6px;margin-bottom:4px;"]);
+  StyledPasswordIndicatorWrapper.displayName = "StyledPasswordIndicatorWrapper";
+  var StyledPasswordIndicator = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledPasswordIndicator",
+    componentId: "sc-ce8kcp-3"
+  })(["width:100%;height:4px;border-radius:6px;background-color:", ";"], function (props) {
+    var $strength = props.$strength,
+      $index = props.$index;
+    if ($strength === 0) {
+      return "var(--color-theme-300)";
+    } else if ($strength === 1) {
+      return $index === 0 ? "var(--red-alert)" : "var(--color-theme-300)";
+    } else if ($strength === 2) {
+      return $index < 2 ? "var(--color-orange)" : "var(--color-theme-300)";
+    } else if ($strength === 3) {
+      return $index < 3 ? "var(--color-blue-sky)" : "var(--color-theme-300)";
+    } else {
+      return "var(--color-sucess-green)";
+    }
+  });
+  StyledPasswordIndicator.displayName = "StyledPasswordIndicator";
 
   var _excluded$Q = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
@@ -17405,7 +17430,8 @@
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? "bottom-end" : _ref$position,
       _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      className = _ref.className;
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       open = _useState2[0],
@@ -17515,7 +17541,8 @@
         counter: count,
         tooltipText: clearAllText,
         onClearAll: handleClearAll,
-        disabled: disabled
+        disabled: disabled,
+        labelClassName: className
       })
     }, /*#__PURE__*/React__default["default"].createElement(ResizeTransition, {
       in: true