@activecollab/components 1.0.382 → 1.0.384

package/dist/cjs/components/Input/Input.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Styles = require("./Styles");
 var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
-var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
+var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "inputClassName", "wrapperClick"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,6 +31,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     startAdornment = _ref.startAdornment,
     endAdornment = _ref.endAdornment,
     wrapRef = _ref.wrapRef,
+    inputClassName = _ref.inputClassName,
     wrapperClick = _ref.wrapperClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var intInputRef = (0, _react.useRef)(null);
@@ -53,7 +54,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     type: type,
     $size: size,
     disabled: disabled,
-    className: "c-input",
+    className: (0, _classnames.default)("c-input", inputClassName),
     "aria-invalid": invalid,
     "data-form-type": "other"
   }, rest)), endAdornment);

package/dist/cjs/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","rest","intInputRef","useRef","handleRef","useForkRef","handleWrapperClick","useCallback","current","focus","classnames","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  wrapperClick?: () => void;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      wrapperClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className=\"c-input\"\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;AAAA;AAOA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezC,IAAMA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CACnC,gBAcEC,GAAG,EACA;EAAA,0BAbDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAClD,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAACf,GAAG,EAAEY,WAAW,CAAC;EAE9C,IAAMI,kBAAkB,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAAA;IAC3C,wBAAAL,WAAW,CAACM,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;IAC5BT,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,6BAAC,0BAAkB;IACjB,KAAK,EAAEL,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAkB,mBAAU,EAAC,iBAAiB,EAAEnB,SAAS,CAAE;IACpD,OAAO,EAAEe,kBAAmB;IAC5B,GAAG,EAAEP;EAAQ,GAEZF,cAAc,eACf,6BAAC,mBAAW;IACV,GAAG,EAAEO,SAAU;IACf,IAAI,EAAEX,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,IAAI,EACR,EACDH,YAAY,CACM;AAEzB,CAAC,CACF;AAAC;AAEFX,KAAK,CAACwB,WAAW,GAAG,OAAO"}
+{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","inputClassName","wrapperClick","rest","intInputRef","useRef","handleRef","useForkRef","handleWrapperClick","useCallback","current","focus","classnames","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  wrapperClick?: () => void;\n  inputClassName?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      inputClassName,\n      wrapperClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className={classnames(\"c-input\", inputClassName)}\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;AAAA;AAOA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBzC,IAAMA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAClD,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAChB,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAMI,kBAAkB,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAAA;IAC3C,wBAAAL,WAAW,CAACM,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;IAC5BT,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,6BAAC,0BAAkB;IACjB,KAAK,EAAEN,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAmB,mBAAU,EAAC,iBAAiB,EAAEpB,SAAS,CAAE;IACpD,OAAO,EAAEgB,kBAAmB;IAC5B,GAAG,EAAER;EAAQ,GAEZF,cAAc,eACf,6BAAC,mBAAW;IACV,GAAG,EAAEQ,SAAU;IACf,IAAI,EAAEZ,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAE,IAAAiB,mBAAU,EAAC,SAAS,EAAEX,cAAc,CAAE;IACjD,gBAAcJ,OAAQ;IACtB,kBAAe;EAAO,GAClBM,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAAC;AAEFX,KAAK,CAACyB,WAAW,GAAG,OAAO"}

package/dist/cjs/components/Input/InputHours.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputHours.js","names":["InputHours","React","forwardRef","ref","value","onCancel","onSave","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","validateTimeInput","incrementOnlySelected","minuteIncrement","className","rest","inputRef","useRef","handleRef","useForkRef","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport { HoursWrapper } from \"../HoursWrapper\";\nimport type { InputProps } from \"./Input\";\nimport type { EditableHoursProps } from \"../EditableHours\";\n\nexport interface InputHoursProps\n  extends Omit<EditableHoursProps, \"inputProps\" | \"weight\" | \"variant\">,\n    Omit<InputProps, \"value\"> {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n  (\n    {\n      value,\n      onCancel,\n      onSave,\n      onEnterKeyPress,\n      allowEmptyValue,\n      withLeadingZero = true,\n      validation = validateTimeInput,\n      incrementOnlySelected = false,\n      minuteIncrement = 1,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, inputRef);\n\n    return (\n      <HoursWrapper\n        value={value}\n        onCancel={onCancel}\n        onSave={onSave}\n        onEnterKeyPress={onEnterKeyPress}\n        incrementOnlySelected={incrementOnlySelected}\n        minuteIncrement={minuteIncrement}\n        allowEmptyValue={allowEmptyValue}\n        withLeadingZero={withLeadingZero}\n        validation={validation}\n      >\n        <Input\n          ref={handleRef}\n          className={className}\n          placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n          {...rest}\n        />\n      </HoursWrapper>\n    );\n  }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,IAAMA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CACxC,gBAcEC,GAAG,EACA;EAAA,IAbDC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,eAAe,QAAfA,eAAe;IACfC,eAAe,QAAfA,eAAe;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAGC,wBAAiB;IAAA,6BAC9BC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,4BAC7BC,eAAe;IAAfA,eAAe,qCAAG,CAAC;IACnBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAChB,GAAG,EAAEa,QAAQ,CAAC;EAE3C,oBACE,6BAAC,0BAAY;IACX,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAEC,QAAS;IACnB,MAAM,EAAEC,MAAO;IACf,eAAe,EAAEC,eAAgB;IACjC,qBAAqB,EAAEK,qBAAsB;IAC7C,eAAe,EAAEC,eAAgB;IACjC,eAAe,EAAEL,eAAgB;IACjC,eAAe,EAAEC,eAAgB;IACjC,UAAU,EAAEC;EAAW,gBAEvB,6BAAC,YAAK;IACJ,GAAG,EAAEQ,SAAU;IACf,SAAS,EAAEJ,SAAU;IACrB,WAAW,EAAEL,eAAe,GAAG,OAAO,GAAG;EAAO,GAC5CM,IAAI,EACR,CACW;AAEnB,CAAC,CACF;AAAC;AAEFf,UAAU,CAACoB,WAAW,GAAG,YAAY"}
+{"version":3,"file":"InputHours.js","names":["InputHours","React","forwardRef","ref","value","onCancel","onSave","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","validateTimeInput","incrementOnlySelected","minuteIncrement","className","rest","inputRef","useRef","handleRef","useForkRef","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport { HoursWrapper } from \"../HoursWrapper\";\nimport type { InputProps } from \"./Input\";\nimport type { EditableHoursProps } from \"../EditableHours\";\n\nexport interface InputHoursProps\n  extends Omit<EditableHoursProps, \"weight\" | \"variant\">,\n    Omit<InputProps, \"value\"> {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n  (\n    {\n      value,\n      onCancel,\n      onSave,\n      onEnterKeyPress,\n      allowEmptyValue,\n      withLeadingZero = true,\n      validation = validateTimeInput,\n      incrementOnlySelected = false,\n      minuteIncrement = 1,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, inputRef);\n\n    return (\n      <HoursWrapper\n        value={value}\n        onCancel={onCancel}\n        onSave={onSave}\n        onEnterKeyPress={onEnterKeyPress}\n        incrementOnlySelected={incrementOnlySelected}\n        minuteIncrement={minuteIncrement}\n        allowEmptyValue={allowEmptyValue}\n        withLeadingZero={withLeadingZero}\n        validation={validation}\n      >\n        <Input\n          ref={handleRef}\n          className={className}\n          placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n          {...rest}\n        />\n      </HoursWrapper>\n    );\n  }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,IAAMA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CACxC,gBAcEC,GAAG,EACA;EAAA,IAbDC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,eAAe,QAAfA,eAAe;IACfC,eAAe,QAAfA,eAAe;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAGC,wBAAiB;IAAA,6BAC9BC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,4BAC7BC,eAAe;IAAfA,eAAe,qCAAG,CAAC;IACnBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAChB,GAAG,EAAEa,QAAQ,CAAC;EAE3C,oBACE,6BAAC,0BAAY;IACX,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAEC,QAAS;IACnB,MAAM,EAAEC,MAAO;IACf,eAAe,EAAEC,eAAgB;IACjC,qBAAqB,EAAEK,qBAAsB;IAC7C,eAAe,EAAEC,eAAgB;IACjC,eAAe,EAAEL,eAAgB;IACjC,eAAe,EAAEC,eAAgB;IACjC,UAAU,EAAEC;EAAW,gBAEvB,6BAAC,YAAK;IACJ,GAAG,EAAEQ,SAAU;IACf,SAAS,EAAEJ,SAAU;IACrB,WAAW,EAAEL,eAAe,GAAG,OAAO,GAAG;EAAO,GAC5CM,IAAI,EACR,CACW;AAEnB,CAAC,CACF;AAAC;AAEFf,UAAU,CAACoB,WAAW,GAAG,YAAY"}

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

@@ -13,10 +13,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledInputWrapper = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledInputWrapper",
   componentId: "sc-ce8kcp-0"
-})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
+})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
   return props.$size === "small" && (0, _styledComponents.css)(["border-radius:6px;height:24px;"]);
 }, function (props) {
   return props.$size === "big" && (0, _styledComponents.css)(["height:40px;"]);
+}, function (props) {
+  return props.$size === "biggest" && (0, _styledComponents.css)(["height:48px;"]);
 }, function (props) {
   return props.$disabled && (0, _styledComponents.css)(["cursor:default;opacity:50%;"]);
 }, function (props) {
@@ -29,8 +31,10 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "Styles__StyledInput",
   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);}", " ", " ", ""], function (props) {
+})(["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);}", " ", " ", " ", ""], function (props) {
   return props.$size === "big" && (0, _styledComponents.css)(["font-size:1rem;"]);
+}, function (props) {
+  return props.$size === "biggest" && (0, _styledComponents.css)(["font-size:1.25rem;font-weight:500;"]);
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["cursor:default;"]);
 }, function (props) {

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\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.$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 {\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.disabled &&\n    css`\n      cursor: default;\n    `}\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;AAQlC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,sTAexCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,QACvBC,qBAAG,qCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,kCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChB,CAACH,KAAK,CAACI,QAAQ,QACfF,qBAAG,iEAKF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChBH,KAAK,CAACI,QAAQ,QACdF,qBAAG,qCAEF;AAAA,EACJ;AAAC;AAEFP,kBAAkB,CAACU,WAAW,GAAG,oBAAoB;AAO9C,IAAMC,WAAW,GAAGV,yBAAM,CAACW,KAAK;EAAA;EAAA;AAAA,oSAkBnC,UAACP,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,QACdN,qBAAG,sBAEF;AAAA,GACD,UAACF,KAAK;EAAA,OACNA,KAAK,CAACS,QAAQ,QACdP,qBAAG,uBAEF;AAAA,EACJ;AAAC;AAEFI,WAAW,CAACD,WAAW,GAAG,aAAa"}
+{"version":3,"file":"Styles.js","names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\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 {\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: 500;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;AAQlC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2TAexCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,QACvBC,qBAAG,qCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,mBAEF;AAAA,GAEC,UAACF,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,kCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChB,CAACH,KAAK,CAACI,QAAQ,QACfF,qBAAG,iEAKF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChBH,KAAK,CAACI,QAAQ,QACdF,qBAAG,qCAEF;AAAA,EACJ;AAAC;AAEFP,kBAAkB,CAACU,WAAW,GAAG,oBAAoB;AAO9C,IAAMC,WAAW,GAAGV,yBAAM,CAACW,KAAK;EAAA;EAAA;AAAA,ySAkBnC,UAACP,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,yCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,QACdN,qBAAG,sBAEF;AAAA,GACD,UAACF,KAAK;EAAA,OACNA,KAAK,CAACS,QAAQ,QACdP,qBAAG,uBAEF;AAAA,EACJ;AAAC;AAEFI,WAAW,CAACD,WAAW,GAAG,aAAa"}

package/dist/cjs/components/Input/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\";\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\" | \"biggest\";\n"],"mappings":""}

package/dist/cjs/components/Stopwatch/Stopwatch.js

@@ -0,0 +1,61 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Stopwatch = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Stopwatch = require("./Stopwatch.style");
+var _IconButton = require("../IconButton");
+var _Icons = require("../Icons");
+var _EditableHours = require("../EditableHours");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var Stopwatch = function Stopwatch() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_Stopwatch.StyledStopwatch, {
+    className: (0, _classnames.default)("", {
+      "tw-bg-red-100": isActive,
+      "tw-bg-gray-100": !isActive
+    })
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    onClick: function onClick() {
+      return setIsActive(!isActive);
+    },
+    className: (0, _classnames.default)("tw-shadow-none hover:tw-shadow-none", {
+      "tw-bg-red-400 hover:bg-red-500": isActive,
+      "tw-bg-indigo-400 hover:bg-indigo-400": !isActive
+    })
+  }, !isActive ? /*#__PURE__*/_react.default.createElement(_Icons.PlaySmallIcon, null) : /*#__PURE__*/_react.default.createElement(_Icons.PauseSmallIcon, null)), /*#__PURE__*/_react.default.createElement(_Stopwatch.StyledStopwatchCenterWrapper, null, /*#__PURE__*/_react.default.createElement(_EditableHours.EditableHours, {
+    value: "00:00"
+  }), /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    size: "small",
+    variant: "tertiary"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.NoteIcon, {
+    width: 20
+  })), true && /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    size: "small",
+    variant: "tertiary"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, {
+    width: 20
+  }))), /*#__PURE__*/_react.default.createElement(_Stopwatch.StyledTrigger, {
+    onClick: function onClick() {
+      return setIsActive(!isActive);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icons.UploadIcon, null)));
+};
+exports.Stopwatch = Stopwatch;
+Stopwatch.displayName = "Stopwatch";
+//# sourceMappingURL=Stopwatch.js.map

package/dist/cjs/components/Stopwatch/Stopwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stopwatch.js","names":["Stopwatch","useState","isActive","setIsActive","classNames","displayName"],"sources":["../../../../src/components/Stopwatch/Stopwatch.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  StyledStopwatch,\n  StyledStopwatchCenterWrapper,\n  StyledTrigger,\n} from \"./Stopwatch.style\";\nimport { IconButton } from \"../IconButton\";\nimport {\n  CloseIcon,\n  NoteIcon,\n  PauseSmallIcon,\n  PlaySmallIcon,\n  UploadIcon,\n} from \"../Icons\";\nimport { EditableHours } from \"../EditableHours\";\nimport classNames from \"classnames\";\n\nexport const Stopwatch = () => {\n  const [isActive, setIsActive] = useState<boolean>(false);\n\n  return (\n    <StyledStopwatch\n      className={classNames(\"\", {\n        \"tw-bg-red-100\": isActive,\n        \"tw-bg-gray-100\": !isActive,\n      })}\n    >\n      <IconButton\n        onClick={() => setIsActive(!isActive)}\n        className={classNames(\"tw-shadow-none hover:tw-shadow-none\", {\n          \"tw-bg-red-400 hover:bg-red-500\": isActive,\n          \"tw-bg-indigo-400 hover:bg-indigo-400\": !isActive,\n        })}\n      >\n        {!isActive ? <PlaySmallIcon /> : <PauseSmallIcon />}\n      </IconButton>\n      <StyledStopwatchCenterWrapper>\n        <EditableHours value=\"00:00\" />\n        <IconButton size=\"small\" variant=\"tertiary\">\n          <NoteIcon width={20} />\n        </IconButton>\n        {true && (\n          <IconButton size=\"small\" variant=\"tertiary\">\n            <CloseIcon width={20} />\n          </IconButton>\n        )}\n      </StyledStopwatchCenterWrapper>\n      <StyledTrigger onClick={() => setIsActive(!isActive)}>\n        <UploadIcon />\n      </StyledTrigger>\n    </StyledStopwatch>\n  );\n};\n\nStopwatch.displayName = \"Stopwatch\";\n"],"mappings":";;;;;;;AAAA;AACA;AAKA;AACA;AAOA;AACA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7B,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,QAAQ;IAAEC,WAAW;EAE5B,oBACE,6BAAC,0BAAe;IACd,SAAS,EAAE,IAAAC,mBAAU,EAAC,EAAE,EAAE;MACxB,eAAe,EAAEF,QAAQ;MACzB,gBAAgB,EAAE,CAACA;IACrB,CAAC;EAAE,gBAEH,6BAAC,sBAAU;IACT,OAAO,EAAE;MAAA,OAAMC,WAAW,CAAC,CAACD,QAAQ,CAAC;IAAA,CAAC;IACtC,SAAS,EAAE,IAAAE,mBAAU,EAAC,qCAAqC,EAAE;MAC3D,gCAAgC,EAAEF,QAAQ;MAC1C,sCAAsC,EAAE,CAACA;IAC3C,CAAC;EAAE,GAEF,CAACA,QAAQ,gBAAG,6BAAC,oBAAa,OAAG,gBAAG,6BAAC,qBAAc,OAAG,CACxC,eACb,6BAAC,uCAA4B,qBAC3B,6BAAC,4BAAa;IAAC,KAAK,EAAC;EAAO,EAAG,eAC/B,6BAAC,sBAAU;IAAC,IAAI,EAAC,OAAO;IAAC,OAAO,EAAC;EAAU,gBACzC,6BAAC,eAAQ;IAAC,KAAK,EAAE;EAAG,EAAG,CACZ,EACZ,IAAI,iBACH,6BAAC,sBAAU;IAAC,IAAI,EAAC,OAAO;IAAC,OAAO,EAAC;EAAU,gBACzC,6BAAC,gBAAS;IAAC,KAAK,EAAE;EAAG,EAAG,CAE3B,CAC4B,eAC/B,6BAAC,wBAAa;IAAC,OAAO,EAAE;MAAA,OAAMC,WAAW,CAAC,CAACD,QAAQ,CAAC;IAAA;EAAC,gBACnD,6BAAC,iBAAU,OAAG,CACA,CACA;AAEtB,CAAC;AAAC;AAEFF,SAAS,CAACK,WAAW,GAAG,WAAW"}

package/dist/cjs/components/Stopwatch/Stopwatch.style.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTrigger = exports.StyledStopwatchCenterWrapper = exports.StyledStopwatch = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Trigger = require("../Trigger");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var StyledStopwatch = _styledComponents.default.div.withConfig({
+  displayName: "Stopwatchstyle__StyledStopwatch",
+  componentId: "sc-h5uscw-0"
+})(["background-color:var(--color-theme-300);border-radius:21px;padding:4px;max-width:320px;height:34px;display:flex;align-items:center;"]);
+exports.StyledStopwatch = StyledStopwatch;
+var StyledStopwatchCenterWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Stopwatchstyle__StyledStopwatchCenterWrapper",
+  componentId: "sc-h5uscw-1"
+})(["flex-grow:1;display:flex;align-items:center;justify-content:center;"]);
+exports.StyledStopwatchCenterWrapper = StyledStopwatchCenterWrapper;
+var StyledTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
+  displayName: "Stopwatchstyle__StyledTrigger",
+  componentId: "sc-h5uscw-2"
+})(["width:32px;height:32px;border-radius:9999px;display:flex;justify-content:center;align-items:center;svg{fill:var(--color-theme-700);}&:hover{svg{fill:var(--color-theme-900);}}"]);
+exports.StyledTrigger = StyledTrigger;
+//# sourceMappingURL=Stopwatch.style.js.map

package/dist/cjs/components/Stopwatch/Stopwatch.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stopwatch.style.js","names":["StyledStopwatch","styled","div","StyledStopwatchCenterWrapper","StyledTrigger","Trigger"],"sources":["../../../../src/components/Stopwatch/Stopwatch.style.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { Trigger } from \"../Trigger\";\n\nexport const StyledStopwatch = styled.div`\n  background-color: var(--color-theme-300);\n  border-radius: 21px;\n  padding: 4px;\n  max-width: 320px;\n  height: 34px;\n\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledStopwatchCenterWrapper = styled.div`\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const StyledTrigger = styled(Trigger)`\n  width: 32px;\n  height: 32px;\n  border-radius: 9999px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    fill: var(--color-theme-700);\n  }\n\n  &:hover {\n    svg {\n      fill: var(--color-theme-900);\n    }\n  }\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAqC;AAE9B,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2IASxC;AAAC;AAEK,IAAMC,4BAA4B,GAAGF,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2EAKrD;AAAC;AAEK,IAAME,aAAa,GAAG,IAAAH,yBAAM,EAACI,gBAAO,CAAC;EAAA;EAAA;AAAA,sLAiB3C;AAAC"}

package/dist/cjs/components/Stopwatch/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Stopwatch = require("./Stopwatch");
+Object.keys(_Stopwatch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Stopwatch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Stopwatch[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Stopwatch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Stopwatch/index.ts"],"sourcesContent":["export * from \"./Stopwatch\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/cjs/utils/index.js

@@ -5,8 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   useForkRef: true,
-  useResizeObserver: true
+  useResizeObserver: true,
+  decimalToHours: true
 };
+Object.defineProperty(exports, "decimalToHours", {
+  enumerable: true,
+  get: function get() {
+    return _timeUtils.decimalToHours;
+  }
+});
 Object.defineProperty(exports, "useForkRef", {
   enumerable: true,
   get: function get() {
@@ -45,5 +52,6 @@ Object.keys(_validation).forEach(function (key) {
 });
 var _useForkRef = _interopRequireDefault(require("./useForkRef"));
 var _useResizeObserver = _interopRequireDefault(require("./useResizeObserver"));
+var _timeUtils = require("./timeUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/dist/cjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./layers\";\nexport * from \"./validation\";\nexport { default as useForkRef } from \"./useForkRef\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;AAAmE"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./layers\";\nexport * from \"./validation\";\nexport { default as useForkRef } from \"./useForkRef\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\nexport { decimalToHours } from \"./timeUtils\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;AACA;AAA6C"}

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

@@ -9,6 +9,7 @@ export interface InputProps extends Omit<InputNativeProps, "size" | "ref"> {
     endAdornment?: ReactNode;
     wrapRef?: Ref<HTMLDivElement>;
     wrapperClick?: () => void;
+    inputClassName?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,aAAK,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC;IACxE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,qFAkDjB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,aAAK,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC;IACxE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,qFAmDjB,CAAC"}

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
+var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "inputClassName", "wrapperClick"];
 import React, { useCallback, useRef } from "react";
 import classnames from "classnames";
 import { StyledInput, StyledInputWrapper } from "./Styles";
@@ -20,6 +20,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     startAdornment = _ref.startAdornment,
     endAdornment = _ref.endAdornment,
     wrapRef = _ref.wrapRef,
+    inputClassName = _ref.inputClassName,
     wrapperClick = _ref.wrapperClick,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var intInputRef = useRef(null);
@@ -42,7 +43,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type: type,
     $size: size,
     disabled: disabled,
-    className: "c-input",
+    className: classnames("c-input", inputClassName),
     "aria-invalid": invalid,
     "data-form-type": "other"
   }, rest)), endAdornment);

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  wrapperClick?: () => void;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      wrapperClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className=\"c-input\"\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAe/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,gBAcEC,GAAG,EACA;EAAA,0BAbDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMoB,SAAS,GAAGhB,UAAU,CAACG,GAAG,EAAEY,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGtB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAoB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BN,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEL,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEa,kBAAmB;IAC5B,GAAG,EAAEL;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEM,SAAU;IACf,IAAI,EAAEV,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,IAAI,EACR,EACDH,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACmB,WAAW,GAAG,OAAO"}
+{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","inputClassName","wrapperClick","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  wrapperClick?: () => void;\n  inputClassName?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      inputClassName,\n      wrapperClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className={classnames(\"c-input\", inputClassName)}\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAgB/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMqB,SAAS,GAAGjB,UAAU,CAACG,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGvB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAqB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BN,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEN,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEc,kBAAmB;IAC5B,GAAG,EAAEN;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEO,SAAU;IACf,IAAI,EAAEX,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAEV,UAAU,CAAC,SAAS,EAAEgB,cAAc,CAAE;IACjD,gBAAcJ,OAAQ;IACtB,kBAAe;EAAO,GAClBM,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACoB,WAAW,GAAG,OAAO"}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import type { InputProps } from "./Input";
 import type { EditableHoursProps } from "../EditableHours";
-export interface InputHoursProps extends Omit<EditableHoursProps, "inputProps" | "weight" | "variant">, Omit<InputProps, "value"> {
+export interface InputHoursProps extends Omit<EditableHoursProps, "weight" | "variant">, Omit<InputProps, "value"> {
 }
 export declare const InputHours: React.ForwardRefExoticComponent<InputHoursProps & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=InputHours.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputHours.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputHours.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,EACnE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;CAAG;AAEhC,eAAO,MAAM,UAAU,0FAyCtB,CAAC"}
+{"version":3,"file":"InputHours.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputHours.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,SAAS,CAAC,EACpD,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;CAAG;AAEhC,eAAO,MAAM,UAAU,0FAyCtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"InputHours.js","names":["React","useRef","useForkRef","validateTimeInput","Input","HoursWrapper","InputHours","forwardRef","ref","value","onCancel","onSave","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","incrementOnlySelected","minuteIncrement","className","rest","inputRef","handleRef","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport { HoursWrapper } from \"../HoursWrapper\";\nimport type { InputProps } from \"./Input\";\nimport type { EditableHoursProps } from \"../EditableHours\";\n\nexport interface InputHoursProps\n  extends Omit<EditableHoursProps, \"inputProps\" | \"weight\" | \"variant\">,\n    Omit<InputProps, \"value\"> {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n  (\n    {\n      value,\n      onCancel,\n      onSave,\n      onEnterKeyPress,\n      allowEmptyValue,\n      withLeadingZero = true,\n      validation = validateTimeInput,\n      incrementOnlySelected = false,\n      minuteIncrement = 1,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, inputRef);\n\n    return (\n      <HoursWrapper\n        value={value}\n        onCancel={onCancel}\n        onSave={onSave}\n        onEnterKeyPress={onEnterKeyPress}\n        incrementOnlySelected={incrementOnlySelected}\n        minuteIncrement={minuteIncrement}\n        allowEmptyValue={allowEmptyValue}\n        withLeadingZero={withLeadingZero}\n        validation={validation}\n      >\n        <Input\n          ref={handleRef}\n          className={className}\n          placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n          {...rest}\n        />\n      </HoursWrapper>\n    );\n  }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,OAAO,IAAMC,UAAU,gBAAGN,KAAK,CAACO,UAAU,CACxC,gBAcEC,GAAG,EACA;EAAA,IAbDC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,eAAe,QAAfA,eAAe;IACfC,eAAe,QAAfA,eAAe;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAGZ,iBAAiB;IAAA,6BAC9Ba,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,4BAC7BC,eAAe;IAAfA,eAAe,qCAAG,CAAC;IACnBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,QAAQ,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAC/C,IAAMoB,SAAS,GAAGnB,UAAU,CAACM,GAAG,EAAEY,QAAQ,CAAC;EAE3C,oBACE,oBAAC,YAAY;IACX,KAAK,EAAEX,KAAM;IACb,QAAQ,EAAEC,QAAS;IACnB,MAAM,EAAEC,MAAO;IACf,eAAe,EAAEC,eAAgB;IACjC,qBAAqB,EAAEI,qBAAsB;IAC7C,eAAe,EAAEC,eAAgB;IACjC,eAAe,EAAEJ,eAAgB;IACjC,eAAe,EAAEC,eAAgB;IACjC,UAAU,EAAEC;EAAW,gBAEvB,oBAAC,KAAK;IACJ,GAAG,EAAEM,SAAU;IACf,SAAS,EAAEH,SAAU;IACrB,WAAW,EAAEJ,eAAe,GAAG,OAAO,GAAG;EAAO,GAC5CK,IAAI,EACR,CACW;AAEnB,CAAC,CACF;AAEDb,UAAU,CAACgB,WAAW,GAAG,YAAY"}
+{"version":3,"file":"InputHours.js","names":["React","useRef","useForkRef","validateTimeInput","Input","HoursWrapper","InputHours","forwardRef","ref","value","onCancel","onSave","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","incrementOnlySelected","minuteIncrement","className","rest","inputRef","handleRef","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport { HoursWrapper } from \"../HoursWrapper\";\nimport type { InputProps } from \"./Input\";\nimport type { EditableHoursProps } from \"../EditableHours\";\n\nexport interface InputHoursProps\n  extends Omit<EditableHoursProps, \"weight\" | \"variant\">,\n    Omit<InputProps, \"value\"> {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n  (\n    {\n      value,\n      onCancel,\n      onSave,\n      onEnterKeyPress,\n      allowEmptyValue,\n      withLeadingZero = true,\n      validation = validateTimeInput,\n      incrementOnlySelected = false,\n      minuteIncrement = 1,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, inputRef);\n\n    return (\n      <HoursWrapper\n        value={value}\n        onCancel={onCancel}\n        onSave={onSave}\n        onEnterKeyPress={onEnterKeyPress}\n        incrementOnlySelected={incrementOnlySelected}\n        minuteIncrement={minuteIncrement}\n        allowEmptyValue={allowEmptyValue}\n        withLeadingZero={withLeadingZero}\n        validation={validation}\n      >\n        <Input\n          ref={handleRef}\n          className={className}\n          placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n          {...rest}\n        />\n      </HoursWrapper>\n    );\n  }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,OAAO,IAAMC,UAAU,gBAAGN,KAAK,CAACO,UAAU,CACxC,gBAcEC,GAAG,EACA;EAAA,IAbDC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,eAAe,QAAfA,eAAe;IACfC,eAAe,QAAfA,eAAe;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAGZ,iBAAiB;IAAA,6BAC9Ba,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,4BAC7BC,eAAe;IAAfA,eAAe,qCAAG,CAAC;IACnBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,QAAQ,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAC/C,IAAMoB,SAAS,GAAGnB,UAAU,CAACM,GAAG,EAAEY,QAAQ,CAAC;EAE3C,oBACE,oBAAC,YAAY;IACX,KAAK,EAAEX,KAAM;IACb,QAAQ,EAAEC,QAAS;IACnB,MAAM,EAAEC,MAAO;IACf,eAAe,EAAEC,eAAgB;IACjC,qBAAqB,EAAEI,qBAAsB;IAC7C,eAAe,EAAEC,eAAgB;IACjC,eAAe,EAAEJ,eAAgB;IACjC,eAAe,EAAEC,eAAgB;IACjC,UAAU,EAAEC;EAAW,gBAEvB,oBAAC,KAAK;IACJ,GAAG,EAAEM,SAAU;IACf,SAAS,EAAEH,SAAU;IACrB,WAAW,EAAEJ,eAAe,GAAG,OAAO,GAAG;EAAO,GAC5CK,IAAI,EACR,CACW;AAEnB,CAAC,CACF;AAEDb,UAAU,CAACgB,WAAW,GAAG,YAAY"}

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":"AACA,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,yFAsD9B,CAAC;AAIF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAkCvB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,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,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAyCvB,CAAC"}

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

@@ -4,10 +4,12 @@ import { FontStyle } from "../FontStyle";
 export var StyledInputWrapper = styled.div.withConfig({
   displayName: "Styles__StyledInputWrapper",
   componentId: "sc-ce8kcp-0"
-})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
   return props.$size === "small" && css(["border-radius:6px;height:24px;"]);
 }, function (props) {
   return props.$size === "big" && css(["height:40px;"]);
+}, function (props) {
+  return props.$size === "biggest" && css(["height:48px;"]);
 }, function (props) {
   return props.$disabled && css(["cursor:default;opacity:50%;"]);
 }, function (props) {
@@ -19,8 +21,10 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
 export var StyledInput = styled.input.withConfig({
   displayName: "Styles__StyledInput",
   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);}", " ", " ", ""], function (props) {
+})(["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);}", " ", " ", " ", ""], function (props) {
   return props.$size === "big" && css(["font-size:1rem;"]);
+}, function (props) {
+  return props.$size === "biggest" && css(["font-size:1.25rem;font-weight:500;"]);
 }, function (props) {
   return props.disabled && css(["cursor:default;"]);
 }, function (props) {

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\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.$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 {\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.disabled &&\n    css`\n      cursor: default;\n    `}\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAQxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,sTAexCF,SAAS,EACTD,cAAc,EAEd,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBN,GAAG,oCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfP,GAAG,iCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChB,CAACF,KAAK,CAACG,QAAQ,IACfR,GAAG,gEAKF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChBF,KAAK,CAACG,QAAQ,IACdR,GAAG,oCAEF;AAAA,EACJ;AAEDG,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAOrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,oSAkBnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,qBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,IACdZ,GAAG,qBAEF;AAAA,GACD,UAACK,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdb,GAAG,sBAEF;AAAA,EACJ;AAEDU,WAAW,CAACD,WAAW,GAAG,aAAa"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\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 {\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: 500;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAQxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,2TAexCF,SAAS,EACTD,cAAc,EAEd,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBN,GAAG,oCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,kBAEF;AAAA,GAEC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfP,GAAG,iCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChB,CAACF,KAAK,CAACG,QAAQ,IACfR,GAAG,gEAKF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChBF,KAAK,CAACG,QAAQ,IACdR,GAAG,oCAEF;AAAA,EACJ;AAEDG,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAOrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,ySAkBnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,qBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,wCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,IACdZ,GAAG,qBAEF;AAAA,GACD,UAACK,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdb,GAAG,sBAEF;AAAA,EACJ;AAEDU,WAAW,CAACD,WAAW,GAAG,aAAa"}

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

@@ -1,2 +1,2 @@
-export declare type InputSize = "small" | "regular" | "big";
+export declare type InputSize = "small" | "regular" | "big" | "biggest";
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\";\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\" | \"biggest\";\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Stopwatch: {
+    (): JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Stopwatch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stopwatch.d.ts","sourceRoot":"","sources":["../../../../src/components/Stopwatch/Stopwatch.tsx"],"names":[],"mappings":";AAiBA,eAAO,MAAM,SAAS;;;CAmCrB,CAAC"}

package/dist/esm/components/Stopwatch/Stopwatch.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { StyledStopwatch, StyledStopwatchCenterWrapper, StyledTrigger } from "./Stopwatch.style";
+import { IconButton } from "../IconButton";
+import { CloseIcon, NoteIcon, PauseSmallIcon, PlaySmallIcon, UploadIcon } from "../Icons";
+import { EditableHours } from "../EditableHours";
+import classNames from "classnames";
+export var Stopwatch = function Stopwatch() {
+  var _useState = useState(false),
+    isActive = _useState[0],
+    setIsActive = _useState[1];
+  return /*#__PURE__*/React.createElement(StyledStopwatch, {
+    className: classNames("", {
+      "tw-bg-red-100": isActive,
+      "tw-bg-gray-100": !isActive
+    })
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: function onClick() {
+      return setIsActive(!isActive);
+    },
+    className: classNames("tw-shadow-none hover:tw-shadow-none", {
+      "tw-bg-red-400 hover:bg-red-500": isActive,
+      "tw-bg-indigo-400 hover:bg-indigo-400": !isActive
+    })
+  }, !isActive ? /*#__PURE__*/React.createElement(PlaySmallIcon, null) : /*#__PURE__*/React.createElement(PauseSmallIcon, null)), /*#__PURE__*/React.createElement(StyledStopwatchCenterWrapper, null, /*#__PURE__*/React.createElement(EditableHours, {
+    value: "00:00"
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    variant: "tertiary"
+  }, /*#__PURE__*/React.createElement(NoteIcon, {
+    width: 20
+  })), true && /*#__PURE__*/React.createElement(IconButton, {
+    size: "small",
+    variant: "tertiary"
+  }, /*#__PURE__*/React.createElement(CloseIcon, {
+    width: 20
+  }))), /*#__PURE__*/React.createElement(StyledTrigger, {
+    onClick: function onClick() {
+      return setIsActive(!isActive);
+    }
+  }, /*#__PURE__*/React.createElement(UploadIcon, null)));
+};
+Stopwatch.displayName = "Stopwatch";
+//# sourceMappingURL=Stopwatch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stopwatch.js","names":["React","useState","StyledStopwatch","StyledStopwatchCenterWrapper","StyledTrigger","IconButton","CloseIcon","NoteIcon","PauseSmallIcon","PlaySmallIcon","UploadIcon","EditableHours","classNames","Stopwatch","isActive","setIsActive","displayName"],"sources":["../../../../src/components/Stopwatch/Stopwatch.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  StyledStopwatch,\n  StyledStopwatchCenterWrapper,\n  StyledTrigger,\n} from \"./Stopwatch.style\";\nimport { IconButton } from \"../IconButton\";\nimport {\n  CloseIcon,\n  NoteIcon,\n  PauseSmallIcon,\n  PlaySmallIcon,\n  UploadIcon,\n} from \"../Icons\";\nimport { EditableHours } from \"../EditableHours\";\nimport classNames from \"classnames\";\n\nexport const Stopwatch = () => {\n  const [isActive, setIsActive] = useState<boolean>(false);\n\n  return (\n    <StyledStopwatch\n      className={classNames(\"\", {\n        \"tw-bg-red-100\": isActive,\n        \"tw-bg-gray-100\": !isActive,\n      })}\n    >\n      <IconButton\n        onClick={() => setIsActive(!isActive)}\n        className={classNames(\"tw-shadow-none hover:tw-shadow-none\", {\n          \"tw-bg-red-400 hover:bg-red-500\": isActive,\n          \"tw-bg-indigo-400 hover:bg-indigo-400\": !isActive,\n        })}\n      >\n        {!isActive ? <PlaySmallIcon /> : <PauseSmallIcon />}\n      </IconButton>\n      <StyledStopwatchCenterWrapper>\n        <EditableHours value=\"00:00\" />\n        <IconButton size=\"small\" variant=\"tertiary\">\n          <NoteIcon width={20} />\n        </IconButton>\n        {true && (\n          <IconButton size=\"small\" variant=\"tertiary\">\n            <CloseIcon width={20} />\n          </IconButton>\n        )}\n      </StyledStopwatchCenterWrapper>\n      <StyledTrigger onClick={() => setIsActive(!isActive)}>\n        <UploadIcon />\n      </StyledTrigger>\n    </StyledStopwatch>\n  );\n};\n\nStopwatch.displayName = \"Stopwatch\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SACEC,eAAe,EACfC,4BAA4B,EAC5BC,aAAa,QACR,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,eAAe;AAC1C,SACEC,SAAS,EACTC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,UAAU,QACL,UAAU;AACjB,SAASC,aAAa,QAAQ,kBAAkB;AAChD,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAgCZ,QAAQ,CAAU,KAAK,CAAC;IAAjDa,QAAQ;IAAEC,WAAW;EAE5B,oBACE,oBAAC,eAAe;IACd,SAAS,EAAEH,UAAU,CAAC,EAAE,EAAE;MACxB,eAAe,EAAEE,QAAQ;MACzB,gBAAgB,EAAE,CAACA;IACrB,CAAC;EAAE,gBAEH,oBAAC,UAAU;IACT,OAAO,EAAE;MAAA,OAAMC,WAAW,CAAC,CAACD,QAAQ,CAAC;IAAA,CAAC;IACtC,SAAS,EAAEF,UAAU,CAAC,qCAAqC,EAAE;MAC3D,gCAAgC,EAAEE,QAAQ;MAC1C,sCAAsC,EAAE,CAACA;IAC3C,CAAC;EAAE,GAEF,CAACA,QAAQ,gBAAG,oBAAC,aAAa,OAAG,gBAAG,oBAAC,cAAc,OAAG,CACxC,eACb,oBAAC,4BAA4B,qBAC3B,oBAAC,aAAa;IAAC,KAAK,EAAC;EAAO,EAAG,eAC/B,oBAAC,UAAU;IAAC,IAAI,EAAC,OAAO;IAAC,OAAO,EAAC;EAAU,gBACzC,oBAAC,QAAQ;IAAC,KAAK,EAAE;EAAG,EAAG,CACZ,EACZ,IAAI,iBACH,oBAAC,UAAU;IAAC,IAAI,EAAC,OAAO;IAAC,OAAO,EAAC;EAAU,gBACzC,oBAAC,SAAS;IAAC,KAAK,EAAE;EAAG,EAAG,CAE3B,CAC4B,eAC/B,oBAAC,aAAa;IAAC,OAAO,EAAE;MAAA,OAAMC,WAAW,CAAC,CAACD,QAAQ,CAAC;IAAA;EAAC,gBACnD,oBAAC,UAAU,OAAG,CACA,CACA;AAEtB,CAAC;AAEDD,SAAS,CAACG,WAAW,GAAG,WAAW"}

package/dist/esm/components/Stopwatch/Stopwatch.style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledStopwatch: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledStopwatchCenterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | "slot" | "style" | "title" | "key" | "css" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cs" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw"> & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+//# sourceMappingURL=Stopwatch.style.d.ts.map

package/dist/esm/components/Stopwatch/Stopwatch.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stopwatch.style.d.ts","sourceRoot":"","sources":["../../../../src/components/Stopwatch/Stopwatch.style.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,eAAe,oEAS3B,CAAC;AAEF,eAAO,MAAM,4BAA4B,oEAKxC,CAAC;AAEF,eAAO,MAAM,aAAa,46JAiBzB,CAAC"}

package/dist/esm/components/Stopwatch/Stopwatch.style.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { Trigger } from "../Trigger";
+export var StyledStopwatch = styled.div.withConfig({
+  displayName: "Stopwatchstyle__StyledStopwatch",
+  componentId: "sc-h5uscw-0"
+})(["background-color:var(--color-theme-300);border-radius:21px;padding:4px;max-width:320px;height:34px;display:flex;align-items:center;"]);
+export var StyledStopwatchCenterWrapper = styled.div.withConfig({
+  displayName: "Stopwatchstyle__StyledStopwatchCenterWrapper",
+  componentId: "sc-h5uscw-1"
+})(["flex-grow:1;display:flex;align-items:center;justify-content:center;"]);
+export var StyledTrigger = styled(Trigger).withConfig({
+  displayName: "Stopwatchstyle__StyledTrigger",
+  componentId: "sc-h5uscw-2"
+})(["width:32px;height:32px;border-radius:9999px;display:flex;justify-content:center;align-items:center;svg{fill:var(--color-theme-700);}&:hover{svg{fill:var(--color-theme-900);}}"]);
+//# sourceMappingURL=Stopwatch.style.js.map

package/dist/esm/components/Stopwatch/Stopwatch.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stopwatch.style.js","names":["styled","Trigger","StyledStopwatch","div","StyledStopwatchCenterWrapper","StyledTrigger"],"sources":["../../../../src/components/Stopwatch/Stopwatch.style.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { Trigger } from \"../Trigger\";\n\nexport const StyledStopwatch = styled.div`\n  background-color: var(--color-theme-300);\n  border-radius: 21px;\n  padding: 4px;\n  max-width: 320px;\n  height: 34px;\n\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledStopwatchCenterWrapper = styled.div`\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const StyledTrigger = styled(Trigger)`\n  width: 32px;\n  height: 32px;\n  border-radius: 9999px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    fill: var(--color-theme-700);\n  }\n\n  &:hover {\n    svg {\n      fill: var(--color-theme-900);\n    }\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,YAAY;AAEpC,OAAO,IAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,2IASxC;AAED,OAAO,IAAMC,4BAA4B,GAAGJ,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,2EAKrD;AAED,OAAO,IAAME,aAAa,GAAGL,MAAM,CAACC,OAAO,CAAC;EAAA;EAAA;AAAA,sLAiB3C"}

package/dist/esm/components/Stopwatch/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Stopwatch";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Stopwatch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Stopwatch/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/esm/components/Stopwatch/index.js

@@ -0,0 +1,2 @@
+export * from "./Stopwatch";
+//# sourceMappingURL=index.js.map