@televet/kibble-ui 2.1.5 → 2.1.7-beta.86drdrtzn.1

package/build/{withFormControl-fb41ff7a.js → withFormControl-6d7abf11.js}

@@ -1,2 +1,2 @@
-"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),a=require("./useTheme-8873c39f.js"),r=require("./icon.component-067afbfc.js"),n=require("./chakra-ui-form-control.esm-6d25b1a4.js"),l=require("./chakra-ui-layout.esm-6ee578f7.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t);exports.withFormControl=function(t){function i(i){var{errorText:o="Field is invalid",formControlStyle:d,helperText:u,invalidIconColor:m="warning",isDisabled:c,isFieldInline:f=!1,isInvalid:b,isOnContrast:x,isReadOnly:I,isRequired:v,label:g,labelPosition:C="start",labelStyle:p,size:S="md",useInvalidBorder:y=!0,useInvalidIcon:O=!1,useInvalidText:E=!0}=i,F=e.__rest(i,["errorText","formControlStyle","helperText","invalidIconColor","isDisabled","isFieldInline","isInvalid","isOnContrast","isReadOnly","isRequired","label","labelPosition","labelStyle","size","useInvalidBorder","useInvalidIcon","useInvalidText"]);const{fontSizes:T}=a.useTheme();return s.default.createElement(n.FormControl,Object.assign({isInvalid:b,isRequired:v,isReadOnly:I,isDisabled:c},f&&{display:"grid",gridTemplateColumns:"repeat(2, auto)",gridTemplateRows:"repeat(3, auto)",alignItems:"center",w:"max-content"},d),g&&"start"===C&&s.default.createElement(n.FormLabel,Object.assign({color:x?"text.onContrast":"text.default",fontSize:T[S]},f&&{mb:0,ml:0,mr:2},p),g),s.default.createElement(l.HStack,{w:f?"max-content":"100%"},s.default.createElement(t,Object.assign({size:S,isFieldInline:f,isOnContrast:x},F)),O&&b&&s.default.createElement(r.Icon,{name:"warningSign",variant:m,size:S})),g&&"end"===C&&s.default.createElement(n.FormLabel,Object.assign({color:x?"text.onContrast":"text.default",fontSize:T[S]},f&&{mb:0,ml:2,mr:0},p),g),"start"===C&&s.default.createElement(l.Spacer,null),s.default.createElement(l.VStack,{align:"flex-start"},E&&b&&s.default.createElement(n.FormErrorMessage,{mt:2,fontSize:"xs",color:x?"text.dangerOnContrast":"text.danger"},o),u&&s.default.createElement(n.FormHelperText,{mt:2,color:x?"text.subtleOnContrast":"text.subtle",fontSize:"xs"},u)))}return i.displayName=`withFormControl(${t.displayName||t.name}`,i};
-//# sourceMappingURL=withFormControl-fb41ff7a.js.map
+"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),a=require("./useTheme-8873c39f.js"),r=require("./icon.component-3355868e.js"),n=require("./chakra-ui-form-control.esm-6d25b1a4.js"),l=require("./chakra-ui-layout.esm-6ee578f7.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t);exports.withFormControl=function(t){function i(i){var{errorText:o="Field is invalid",formControlStyle:d,helperText:u,invalidIconColor:m="warning",isDisabled:c,isFieldInline:f=!1,isInvalid:b,isOnContrast:x,isReadOnly:I,isRequired:v,label:g,labelPosition:C="start",labelStyle:p,size:S="md",useInvalidBorder:y=!0,useInvalidIcon:O=!1,useInvalidText:E=!0}=i,F=e.__rest(i,["errorText","formControlStyle","helperText","invalidIconColor","isDisabled","isFieldInline","isInvalid","isOnContrast","isReadOnly","isRequired","label","labelPosition","labelStyle","size","useInvalidBorder","useInvalidIcon","useInvalidText"]);const{fontSizes:T}=a.useTheme();return s.default.createElement(n.FormControl,Object.assign({isInvalid:b,isRequired:v,isReadOnly:I,isDisabled:c},f&&{display:"grid",gridTemplateColumns:"repeat(2, auto)",gridTemplateRows:"repeat(3, auto)",alignItems:"center",w:"max-content"},d),g&&"start"===C&&s.default.createElement(n.FormLabel,Object.assign({color:x?"text.onContrast":"text.default",fontSize:T[S]},f&&{mb:0,ml:0,mr:2},p),g),s.default.createElement(l.HStack,{w:f?"max-content":"100%"},s.default.createElement(t,Object.assign({size:S,isFieldInline:f,isOnContrast:x},F)),O&&b&&s.default.createElement(r.Icon,{name:"warningSign",variant:m,size:S})),g&&"end"===C&&s.default.createElement(n.FormLabel,Object.assign({color:x?"text.onContrast":"text.default",fontSize:T[S]},f&&{mb:0,ml:2,mr:0},p),g),"start"===C&&s.default.createElement(l.Spacer,null),s.default.createElement(l.VStack,{align:"flex-start"},E&&b&&s.default.createElement(n.FormErrorMessage,{mt:2,fontSize:"xs",color:x?"text.dangerOnContrast":"text.danger"},o),u&&s.default.createElement(n.FormHelperText,{mt:2,color:x?"text.subtleOnContrast":"text.subtle",fontSize:"xs"},u)))}return i.displayName=`withFormControl(${t.displayName||t.name}`,i};
+//# sourceMappingURL=withFormControl-6d7abf11.js.map

package/build/{withFormControl-fb41ff7a.js.map → withFormControl-6d7abf11.js.map}

@@ -1 +1 @@
-{"version":3,"file":"withFormControl-fb41ff7a.js","sources":["../src/shared/hocs/FormControl/withFormControl.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormErrorMessage,\n  FormHelperText,\n  HStack,\n  FormLabelProps,\n  VStack,\n  Spacer,\n} from '@chakra-ui/react';\nimport { useTheme } from 'shared/hooks/useTheme';\nimport { FormControlSize } from 'shared/types/formControl';\nimport { Icon } from 'components/Icon';\nimport { TypographyVariant } from 'shared/types/typography';\n\nexport interface WithFormControlProps {\n  errorText?: string;\n  formControlStyle?: FormControlProps;\n  helperText?: string;\n  invalidIconColor?: TypographyVariant;\n  isDisabled?: boolean;\n  isFieldInline?: boolean;\n  isInvalid?: boolean;\n  isOnContrast?: boolean;\n  isReadOnly?: boolean;\n  isRequired?: boolean;\n  label?: string | ReactNode;\n  labelStyle?: FormLabelProps;\n  labelPosition?: 'start' | 'end';\n  size?: FormControlSize;\n  useInvalidBorder?: boolean;\n  useInvalidIcon?: boolean;\n  useInvalidText?: boolean;\n}\n\nexport function withFormControl<P extends WithFormControlProps>(Component: React.ComponentType<P>): React.FC<P> {\n  function WithFormControl({\n    errorText = 'Field is invalid',\n    formControlStyle,\n    helperText,\n    invalidIconColor = 'warning',\n    isDisabled,\n    isFieldInline = false,\n    isInvalid,\n    isOnContrast,\n    isReadOnly,\n    isRequired,\n    label,\n    labelPosition = 'start',\n    labelStyle,\n    size = 'md',\n    useInvalidBorder = true,\n    useInvalidIcon = false,\n    useInvalidText = true,\n    ...props\n  }: WithFormControlProps): JSX.Element {\n    const { fontSizes } = useTheme();\n\n    return (\n      <FormControl\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n        isReadOnly={isReadOnly}\n        isDisabled={isDisabled}\n        {...(isFieldInline && {\n          display: 'grid',\n          gridTemplateColumns: 'repeat(2, auto)',\n          gridTemplateRows: 'repeat(3, auto)',\n          alignItems: 'center',\n          w: 'max-content',\n        })}\n        {...formControlStyle}\n      >\n        {label && labelPosition === 'start' && (\n          <FormLabel\n            color={isOnContrast ? 'text.onContrast' : 'text.default'}\n            fontSize={fontSizes[size]}\n            {...(isFieldInline && { mb: 0, ml: 0, mr: 2 })}\n            {...labelStyle}\n          >\n            {label}\n          </FormLabel>\n        )}\n        <HStack w={isFieldInline ? 'max-content' : '100%'}>\n          <Component size={size} isFieldInline={isFieldInline} isOnContrast={isOnContrast} {...(props as P)} />\n          {useInvalidIcon && isInvalid && <Icon name=\"warningSign\" variant={invalidIconColor} size={size} />}\n        </HStack>\n        {label && labelPosition === 'end' && (\n          <FormLabel\n            color={isOnContrast ? 'text.onContrast' : 'text.default'}\n            fontSize={fontSizes[size]}\n            {...(isFieldInline && { mb: 0, ml: 2, mr: 0 })}\n            {...labelStyle}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {labelPosition === 'start' && <Spacer />}\n        <VStack align=\"flex-start\">\n          {useInvalidText && isInvalid && (\n            <FormErrorMessage mt={2} fontSize=\"xs\" color={isOnContrast ? 'text.dangerOnContrast' : 'text.danger'}>\n              {errorText}\n            </FormErrorMessage>\n          )}\n          {helperText && (\n            <FormHelperText mt={2} color={isOnContrast ? 'text.subtleOnContrast' : 'text.subtle'} fontSize=\"xs\">\n              {helperText}\n            </FormHelperText>\n          )}\n        </VStack>\n      </FormControl>\n    );\n  }\n  WithFormControl.displayName = `withFormControl(${Component.displayName || Component.name}`;\n\n  return WithFormControl;\n}\n"],"names":["Component","WithFormControl","_a","errorText","formControlStyle","helperText","invalidIconColor","isDisabled","isFieldInline","isInvalid","isOnContrast","isReadOnly","isRequired","label","labelPosition","labelStyle","size","useInvalidBorder","useInvalidIcon","useInvalidText","props","__rest","fontSizes","useTheme","React","FormControl","Object","assign","display","gridTemplateColumns","gridTemplateRows","alignItems","w","createElement","FormLabel","color","fontSize","mb","ml","mr","HStack","Icon","name","variant","Spacer","VStack","align","FormErrorMessage","mt","FormHelperText","displayName"],"mappings":"wWAqCM,SAA0DA,GAC9D,SAASC,EAAgBC,OAAAC,UACvBA,EAAY,mBAAkBC,iBAC9BA,EAAgBC,WAChBA,EAAUC,iBACVA,EAAmB,UAASC,WAC5BA,EAAUC,cACVA,GAAgB,EAAKC,UACrBA,EAASC,aACTA,EAAYC,WACZA,EAAUC,WACVA,EAAUC,MACVA,EAAKC,cACLA,EAAgB,QAAOC,WACvBA,EAAUC,KACVA,EAAO,KAAIC,iBACXA,GAAmB,EAAIC,eACvBA,GAAiB,EAAKC,eACtBA,GAAiB,GAAIjB,EAClBkB,EAlBoBC,SAAAnB,EAAA,CAAA,YAAA,mBAAA,aAAA,mBAAA,aAAA,gBAAA,YAAA,eAAA,aAAA,aAAA,QAAA,gBAAA,aAAA,OAAA,mBAAA,iBAAA,mBAoBvB,MAAMoB,UAAEA,GAAcC,EAAAA,WAEtB,OACEC,EAAAA,sBAACC,EAAAA,YAAWC,OAAAC,OAAA,CACVlB,UAAWA,EACXG,WAAYA,EACZD,WAAYA,EACZJ,WAAYA,GACPC,GAAiB,CACpBoB,QAAS,OACTC,oBAAqB,kBACrBC,iBAAkB,kBAClBC,WAAY,SACZC,EAAG,eAED5B,GAEHS,GAA2B,UAAlBC,GACRU,EAAA,QAAAS,cAACC,EAASA,UAAAR,OAAAC,OAAA,CACRQ,MAAOzB,EAAe,kBAAoB,eAC1C0B,SAAUd,EAAUN,IACfR,GAAiB,CAAE6B,GAAI,EAAGC,GAAI,EAAGC,GAAI,GACtCxB,GAEHF,GAGLW,EAAA,QAAAS,cAACO,SAAM,CAACR,EAAGxB,EAAgB,cAAgB,QACzCgB,EAAAA,QAAAS,cAACjC,EAAS0B,OAAAC,OAAA,CAACX,KAAMA,EAAMR,cAAeA,EAAeE,aAAcA,GAAmBU,IACrFF,GAAkBT,GAAae,EAAAA,sBAACiB,EAAIA,KAAA,CAACC,KAAK,cAAcC,QAASrC,EAAkBU,KAAMA,KAE3FH,GAA2B,QAAlBC,GACRU,EAAA,QAAAS,cAACC,EAASA,UAAAR,OAAAC,OAAA,CACRQ,MAAOzB,EAAe,kBAAoB,eAC1C0B,SAAUd,EAAUN,IACfR,GAAiB,CAAE6B,GAAI,EAAGC,GAAI,EAAGC,GAAI,GACtCxB,GAEHF,GAGc,UAAlBC,GAA6BU,EAAAA,QAAAS,cAACW,EAAAA,OAAS,MACxCpB,EAAAA,QAAAS,cAACY,EAAAA,OAAM,CAACC,MAAM,cACX3B,GAAkBV,GACjBe,EAAC,QAAAS,cAAAc,EAAgBA,iBAAC,CAAAC,GAAI,EAAGZ,SAAS,KAAKD,MAAOzB,EAAe,wBAA0B,eACpFP,GAGJE,GACCmB,EAAC,QAAAS,cAAAgB,EAAcA,eAAC,CAAAD,GAAI,EAAGb,MAAOzB,EAAe,wBAA0B,cAAe0B,SAAS,MAC5F/B,KASb,OAFAJ,EAAgBiD,YAAc,mBAAmBlD,EAAUkD,aAAelD,EAAU0C,OAE7EzC"}
+{"version":3,"file":"withFormControl-6d7abf11.js","sources":["../src/shared/hocs/FormControl/withFormControl.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormErrorMessage,\n  FormHelperText,\n  HStack,\n  FormLabelProps,\n  VStack,\n  Spacer,\n} from '@chakra-ui/react';\nimport { useTheme } from 'shared/hooks/useTheme';\nimport { FormControlSize } from 'shared/types/formControl';\nimport { Icon } from 'components/Icon';\nimport { TypographyVariant } from 'shared/types/typography';\n\nexport interface WithFormControlProps {\n  errorText?: string;\n  formControlStyle?: FormControlProps;\n  helperText?: string;\n  invalidIconColor?: TypographyVariant;\n  isDisabled?: boolean;\n  isFieldInline?: boolean;\n  isInvalid?: boolean;\n  isOnContrast?: boolean;\n  isReadOnly?: boolean;\n  isRequired?: boolean;\n  label?: string | ReactNode;\n  labelStyle?: FormLabelProps;\n  labelPosition?: 'start' | 'end';\n  size?: FormControlSize;\n  useInvalidBorder?: boolean;\n  useInvalidIcon?: boolean;\n  useInvalidText?: boolean;\n}\n\nexport function withFormControl<P extends WithFormControlProps>(Component: React.ComponentType<P>): React.FC<P> {\n  function WithFormControl({\n    errorText = 'Field is invalid',\n    formControlStyle,\n    helperText,\n    invalidIconColor = 'warning',\n    isDisabled,\n    isFieldInline = false,\n    isInvalid,\n    isOnContrast,\n    isReadOnly,\n    isRequired,\n    label,\n    labelPosition = 'start',\n    labelStyle,\n    size = 'md',\n    useInvalidBorder = true,\n    useInvalidIcon = false,\n    useInvalidText = true,\n    ...props\n  }: WithFormControlProps): JSX.Element {\n    const { fontSizes } = useTheme();\n\n    return (\n      <FormControl\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n        isReadOnly={isReadOnly}\n        isDisabled={isDisabled}\n        {...(isFieldInline && {\n          display: 'grid',\n          gridTemplateColumns: 'repeat(2, auto)',\n          gridTemplateRows: 'repeat(3, auto)',\n          alignItems: 'center',\n          w: 'max-content',\n        })}\n        {...formControlStyle}\n      >\n        {label && labelPosition === 'start' && (\n          <FormLabel\n            color={isOnContrast ? 'text.onContrast' : 'text.default'}\n            fontSize={fontSizes[size]}\n            {...(isFieldInline && { mb: 0, ml: 0, mr: 2 })}\n            {...labelStyle}\n          >\n            {label}\n          </FormLabel>\n        )}\n        <HStack w={isFieldInline ? 'max-content' : '100%'}>\n          <Component size={size} isFieldInline={isFieldInline} isOnContrast={isOnContrast} {...(props as P)} />\n          {useInvalidIcon && isInvalid && <Icon name=\"warningSign\" variant={invalidIconColor} size={size} />}\n        </HStack>\n        {label && labelPosition === 'end' && (\n          <FormLabel\n            color={isOnContrast ? 'text.onContrast' : 'text.default'}\n            fontSize={fontSizes[size]}\n            {...(isFieldInline && { mb: 0, ml: 2, mr: 0 })}\n            {...labelStyle}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {labelPosition === 'start' && <Spacer />}\n        <VStack align=\"flex-start\">\n          {useInvalidText && isInvalid && (\n            <FormErrorMessage mt={2} fontSize=\"xs\" color={isOnContrast ? 'text.dangerOnContrast' : 'text.danger'}>\n              {errorText}\n            </FormErrorMessage>\n          )}\n          {helperText && (\n            <FormHelperText mt={2} color={isOnContrast ? 'text.subtleOnContrast' : 'text.subtle'} fontSize=\"xs\">\n              {helperText}\n            </FormHelperText>\n          )}\n        </VStack>\n      </FormControl>\n    );\n  }\n  WithFormControl.displayName = `withFormControl(${Component.displayName || Component.name}`;\n\n  return WithFormControl;\n}\n"],"names":["Component","WithFormControl","_a","errorText","formControlStyle","helperText","invalidIconColor","isDisabled","isFieldInline","isInvalid","isOnContrast","isReadOnly","isRequired","label","labelPosition","labelStyle","size","useInvalidBorder","useInvalidIcon","useInvalidText","props","__rest","fontSizes","useTheme","React","FormControl","Object","assign","display","gridTemplateColumns","gridTemplateRows","alignItems","w","createElement","FormLabel","color","fontSize","mb","ml","mr","HStack","Icon","name","variant","Spacer","VStack","align","FormErrorMessage","mt","FormHelperText","displayName"],"mappings":"wWAqCM,SAA0DA,GAC9D,SAASC,EAAgBC,OAAAC,UACvBA,EAAY,mBAAkBC,iBAC9BA,EAAgBC,WAChBA,EAAUC,iBACVA,EAAmB,UAASC,WAC5BA,EAAUC,cACVA,GAAgB,EAAKC,UACrBA,EAASC,aACTA,EAAYC,WACZA,EAAUC,WACVA,EAAUC,MACVA,EAAKC,cACLA,EAAgB,QAAOC,WACvBA,EAAUC,KACVA,EAAO,KAAIC,iBACXA,GAAmB,EAAIC,eACvBA,GAAiB,EAAKC,eACtBA,GAAiB,GAAIjB,EAClBkB,EAlBoBC,SAAAnB,EAAA,CAAA,YAAA,mBAAA,aAAA,mBAAA,aAAA,gBAAA,YAAA,eAAA,aAAA,aAAA,QAAA,gBAAA,aAAA,OAAA,mBAAA,iBAAA,mBAoBvB,MAAMoB,UAAEA,GAAcC,EAAAA,WAEtB,OACEC,EAAAA,sBAACC,EAAAA,YAAWC,OAAAC,OAAA,CACVlB,UAAWA,EACXG,WAAYA,EACZD,WAAYA,EACZJ,WAAYA,GACPC,GAAiB,CACpBoB,QAAS,OACTC,oBAAqB,kBACrBC,iBAAkB,kBAClBC,WAAY,SACZC,EAAG,eAED5B,GAEHS,GAA2B,UAAlBC,GACRU,EAAA,QAAAS,cAACC,EAASA,UAAAR,OAAAC,OAAA,CACRQ,MAAOzB,EAAe,kBAAoB,eAC1C0B,SAAUd,EAAUN,IACfR,GAAiB,CAAE6B,GAAI,EAAGC,GAAI,EAAGC,GAAI,GACtCxB,GAEHF,GAGLW,EAAA,QAAAS,cAACO,SAAM,CAACR,EAAGxB,EAAgB,cAAgB,QACzCgB,EAAAA,QAAAS,cAACjC,EAAS0B,OAAAC,OAAA,CAACX,KAAMA,EAAMR,cAAeA,EAAeE,aAAcA,GAAmBU,IACrFF,GAAkBT,GAAae,EAAAA,sBAACiB,EAAIA,KAAA,CAACC,KAAK,cAAcC,QAASrC,EAAkBU,KAAMA,KAE3FH,GAA2B,QAAlBC,GACRU,EAAA,QAAAS,cAACC,EAASA,UAAAR,OAAAC,OAAA,CACRQ,MAAOzB,EAAe,kBAAoB,eAC1C0B,SAAUd,EAAUN,IACfR,GAAiB,CAAE6B,GAAI,EAAGC,GAAI,EAAGC,GAAI,GACtCxB,GAEHF,GAGc,UAAlBC,GAA6BU,EAAAA,QAAAS,cAACW,EAAAA,OAAS,MACxCpB,EAAAA,QAAAS,cAACY,EAAAA,OAAM,CAACC,MAAM,cACX3B,GAAkBV,GACjBe,EAAC,QAAAS,cAAAc,EAAgBA,iBAAC,CAAAC,GAAI,EAAGZ,SAAS,KAAKD,MAAOzB,EAAe,wBAA0B,eACpFP,GAGJE,GACCmB,EAAC,QAAAS,cAAAgB,EAAcA,eAAC,CAAAD,GAAI,EAAGb,MAAOzB,EAAe,wBAA0B,cAAe0B,SAAS,MAC5F/B,KASb,OAFAJ,EAAgBiD,YAAc,mBAAmBlD,EAAUkD,aAAelD,EAAU0C,OAE7EzC"}

package/build/withFormControl-bbd5b3c6.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),a=require("./useTheme-8873c39f.js"),r=require("./icon.component-68a24294.js"),n=require("./chakra-ui-form-control.esm-6d25b1a4.js"),l=require("./chakra-ui-layout.esm-6ee578f7.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(t);exports.withFormControl=function(t){function i(i){var{errorText:o="Field is invalid",formControlStyle:d,helperText:u,invalidIconColor:m="warning",isDisabled:c,isFieldInline:f=!1,isInvalid:b,isOnContrast:x,isReadOnly:I,isRequired:v,label:g,labelPosition:C="start",labelStyle:p,size:S="md",useInvalidBorder:y=!0,useInvalidIcon:O=!1,useInvalidText:E=!0}=i,F=e.__rest(i,["errorText","formControlStyle","helperText","invalidIconColor","isDisabled","isFieldInline","isInvalid","isOnContrast","isReadOnly","isRequired","label","labelPosition","labelStyle","size","useInvalidBorder","useInvalidIcon","useInvalidText"]);const{fontSizes:T}=a.useTheme();return s.default.createElement(n.FormControl,Object.assign({isInvalid:b,isRequired:v,isReadOnly:I,isDisabled:c},f&&{display:"grid",gridTemplateColumns:"repeat(2, auto)",gridTemplateRows:"repeat(3, auto)",alignItems:"center",w:"max-content"},d),g&&"start"===C&&s.default.createElement(n.FormLabel,Object.assign({color:x?"text.onContrast":"text.default",fontSize:T[S]},f&&{mb:0,ml:0,mr:2},p),g),s.default.createElement(l.HStack,{w:f?"max-content":"100%"},s.default.createElement(t,Object.assign({size:S,isFieldInline:f,isOnContrast:x},F)),O&&b&&s.default.createElement(r.Icon,{name:"warningSign",variant:m,size:S})),g&&"end"===C&&s.default.createElement(n.FormLabel,Object.assign({color:x?"text.onContrast":"text.default",fontSize:T[S]},f&&{mb:0,ml:2,mr:0},p),g),"start"===C&&s.default.createElement(l.Spacer,null),s.default.createElement(l.VStack,{align:"flex-start"},E&&b&&s.default.createElement(n.FormErrorMessage,{mt:2,fontSize:"xs",color:x?"text.dangerOnContrast":"text.danger"},o),u&&s.default.createElement(n.FormHelperText,{mt:2,color:x?"text.subtleOnContrast":"text.subtle",fontSize:"xs"},u)))}return i.displayName=`withFormControl(${t.displayName||t.name}`,i};
+//# sourceMappingURL=withFormControl-bbd5b3c6.js.map

package/build/withFormControl-bbd5b3c6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withFormControl-bbd5b3c6.js","sources":["../src/shared/hocs/FormControl/withFormControl.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormErrorMessage,\n  FormHelperText,\n  HStack,\n  FormLabelProps,\n  VStack,\n  Spacer,\n} from '@chakra-ui/react';\nimport { useTheme } from 'shared/hooks/useTheme';\nimport { FormControlSize } from 'shared/types/formControl';\nimport { Icon } from 'components/Icon';\nimport { TypographyVariant } from 'shared/types/typography';\n\nexport interface WithFormControlProps {\n  errorText?: string;\n  formControlStyle?: FormControlProps;\n  helperText?: string;\n  invalidIconColor?: TypographyVariant;\n  isDisabled?: boolean;\n  isFieldInline?: boolean;\n  isInvalid?: boolean;\n  isOnContrast?: boolean;\n  isReadOnly?: boolean;\n  isRequired?: boolean;\n  label?: string | ReactNode;\n  labelStyle?: FormLabelProps;\n  labelPosition?: 'start' | 'end';\n  size?: FormControlSize;\n  useInvalidBorder?: boolean;\n  useInvalidIcon?: boolean;\n  useInvalidText?: boolean;\n}\n\nexport function withFormControl<P extends WithFormControlProps>(Component: React.ComponentType<P>): React.FC<P> {\n  function WithFormControl({\n    errorText = 'Field is invalid',\n    formControlStyle,\n    helperText,\n    invalidIconColor = 'warning',\n    isDisabled,\n    isFieldInline = false,\n    isInvalid,\n    isOnContrast,\n    isReadOnly,\n    isRequired,\n    label,\n    labelPosition = 'start',\n    labelStyle,\n    size = 'md',\n    useInvalidBorder = true,\n    useInvalidIcon = false,\n    useInvalidText = true,\n    ...props\n  }: WithFormControlProps): JSX.Element {\n    const { fontSizes } = useTheme();\n\n    return (\n      <FormControl\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n        isReadOnly={isReadOnly}\n        isDisabled={isDisabled}\n        {...(isFieldInline && {\n          display: 'grid',\n          gridTemplateColumns: 'repeat(2, auto)',\n          gridTemplateRows: 'repeat(3, auto)',\n          alignItems: 'center',\n          w: 'max-content',\n        })}\n        {...formControlStyle}\n      >\n        {label && labelPosition === 'start' && (\n          <FormLabel\n            color={isOnContrast ? 'text.onContrast' : 'text.default'}\n            fontSize={fontSizes[size]}\n            {...(isFieldInline && { mb: 0, ml: 0, mr: 2 })}\n            {...labelStyle}\n          >\n            {label}\n          </FormLabel>\n        )}\n        <HStack w={isFieldInline ? 'max-content' : '100%'}>\n          <Component size={size} isFieldInline={isFieldInline} isOnContrast={isOnContrast} {...(props as P)} />\n          {useInvalidIcon && isInvalid && <Icon name=\"warningSign\" variant={invalidIconColor} size={size} />}\n        </HStack>\n        {label && labelPosition === 'end' && (\n          <FormLabel\n            color={isOnContrast ? 'text.onContrast' : 'text.default'}\n            fontSize={fontSizes[size]}\n            {...(isFieldInline && { mb: 0, ml: 2, mr: 0 })}\n            {...labelStyle}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {labelPosition === 'start' && <Spacer />}\n        <VStack align=\"flex-start\">\n          {useInvalidText && isInvalid && (\n            <FormErrorMessage mt={2} fontSize=\"xs\" color={isOnContrast ? 'text.dangerOnContrast' : 'text.danger'}>\n              {errorText}\n            </FormErrorMessage>\n          )}\n          {helperText && (\n            <FormHelperText mt={2} color={isOnContrast ? 'text.subtleOnContrast' : 'text.subtle'} fontSize=\"xs\">\n              {helperText}\n            </FormHelperText>\n          )}\n        </VStack>\n      </FormControl>\n    );\n  }\n  WithFormControl.displayName = `withFormControl(${Component.displayName || Component.name}`;\n\n  return WithFormControl;\n}\n"],"names":["Component","WithFormControl","_a","errorText","formControlStyle","helperText","invalidIconColor","isDisabled","isFieldInline","isInvalid","isOnContrast","isReadOnly","isRequired","label","labelPosition","labelStyle","size","useInvalidBorder","useInvalidIcon","useInvalidText","props","__rest","fontSizes","useTheme","React","FormControl","Object","assign","display","gridTemplateColumns","gridTemplateRows","alignItems","w","createElement","FormLabel","color","fontSize","mb","ml","mr","HStack","Icon","name","variant","Spacer","VStack","align","FormErrorMessage","mt","FormHelperText","displayName"],"mappings":"wWAqCM,SAA0DA,GAC9D,SAASC,EAAgBC,OAAAC,UACvBA,EAAY,mBAAkBC,iBAC9BA,EAAgBC,WAChBA,EAAUC,iBACVA,EAAmB,UAASC,WAC5BA,EAAUC,cACVA,GAAgB,EAAKC,UACrBA,EAASC,aACTA,EAAYC,WACZA,EAAUC,WACVA,EAAUC,MACVA,EAAKC,cACLA,EAAgB,QAAOC,WACvBA,EAAUC,KACVA,EAAO,KAAIC,iBACXA,GAAmB,EAAIC,eACvBA,GAAiB,EAAKC,eACtBA,GAAiB,GAAIjB,EAClBkB,EAlBoBC,SAAAnB,EAAA,CAAA,YAAA,mBAAA,aAAA,mBAAA,aAAA,gBAAA,YAAA,eAAA,aAAA,aAAA,QAAA,gBAAA,aAAA,OAAA,mBAAA,iBAAA,mBAoBvB,MAAMoB,UAAEA,GAAcC,EAAAA,WAEtB,OACEC,EAAAA,sBAACC,EAAAA,YAAWC,OAAAC,OAAA,CACVlB,UAAWA,EACXG,WAAYA,EACZD,WAAYA,EACZJ,WAAYA,GACPC,GAAiB,CACpBoB,QAAS,OACTC,oBAAqB,kBACrBC,iBAAkB,kBAClBC,WAAY,SACZC,EAAG,eAED5B,GAEHS,GAA2B,UAAlBC,GACRU,EAAA,QAAAS,cAACC,EAASA,UAAAR,OAAAC,OAAA,CACRQ,MAAOzB,EAAe,kBAAoB,eAC1C0B,SAAUd,EAAUN,IACfR,GAAiB,CAAE6B,GAAI,EAAGC,GAAI,EAAGC,GAAI,GACtCxB,GAEHF,GAGLW,EAAA,QAAAS,cAACO,SAAM,CAACR,EAAGxB,EAAgB,cAAgB,QACzCgB,EAAAA,QAAAS,cAACjC,EAAS0B,OAAAC,OAAA,CAACX,KAAMA,EAAMR,cAAeA,EAAeE,aAAcA,GAAmBU,IACrFF,GAAkBT,GAAae,EAAAA,sBAACiB,EAAIA,KAAA,CAACC,KAAK,cAAcC,QAASrC,EAAkBU,KAAMA,KAE3FH,GAA2B,QAAlBC,GACRU,EAAA,QAAAS,cAACC,EAASA,UAAAR,OAAAC,OAAA,CACRQ,MAAOzB,EAAe,kBAAoB,eAC1C0B,SAAUd,EAAUN,IACfR,GAAiB,CAAE6B,GAAI,EAAGC,GAAI,EAAGC,GAAI,GACtCxB,GAEHF,GAGc,UAAlBC,GAA6BU,EAAAA,QAAAS,cAACW,EAAAA,OAAS,MACxCpB,EAAAA,QAAAS,cAACY,EAAAA,OAAM,CAACC,MAAM,cACX3B,GAAkBV,GACjBe,EAAC,QAAAS,cAAAc,EAAgBA,iBAAC,CAAAC,GAAI,EAAGZ,SAAS,KAAKD,MAAOzB,EAAe,wBAA0B,eACpFP,GAGJE,GACCmB,EAAC,QAAAS,cAAAgB,EAAcA,eAAC,CAAAD,GAAI,EAAGb,MAAOzB,EAAe,wBAA0B,cAAe0B,SAAS,MAC5F/B,KASb,OAFAJ,EAAgBiD,YAAc,mBAAmBlD,EAAUkD,aAAelD,EAAU0C,OAE7EzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@televet/kibble-ui",
-  "version": "2.1.5",
+  "version": "2.1.7-beta.86drdrtzn.1",
   "description": "Kibble Design System by Otto",
   "author": "Otto",
   "main": "build/index.js",

package/build/checkboxGroup.component-8718b445.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),r=require("./withFormControl-fb41ff7a.js"),i=require("./checkbox.component-f8ff7fc6.js"),c=require("./chakra-ui-checkbox.esm-4cded6a7.js"),s=require("./chakra-ui-layout.esm-6ee578f7.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(t);const o=t=>{var{checkboxes:r,size:a="md",direction:o="row",spacing:u,isFieldInline:d,isOnContrast:f}=t,l=e.__rest(t,["checkboxes","size","direction","spacing","isFieldInline","isOnContrast"]);return n.default.createElement(c.CheckboxGroup,Object.assign({},l),n.default.createElement(s.Stack,{direction:o,spacing:u,width:"fit-content"},r.map(((e,t)=>n.default.createElement(i.WrappedCheckbox,Object.assign({isOnContrast:f,key:t},e,{size:a}))))))};o.displayName="CheckboxGroup";const u=r.withFormControl(o);exports.WrappedCheckboxGroup=u;
-//# sourceMappingURL=checkboxGroup.component-8718b445.js.map

package/build/modalCloseButton.component-7f275383.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),o=require("./button.component-fef0889c.js"),r=require("./chakra-ui-modal.esm-a00f2bce.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(t);exports.ModalCloseButton=t=>{var{right:s=2,top:i=2,size:n="md"}=t,u=e.__rest(t,["right","top","size"]);const{onClose:c}=r.useModalContext();return a.default.createElement(o.Button,Object.assign({variant:"ghostNeutral",onClick:c,iconName:"close",position:"absolute",right:s,top:i,size:n},u))};
-//# sourceMappingURL=modalCloseButton.component-7f275383.js.map

package/build/tab.component-1d9ac224.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("./notificationCounter.component-748d56ad.js"),i=require("./icon.component-067afbfc.js"),a=require("react"),n=require("./heading.component-e55f8364.js"),o=require("./chakra-ui-tabs.esm-e6372403.js"),r=require("./chakra-ui-layout.esm-6ee578f7.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(a);const u={xs:"sm",sm:"md",md:"md",lg:"lg"},m={xs:"xs",sm:"xs",md:"sm",lg:"md"};exports.Tab=a=>{var{iconName:s,label:f,showNotificationCounter:d=!1,notificationCount:l=0,notificationCounterVariant:b=t.NotificationCounterVariant.Red,size:C="md"}=a,j=e.__rest(a,["iconName","label","showNotificationCounter","notificationCount","notificationCounterVariant","size"]);return c.default.createElement(o.Tab,Object.assign({},j),!!s&&c.default.createElement(r.Box,{pr:2},c.default.createElement(i.Icon,{name:s,size:C})),c.default.createElement(n.WrappedHeading,{size:m[C]},f),d&&c.default.createElement(t.NotificationCounter,{count:l,variant:b,size:u[C],ml:2}))};
-//# sourceMappingURL=tab.component-1d9ac224.js.map

package/build/textInput.component-43f9937a.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),n=require("./withFormControl-fb41ff7a.js"),a=require("./icon.component-067afbfc.js"),l=require("./chakra-ui-button.esm-bd065780.js"),r=require("./chakra-ui-input.esm-5fd07056.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=i(t);const s={sm:5,md:5,lg:6},o=({handleClear:e,size:t="md"})=>u.default.createElement(l.Button,{display:"inline-flex",minW:"auto",w:s[t],h:s[t],variant:"unstyled",opacity:.5,_hover:{opacity:.8},_active:{opacity:1},mr:"sm"===t?3:4,onClick:e},u.default.createElement(a.Icon,{variant:"default",name:"close",size:"lg"===t?"sm":"xs"})),d=n.withFormControl((t=>{var{isClearable:n=!1,size:a="md",leftElement:l,rightElement:i,inputRef:s,isFieldInline:d,onClear:f,value:c,isOnContrast:m}=t,p=e.__rest(t,["isClearable","size","leftElement","rightElement","inputRef","isFieldInline","onClear","value","isOnContrast"]);let h=m?"onContrast":"default";const E=()=>{f&&f(c||"")};return n&&c&&(i=u.default.createElement(o,{size:a,handleClear:E})),u.default.createElement(r.InputGroup,null,l?u.default.createElement(r.InputLeftElement,{children:l,h:"100%"}):null,u.default.createElement(r.Input,Object.assign({variant:h},p,{ref:s,size:a,value:c})),i?u.default.createElement(r.InputRightElement,{children:i,h:"100%"}):null)})),f=t.forwardRef(((e,t)=>u.default.createElement(d,Object.assign({inputRef:t},e))));f.displayName="TextInput",exports.WrappedTextInput=f;
-//# sourceMappingURL=textInput.component-43f9937a.js.map

package/build/textarea.component-3023feaa.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),r=require("./withFormControl-fb41ff7a.js"),a=require("./chakra-ui-textarea.esm-23fad4cd.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(t);const i=r.withFormControl((t=>{var{isFieldInline:r,textareaRef:n,isOnContrast:i}=t,f=e.__rest(t,["isFieldInline","textareaRef","isOnContrast"]);const o=i?"onContrast":"default";return s.default.createElement(a.Textarea,Object.assign({variant:o},f,{ref:n}))})),f=t.forwardRef(((e,t)=>s.default.createElement(i,Object.assign({textareaRef:t},e))));f.displayName="Textarea",exports.WrappedTextArea=f;
-//# sourceMappingURL=textarea.component-3023feaa.js.map

package/build/timePicker.component-5dbceef7.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react"),t=require("./icon.component-067afbfc.js"),r=require("./popover.component-0ae5fbb4.js"),n=require("./index-fee8538e.js"),o=require("./textInput.component-43f9937a.js"),a=require("./chakra-ui-layout.esm-6ee578f7.js"),i=require("./useIconTextSizeMap-301c4f35.js"),l=require("./chakra-ui-hooks.esm-21b313f3.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(e);const c=({value:t,innerRef:r,isSelected:n,handleClick:o})=>{const i=e.useCallback((e=>{const t=e.currentTarget.textContent||"";o(t)}),[o]);return s.default.createElement(a.Box,{ref:r,onClick:i,background:n?"background.primary":"background.default",color:n?"text.onContrast":"text.subtle",fontSize:"sm",textAlign:"center",px:3,py:1,borderRadius:"md",cursor:"pointer",_hover:{background:n?"background.primary.hover":"background.primaryAlpha.hover"}},t)},p=({options:t,optionType:r,selectedValue:n,handleClick:o,isOpen:i=!1})=>{const l=e.useRef(null),u=e.useRef(null);return e.useEffect((()=>{var e,t;i&&u.current&&l.current&&(u.current.scrollTop=(null===(e=l.current)||void 0===e?void 0:e.offsetTop)-(null===(t=u.current)||void 0===t?void 0:t.offsetTop))}),[i]),s.default.createElement(a.Flex,{direction:"column",gap:1,ref:u,overflowY:"auto",sx:{"&::-webkit-scrollbar":{display:"none"}}},t.map((e=>s.default.createElement(c,{key:`${r}-option-${e}`,innerRef:e===n?l:null,value:e,isSelected:e===n,handleClick:o}))))};var d;exports.Meridiem=void 0,(d=exports.Meridiem||(exports.Meridiem={})).AM="AM",d.PM="PM";exports.TimePicker=({initialTime:u,minuteInterval:c=5,inputProps:d,placement:m,onTimeChange:f})=>{const{isOpen:x,onOpen:M,onClose:b}=l.useDisclosure(),k=e.useMemo((()=>new Date(u)),[u]),[h,g]=e.useState(u),v=e.useMemo((()=>{const e=k.getHours();let t=e;return e>12&&(t=e-12),0===e&&(t=12),t.toString()}),[k]),[C,T]=e.useState(v),[y,E]=e.useState(k.getMinutes().toString()),[S,O]=e.useState(k.getHours()>11?exports.Meridiem.PM:exports.Meridiem.AM),j=e.useMemo((()=>n.format(h,"h:mm aa")),[h]),P=e=>{const t=e.toString();return 1===t.length?`0${t}`:t},q=e.useMemo((()=>[12,1,2,3,4,5,6,7,8,9,10,11].map((e=>e.toString()))),[]),w=e.useMemo((()=>{const e=[];for(let t=0;t<60;t+=c)e.push(t);return e.map(P)}),[c]),A=[exports.Meridiem.AM,exports.Meridiem.PM],z=e.useCallback(((e,t,r)=>{let n=0;r===exports.Meridiem.PM&&Number(e)<12&&(n=12),r===exports.Meridiem.AM&&12===Number(e)&&(n=-12);const o=Number(e)+n,a=(new Date).setHours(o,Number(t),0,0),i=new Date(a);g(i),f&&f(i)}),[f]),I=e.useCallback((e=>{T(e),z(e,y,S)}),[z,S,y]),R=e.useCallback((e=>{E(e),z(C,e,S)}),[z,C,S]),D=e.useCallback((e=>{O(e),z(C,y,e)}),[z,C,y]);return s.default.createElement(r.Popover,{isOpen:x,onOpen:M,onClose:b,placement:m,contentProps:{width:"max-content"},variant:"default",size:"sm",anchor:s.default.createElement(a.Box,null,s.default.createElement(o.WrappedTextInput,Object.assign({rightElement:s.default.createElement(t.Icon,{size:i.useIconTextSizeMap((null==d?void 0:d.size)||"md"),name:"clock"}),value:j,isReadOnly:!0,cursor:"pointer"},d)))},s.default.createElement(a.Flex,{height:"186px",gap:1.5,overflow:"hidden"},s.default.createElement(p,{options:q,optionType:"hour",selectedValue:C,handleClick:I,isOpen:x}),s.default.createElement(p,{options:w,optionType:"minute",selectedValue:P(y),handleClick:R,isOpen:x}),s.default.createElement(p,{options:A,optionType:"meridiem",selectedValue:S,handleClick:D,isOpen:x})))};
-//# sourceMappingURL=timePicker.component-5dbceef7.js.map

package/build/timePicker.component-5dbceef7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timePicker.component-5dbceef7.js","sources":["../src/components/TimePicker/components/timeOption.component.tsx","../src/components/TimePicker/components/scrollContainer.component.tsx","../src/components/TimePicker/timePicker.types.ts","../src/components/TimePicker/timePicker.component.tsx"],"sourcesContent":["import React, { MutableRefObject, useCallback } from 'react';\nimport { Box } from '@chakra-ui/react';\n\ninterface TimeOptionProps {\n  value: string;\n  innerRef?: MutableRefObject<HTMLDivElement | null> | null;\n  isSelected: boolean;\n  handleClick: (selectedValue: string) => void;\n}\n\nexport const TimeOption = ({ value, innerRef, isSelected, handleClick }: TimeOptionProps): JSX.Element => {\n  const onClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const selectedValue = event.currentTarget.textContent || '';\n      handleClick(selectedValue);\n    },\n    [handleClick],\n  );\n\n  return (\n    <Box\n      ref={innerRef}\n      onClick={onClick}\n      background={isSelected ? 'background.primary' : 'background.default'}\n      color={isSelected ? 'text.onContrast' : 'text.subtle'}\n      fontSize=\"sm\"\n      textAlign=\"center\"\n      px={3}\n      py={1}\n      borderRadius=\"md\"\n      cursor=\"pointer\"\n      _hover={{\n        background: isSelected ? 'background.primary.hover' : 'background.primaryAlpha.hover',\n      }}\n    >\n      {value}\n    </Box>\n  );\n};\n","import React, { useEffect, useRef } from 'react';\nimport { Flex } from '@chakra-ui/react';\nimport { TimeOption } from './timeOption.component';\n\ninterface ScrollContainerProps {\n  options: string[];\n  optionType: 'hour' | 'minute' | 'meridiem';\n  selectedValue: string;\n  handleClick: (value: string) => void;\n  isOpen: boolean;\n}\n\nexport const ScrollContainer = ({\n  options,\n  optionType,\n  selectedValue,\n  handleClick,\n  isOpen = false,\n}: ScrollContainerProps): JSX.Element => {\n  const itemRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (isOpen && containerRef.current && itemRef.current) {\n      containerRef.current.scrollTop = itemRef.current?.offsetTop - containerRef.current?.offsetTop;\n    }\n  }, [isOpen]);\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap={1}\n      ref={containerRef}\n      overflowY=\"auto\"\n      sx={{\n        '&::-webkit-scrollbar': {\n          display: 'none',\n        },\n      }}\n    >\n      {options.map((option) => {\n        return (\n          <TimeOption\n            key={`${optionType}-option-${option}`}\n            innerRef={option === selectedValue ? itemRef : null}\n            value={option}\n            isSelected={option === selectedValue}\n            handleClick={handleClick}\n          />\n        );\n      })}\n    </Flex>\n  );\n};\n","export enum Meridiem {\n  AM = 'AM',\n  PM = 'PM',\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport { PlacementWithLogical, Box, Flex, useDisclosure } from '@chakra-ui/react';\nimport { Icon } from '../Icon/icon.component';\nimport { Popover } from '../Popover/popover.component';\nimport format from 'date-fns/format';\nimport { TextInput, TextInputProps } from '../TextInput/textInput.component';\nimport { ScrollContainer } from './components/scrollContainer.component';\nimport { Meridiem } from './timePicker.types';\nimport { useIconTextSizeMap } from 'shared/hooks/useIconTextSizeMap';\n\nexport interface TimePickerProps {\n  initialTime: Date;\n  minuteInterval?: number;\n  inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n  placement?: PlacementWithLogical;\n  onTimeChange?: (time: Date) => void;\n}\n\nexport const TimePicker = ({\n  initialTime,\n  minuteInterval = 5,\n  inputProps,\n  placement,\n  onTimeChange,\n}: TimePickerProps): JSX.Element => {\n  const { isOpen, onOpen, onClose } = useDisclosure();\n  const localTime = useMemo(() => new Date(initialTime), [initialTime]);\n\n  // selectedTime should always be UTC\n  const [selectedTime, setSelectedTime] = useState(initialTime);\n\n  const initialSelectedHour = useMemo(() => {\n    const hours = localTime.getHours();\n    let adjustedHours = hours;\n\n    if (hours > 12) {\n      adjustedHours = hours - 12;\n    }\n    if (hours === 0) {\n      adjustedHours = 12;\n    }\n\n    return adjustedHours.toString();\n  }, [localTime]);\n\n  // convert to local time for display\n  const [selectedHour, setSelectedHour] = useState(initialSelectedHour);\n  const [selectedMinute, setSelectedMinute] = useState(localTime.getMinutes().toString());\n  const [selectedMeridiem, setSelectedMeridiem] = useState<string>(\n    localTime.getHours() > 11 ? Meridiem.PM : Meridiem.AM,\n  );\n\n  const formattedTime = useMemo(() => {\n    return format(selectedTime, 'h:mm aa');\n  }, [selectedTime]);\n\n  const formatNumber = (number: number | string): string => {\n    const formattedValue = number.toString();\n    if (formattedValue.length === 1) {\n      return `0${formattedValue}`;\n    }\n\n    return formattedValue;\n  };\n\n  const hourOptions = useMemo(() => {\n    return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((hour) => hour.toString());\n  }, []);\n\n  const minuteOptions = useMemo(() => {\n    const minutes = [];\n    for (let i = 0; i < 60; i += minuteInterval) {\n      minutes.push(i);\n    }\n\n    return minutes.map(formatNumber);\n  }, [minuteInterval]);\n\n  const meridiemOptions = [Meridiem.AM, Meridiem.PM];\n\n  const handleTimeChange = useCallback(\n    (hour: string, minute: string, meridiem: string) => {\n      let meridiemAdjustment = 0;\n\n      // set 1-11pm to 13-23. Don't set 12pm to 24\n      if (meridiem === Meridiem.PM && Number(hour) < 12) {\n        meridiemAdjustment = 12;\n      }\n\n      // set 12am to 00\n      if (meridiem === Meridiem.AM && Number(hour) === 12) {\n        meridiemAdjustment = -12;\n      }\n\n      const hours = Number(hour) + meridiemAdjustment;\n      const time = new Date().setHours(hours, Number(minute), 0, 0);\n      const date = new Date(time);\n      setSelectedTime(date);\n\n      if (onTimeChange) {\n        onTimeChange(date);\n      }\n    },\n    [onTimeChange],\n  );\n\n  const handleHourClick = useCallback(\n    (value: string) => {\n      setSelectedHour(value);\n      handleTimeChange(value, selectedMinute, selectedMeridiem);\n    },\n    [handleTimeChange, selectedMeridiem, selectedMinute],\n  );\n\n  const handleMinuteClick = useCallback(\n    (value: string) => {\n      setSelectedMinute(value);\n      handleTimeChange(selectedHour, value, selectedMeridiem);\n    },\n    [handleTimeChange, selectedHour, selectedMeridiem],\n  );\n\n  const handleMeridiemClick = useCallback(\n    (value: string) => {\n      setSelectedMeridiem(value);\n      handleTimeChange(selectedHour, selectedMinute, value);\n    },\n    [handleTimeChange, selectedHour, selectedMinute],\n  );\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      onOpen={onOpen}\n      onClose={onClose}\n      placement={placement}\n      contentProps={{ width: 'max-content' }}\n      variant=\"default\"\n      size=\"sm\"\n      anchor={\n        <Box>\n          <TextInput\n            rightElement={<Icon size={useIconTextSizeMap(inputProps?.size || 'md')} name=\"clock\" />}\n            value={formattedTime}\n            isReadOnly\n            cursor={'pointer'}\n            {...inputProps}\n          />\n        </Box>\n      }\n    >\n      <Flex height=\"186px\" gap={1.5} overflow=\"hidden\">\n        <ScrollContainer\n          options={hourOptions}\n          optionType=\"hour\"\n          selectedValue={selectedHour}\n          handleClick={handleHourClick}\n          isOpen={isOpen}\n        />\n        <ScrollContainer\n          options={minuteOptions}\n          optionType=\"minute\"\n          selectedValue={formatNumber(selectedMinute)}\n          handleClick={handleMinuteClick}\n          isOpen={isOpen}\n        />\n        <ScrollContainer\n          options={meridiemOptions}\n          optionType=\"meridiem\"\n          selectedValue={selectedMeridiem}\n          handleClick={handleMeridiemClick}\n          isOpen={isOpen}\n        />\n      </Flex>\n    </Popover>\n  );\n};\n"],"names":["TimeOption","value","innerRef","isSelected","handleClick","onClick","useCallback","event","selectedValue","currentTarget","textContent","React","createElement","Box","ref","background","color","fontSize","textAlign","px","py","borderRadius","cursor","_hover","ScrollContainer","options","optionType","isOpen","itemRef","useRef","containerRef","useEffect","current","scrollTop","_a","offsetTop","_b","Flex","direction","gap","overflowY","sx","display","map","option","key","Meridiem","initialTime","minuteInterval","inputProps","placement","onTimeChange","onOpen","onClose","useDisclosure","localTime","useMemo","Date","selectedTime","setSelectedTime","useState","initialSelectedHour","hours","getHours","adjustedHours","toString","selectedHour","setSelectedHour","selectedMinute","setSelectedMinute","getMinutes","selectedMeridiem","setSelectedMeridiem","PM","AM","formattedTime","format","formatNumber","number","formattedValue","length","hourOptions","hour","minuteOptions","minutes","i","push","meridiemOptions","handleTimeChange","minute","meridiem","meridiemAdjustment","Number","time","setHours","date","handleHourClick","handleMinuteClick","handleMeridiemClick","Popover","contentProps","width","variant","size","anchor","TextInput","WrappedTextInput","Object","assign","rightElement","Icon","useIconTextSizeMap","name","isReadOnly","height","overflow"],"mappings":"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"}