@hhgtech/hhg-components 1.22.21 → 1.22.23-beta-1

package/build/esm/{index-662d80a5.js → index-6e83230f.js}

@@ -1 +1 @@
-import{b as n}from"./tslib.es6-2fa94e2c.js";import{M as t}from"./utils-40d4438f.js";import e from"styled-components";import o,{memo as a,useMemo as i}from"react";import{CommonGAssets as s}from"./gAssets.js";import{L as l}from"./Locale-69030fff.js";var h,g,r,p=e.div(h||(h=n(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  z-index: 1;\n  .main-logo-icon {\n    object-fit: contain;\n  }\n  &[data-logo-is-light] {\n    > svg path {\n      fill: #fff;\n    }\n  }\n\n  &[data-has-badge] {\n    @supports (display: flex) and (gap: 1em) {\n      gap: 0.5rem;\n    }\n\n    @supports not ((display: flex) and (gap: 1em)) {\n      > img,\n      amp-image {\n        margin-left: 0.25rem;\n      }\n    }\n  }\n\n  .amp-logo img {\n    object-fit: contain;\n  }\n  .common-logo-seasonal-left,\n  .common-logo-seasonal-right {\n    z-index: -1;\n  }\n  .common-logo-seasonal-left {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n  }\n  .common-logo-seasonal-right {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  }\n  &[data-christmas='true'] {\n    padding-left: 37px;\n    padding-right: 22px;\n    .common-logo-seasonal-left {\n      width: 125px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 23px;\n      height: 17px;\n    }\n  }\n  &[data-new-year='true'] {\n    padding-right: 85px;\n    .common-logo-seasonal-left {\n      top: 35%;\n      width: 100px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 85px;\n      height: 54px;\n    }\n    "," {\n      padding-right: 0;\n      .common-logo-seasonal-right {\n        display: none;\n      }\n    }\n  }\n  &[data-lunar-new-year='true'] {\n    padding-left: 30px;\n    padding-right: 35px;\n    .common-logo-seasonal-left {\n      width: 33px;\n      height: 41px;\n    }\n    .common-logo-seasonal-right {\n      width: 37px;\n      height: 54px;\n    }\n  }\n"],["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  z-index: 1;\n  .main-logo-icon {\n    object-fit: contain;\n  }\n  &[data-logo-is-light] {\n    > svg path {\n      fill: #fff;\n    }\n  }\n\n  &[data-has-badge] {\n    @supports (display: flex) and (gap: 1em) {\n      gap: 0.5rem;\n    }\n\n    @supports not ((display: flex) and (gap: 1em)) {\n      > img,\n      amp-image {\n        margin-left: 0.25rem;\n      }\n    }\n  }\n\n  .amp-logo img {\n    object-fit: contain;\n  }\n  .common-logo-seasonal-left,\n  .common-logo-seasonal-right {\n    z-index: -1;\n  }\n  .common-logo-seasonal-left {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n  }\n  .common-logo-seasonal-right {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  }\n  &[data-christmas='true'] {\n    padding-left: 37px;\n    padding-right: 22px;\n    .common-logo-seasonal-left {\n      width: 125px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 23px;\n      height: 17px;\n    }\n  }\n  &[data-new-year='true'] {\n    padding-right: 85px;\n    .common-logo-seasonal-left {\n      top: 35%;\n      width: 100px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 85px;\n      height: 54px;\n    }\n    "," {\n      padding-right: 0;\n      .common-logo-seasonal-right {\n        display: none;\n      }\n    }\n  }\n  &[data-lunar-new-year='true'] {\n    padding-left: 30px;\n    padding-right: 35px;\n    .common-logo-seasonal-left {\n      width: 33px;\n      height: 41px;\n    }\n    .common-logo-seasonal-right {\n      width: 37px;\n      height: 54px;\n    }\n  }\n"])),t.mbDown),m=e.img(g||(g=n(["\n  height: 16px;\n  width: unset;\n  margin-bottom: 4px;\n  margin-left: -3px;\n"],["\n  height: 16px;\n  width: unset;\n  margin-bottom: 4px;\n  margin-left: -3px;\n"]))),d=a((function(n){var t=n.type,e=n.width,a=n.height,l=i((function(){switch(t){case"hellobacsi":return{width:e||"107px",height:a||"24px",src:s.getAssetPath("logo/hellobacsi.png")};case"hellodoktor":return{width:e||"127px",height:a||"24px",src:s.getAssetPath("logo/hellodoktor.png")};case"hellosehat":return{width:e||"121px",height:a||"27px",src:s.getAssetPath("logo/hellosehat.png")};case"hellohealth":return{width:e||"123px",height:a||"24px",src:s.getAssetPath("logo/hellohealth.png")};case"hellotogether":return{width:e||"150px",height:a||"24px",src:s.getAssetPath("logo/hellotogether.png")};case"hellocare":return{width:e||"99px",height:a||"24px",src:s.getAssetPath("logo/hellocare.png")};case"hellodoctor":return{width:e||"127px",height:a||"24px",src:s.getAssetPath("logo/hellodoctor.png")};case"hellokrupet":return{width:e||"101px",height:a||"24px",src:s.getAssetPath("logo/hellokrupet.png")};case"hellosayarwon":return{width:e||"111px",height:a||"24px",src:s.getAssetPath("logo/hellosayarwon.png")};case"helloyishi":return{width:e||"89px",height:a||"24px",src:s.getAssetPath("logo/helloyishi.png")};case"hellokhunmor":return{width:e||"123px",height:a||"24px",src:s.getAssetPath("logo/hellokhunmor.png")};case"helloswasthya":return{width:e||"105px",height:a||"24px",src:s.getAssetPath("logo/helloswasthya.png")};case"logomark":return{width:e||"60px",height:a||"57px",src:s.getAssetPath("logo/logomark.png")};case"marryBaby":return{width:e||"145px",height:a||"28px",src:s.getAssetPath("logo/marrybaby.png")};default:return null}}),[t,e,a])||{},h=l.src,g=l.width,r=l.height;return o.createElement("img",{className:"main-logo-icon",src:h,style:{width:g,height:r}})})),c=function(n){var t=n.getDate();return 11===n.getMonth()&&t>=16&&t<=25},x={2023:[22,0],2024:[10,1],2025:[29,0],2026:[17,1],2027:[6,1],2028:[26,0],2029:[13,1],2030:[3,1],2031:[23,0],2032:[11,1],2033:[31,0],2034:[19,1],2035:[8,1],2036:[28,0],2037:[15,1],2038:[4,1],2039:[24,0],2040:[12,1]},f=[l.Vietnam,l.Taiwan,l.Indonesia,l.Malaysia],u=function(n){var t=n.getFullYear(),e=x[t];if(!e)return!1;var o=new Date(t,e[1],e[0]),a=new Date(o);a.setDate(o.getDate()-7);var i=new Date(o);return i.setDate(o.getDate()+5),a<=n&&n<=i},w=function(n){var t=n.getDate(),e=n.getMonth();return 11===e&&t>=26||0===e&&t<=15},y=e.div(r||(r=n(["\n  width: 100%;\n  margin: 0 auto;\n  "," {\n    padding: 0 16px;\n  }\n  "," {\n    max-width: 1170px;\n    &[data-type='marryBaby'] {\n      max-width: 1064px;\n    }\n  }\n"],["\n  width: 100%;\n  margin: 0 auto;\n  "," {\n    padding: 0 16px;\n  }\n  "," {\n    max-width: 1170px;\n    &[data-type='marryBaby'] {\n      max-width: 1064px;\n    }\n  }\n"])),t.mbDown,t.tdUp),b=function(n){var t=n.children,e=n.className,a=n.style,i=n.type;return o.createElement(y,{className:e,style:a,"data-type":i},t)};export{b as C,f as L,p as S,u as a,w as b,d as c,m as d,c as i};
+import{b as n}from"./tslib.es6-8d81858b.js";import{M as t}from"./utils-a3eccc66.js";import e from"styled-components";import o,{memo as a,useMemo as i}from"react";import{CommonGAssets as s}from"./gAssets.js";import{L as l}from"./Locale-dd73dff4.js";var h,g,r,p=e.div(h||(h=n(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  z-index: 1;\n  .main-logo-icon {\n    object-fit: contain;\n  }\n  &[data-logo-is-light] {\n    > svg path {\n      fill: #fff;\n    }\n  }\n\n  &[data-has-badge] {\n    @supports (display: flex) and (gap: 1em) {\n      gap: 0.5rem;\n    }\n\n    @supports not ((display: flex) and (gap: 1em)) {\n      > img,\n      amp-image {\n        margin-left: 0.25rem;\n      }\n    }\n  }\n\n  .amp-logo img {\n    object-fit: contain;\n  }\n  .common-logo-seasonal-left,\n  .common-logo-seasonal-right {\n    z-index: -1;\n  }\n  .common-logo-seasonal-left {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n  }\n  .common-logo-seasonal-right {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  }\n  &[data-christmas='true'] {\n    padding-left: 37px;\n    padding-right: 22px;\n    .common-logo-seasonal-left {\n      width: 125px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 23px;\n      height: 17px;\n    }\n  }\n  &[data-new-year='true'] {\n    padding-right: 85px;\n    .common-logo-seasonal-left {\n      top: 35%;\n      width: 100px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 85px;\n      height: 54px;\n    }\n    "," {\n      padding-right: 0;\n      .common-logo-seasonal-right {\n        display: none;\n      }\n    }\n  }\n  &[data-lunar-new-year='true'] {\n    padding-left: 30px;\n    padding-right: 35px;\n    .common-logo-seasonal-left {\n      width: 33px;\n      height: 41px;\n    }\n    .common-logo-seasonal-right {\n      width: 37px;\n      height: 54px;\n    }\n  }\n"],["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  z-index: 1;\n  .main-logo-icon {\n    object-fit: contain;\n  }\n  &[data-logo-is-light] {\n    > svg path {\n      fill: #fff;\n    }\n  }\n\n  &[data-has-badge] {\n    @supports (display: flex) and (gap: 1em) {\n      gap: 0.5rem;\n    }\n\n    @supports not ((display: flex) and (gap: 1em)) {\n      > img,\n      amp-image {\n        margin-left: 0.25rem;\n      }\n    }\n  }\n\n  .amp-logo img {\n    object-fit: contain;\n  }\n  .common-logo-seasonal-left,\n  .common-logo-seasonal-right {\n    z-index: -1;\n  }\n  .common-logo-seasonal-left {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n  }\n  .common-logo-seasonal-right {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  }\n  &[data-christmas='true'] {\n    padding-left: 37px;\n    padding-right: 22px;\n    .common-logo-seasonal-left {\n      width: 125px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 23px;\n      height: 17px;\n    }\n  }\n  &[data-new-year='true'] {\n    padding-right: 85px;\n    .common-logo-seasonal-left {\n      top: 35%;\n      width: 100px;\n      height: 56px;\n    }\n    .common-logo-seasonal-right {\n      width: 85px;\n      height: 54px;\n    }\n    "," {\n      padding-right: 0;\n      .common-logo-seasonal-right {\n        display: none;\n      }\n    }\n  }\n  &[data-lunar-new-year='true'] {\n    padding-left: 30px;\n    padding-right: 35px;\n    .common-logo-seasonal-left {\n      width: 33px;\n      height: 41px;\n    }\n    .common-logo-seasonal-right {\n      width: 37px;\n      height: 54px;\n    }\n  }\n"])),t.mbDown),m=e.img(g||(g=n(["\n  height: 16px;\n  width: unset;\n  margin-bottom: 4px;\n  margin-left: -3px;\n"],["\n  height: 16px;\n  width: unset;\n  margin-bottom: 4px;\n  margin-left: -3px;\n"]))),d=a((function(n){var t=n.type,e=n.width,a=n.height,l=i((function(){switch(t){case"hellobacsi":return{width:e||"107px",height:a||"24px",src:s.getAssetPath("logo/hellobacsi.png")};case"hellodoktor":return{width:e||"127px",height:a||"24px",src:s.getAssetPath("logo/hellodoktor.png")};case"hellosehat":return{width:e||"121px",height:a||"27px",src:s.getAssetPath("logo/hellosehat.png")};case"hellohealth":return{width:e||"123px",height:a||"24px",src:s.getAssetPath("logo/hellohealth.png")};case"hellotogether":return{width:e||"150px",height:a||"24px",src:s.getAssetPath("logo/hellotogether.png")};case"hellocare":return{width:e||"99px",height:a||"24px",src:s.getAssetPath("logo/hellocare.png")};case"hellodoctor":return{width:e||"127px",height:a||"24px",src:s.getAssetPath("logo/hellodoctor.png")};case"hellokrupet":return{width:e||"101px",height:a||"24px",src:s.getAssetPath("logo/hellokrupet.png")};case"hellosayarwon":return{width:e||"111px",height:a||"24px",src:s.getAssetPath("logo/hellosayarwon.png")};case"helloyishi":return{width:e||"89px",height:a||"24px",src:s.getAssetPath("logo/helloyishi.png")};case"hellokhunmor":return{width:e||"123px",height:a||"24px",src:s.getAssetPath("logo/hellokhunmor.png")};case"helloswasthya":return{width:e||"105px",height:a||"24px",src:s.getAssetPath("logo/helloswasthya.png")};case"logomark":return{width:e||"60px",height:a||"57px",src:s.getAssetPath("logo/logomark.png")};case"marryBaby":return{width:e||"145px",height:a||"28px",src:s.getAssetPath("logo/marrybaby.png")};default:return null}}),[t,e,a])||{},h=l.src,g=l.width,r=l.height;return o.createElement("img",{className:"main-logo-icon",src:h,style:{width:g,height:r}})})),c=function(n){var t=n.getDate();return 11===n.getMonth()&&t>=16&&t<=25},x={2023:[22,0],2024:[10,1],2025:[29,0],2026:[17,1],2027:[6,1],2028:[26,0],2029:[13,1],2030:[3,1],2031:[23,0],2032:[11,1],2033:[31,0],2034:[19,1],2035:[8,1],2036:[28,0],2037:[15,1],2038:[4,1],2039:[24,0],2040:[12,1]},f=[l.Vietnam,l.Taiwan,l.Indonesia,l.Malaysia],u=function(n){var t=n.getFullYear(),e=x[t];if(!e)return!1;var o=new Date(t,e[1],e[0]),a=new Date(o);a.setDate(o.getDate()-7);var i=new Date(o);return i.setDate(o.getDate()+5),a<=n&&n<=i},w=function(n){var t=n.getDate(),e=n.getMonth();return 11===e&&t>=26||0===e&&t<=15},y=e.div(r||(r=n(["\n  width: 100%;\n  margin: 0 auto;\n  "," {\n    padding: 0 16px;\n  }\n  "," {\n    max-width: 1170px;\n    &[data-type='marryBaby'] {\n      max-width: 1064px;\n    }\n  }\n"],["\n  width: 100%;\n  margin: 0 auto;\n  "," {\n    padding: 0 16px;\n  }\n  "," {\n    max-width: 1170px;\n    &[data-type='marryBaby'] {\n      max-width: 1064px;\n    }\n  }\n"])),t.mbDown,t.tdUp),b=function(n){var t=n.children,e=n.className,a=n.style,i=n.type;return o.createElement(y,{className:e,style:a,"data-type":i},t)};export{b as C,f as L,p as S,u as a,w as b,d as c,m as d,c as i};

package/build/esm/{index-71a7683a.js → index-8099bdd7.js}

@@ -1 +1 @@
-import{b as n,c as e,_ as t}from"./tslib.es6-2fa94e2c.js";import i from"styled-components";import o,{useState as a}from"react";import{L as r}from"./index-bbc3936f.js";import{M as s}from"./utils-40d4438f.js";var l,p=i.div(l||(l=n(["\n  --width: ",";\n  --height: ",";\n\n  width: calc(var(--width) * 1px);\n  height: calc(var(--height) * 1px);\n  img,\n  svg {\n    width: calc(var(--width) * 1px);\n    height: calc(var(--height) * 1px);\n  }\n\n  img {\n    object-fit: contain;\n  }\n"],["\n  --width: ",";\n  --height: ",";\n\n  width: calc(var(--width) * 1px);\n  height: calc(var(--height) * 1px);\n  img,\n  svg {\n    width: calc(var(--width) * 1px);\n    height: calc(var(--height) * 1px);\n  }\n\n  img {\n    object-fit: contain;\n  }\n"])),(function(n){return n.theme.width||20}),(function(n){return n.theme.height||20})),c=i.div(d||(d=n(["\n  position: relative;\n  width: 100%;\n\n  &[data-has-error] {\n    input {\n      border-color: ",";\n    }\n  }\n\n  input {\n    width: 100%;\n    padding: 12px 16px;\n    border: solid 1px ",";\n    border-radius: 6px;\n\n    &:active,\n    &:focus,\n    .focused & {\n      border-color: ",";\n      box-shadow: 0px 0px 2px 2px ",";\n    }\n\n    &:disabled {\n      background-color: ",";\n      cursor: not-allowed;\n    }\n  }\n\n  &[data-has-action-icon] {\n    input {\n      padding: 12px 48px 12px 16px;\n    }\n  }\n  &[data-has-display-icon] {\n    input {\n      padding: 12px 16px 12px 48px;\n    }\n  }\n\n  &[data-has-action-icon][data-has-display-icon] {\n    input {\n      padding: 12px 48px;\n    }\n  }\n\n  &[data-size='lg'] {\n    input {\n      font-size: 16px;\n      font-weight: ",";\n      "," {\n        font-size: 22px;\n        line-height: 1.2;\n      }\n\n      "," {\n        font-size: 26px;\n        line-height: 1.2;\n      }\n    }\n  }\n  &[data-size='md'] {\n    input {\n      font-weight: ",";\n      "," {\n        font-size: 14px;\n        line-height: 1.2;\n      }\n\n      "," {\n        font-size: 16px;\n        line-height: 1.2;\n      }\n    }\n  }\n  &[data-size='sm'] {\n    input {\n      font-weight: ",";\n      "," {\n        font-size: 13px;\n        line-height: 1.5;\n      }\n\n      "," {\n        font-size: 13px;\n        line-height: 1.5;\n      }\n    }\n  }\n"],["\n  position: relative;\n  width: 100%;\n\n  &[data-has-error] {\n    input {\n      border-color: ",";\n    }\n  }\n\n  input {\n    width: 100%;\n    padding: 12px 16px;\n    border: solid 1px ",";\n    border-radius: 6px;\n\n    &:active,\n    &:focus,\n    .focused & {\n      border-color: ",";\n      box-shadow: 0px 0px 2px 2px ",";\n    }\n\n    &:disabled {\n      background-color: ",";\n      cursor: not-allowed;\n    }\n  }\n\n  &[data-has-action-icon] {\n    input {\n      padding: 12px 48px 12px 16px;\n    }\n  }\n  &[data-has-display-icon] {\n    input {\n      padding: 12px 16px 12px 48px;\n    }\n  }\n\n  &[data-has-action-icon][data-has-display-icon] {\n    input {\n      padding: 12px 48px;\n    }\n  }\n\n  &[data-size='lg'] {\n    input {\n      font-size: 16px;\n      font-weight: ",";\n      "," {\n        font-size: 22px;\n        line-height: 1.2;\n      }\n\n      "," {\n        font-size: 26px;\n        line-height: 1.2;\n      }\n    }\n  }\n  &[data-size='md'] {\n    input {\n      font-weight: ",";\n      "," {\n        font-size: 14px;\n        line-height: 1.2;\n      }\n\n      "," {\n        font-size: 16px;\n        line-height: 1.2;\n      }\n    }\n  }\n  &[data-size='sm'] {\n    input {\n      font-weight: ",";\n      "," {\n        font-size: 13px;\n        line-height: 1.5;\n      }\n\n      "," {\n        font-size: 13px;\n        line-height: 1.5;\n      }\n    }\n  }\n"])),(function(n){return n.theme.colors.red700}),(function(n){return n.theme.colors.gray200}),(function(n){return n.theme.colors.primaryBase}),(function(n){return n.theme.colors.blue200}),(function(n){return n.theme.colors.gray100}),(function(n){return n.theme.sizes.fwRegular}),s.mbDown,s.mbUp,(function(n){return n.theme.sizes.fwRegular}),s.mbDown,s.mbUp,(function(n){return n.theme.sizes.fwRegular}),s.mbDown,s.mbUp);i.label(h||(h=n(["\n  display: inline-block;\n  margin-bottom: 4px;\n  color: ",";\n  font-weight: ",";\n"],["\n  display: inline-block;\n  margin-bottom: 4px;\n  color: ",";\n  font-weight: ",";\n"])),(function(n){return n.theme.colors.gray600}),(function(n){return n.theme.sizes.fwBold}));var d,h,u,f,m,x=i.label(u||(u=n(["\n  color: ",";\n  font-weight: ",";\n"],["\n  color: ",";\n  font-weight: ",";\n"])),(function(n){return n.theme.colors.red700}),(function(n){return n.theme.sizes.fwRegular})),g=i.div(f||(f=n(["\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  cursor: pointer;\n  transform: translateY(-50%);\n"],["\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  cursor: pointer;\n  transform: translateY(-50%);\n"]))),b=i.div(m||(m=n(["\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  cursor: default;\n  transform: translateY(-50%);\n"],["\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  cursor: default;\n  transform: translateY(-50%);\n"]))),w=o.forwardRef((function(n,i){var s=n.name,l=n.errorMessage,p=n.autoComplete,d=void 0===p?"off":p,h=n.defaultValue,u=n.actionIcon,f=n.displayIcon,m=n.isDeleteAction,w=n.onActionClick,v=n.label,y=n.placeholder,z=n.className,C=n.onChange,N=n.onKeyPress,I=n.isDisabled,K=n.CustomInput,k=n.size,D=n.style,E=n.autoFocus,F=n.type,j=void 0===F?"text":F,P=n.isNumerousKeyboard,R=void 0!==P&&P,A=n.onFocus,M=n.enterKeyHint,Y=n.nativeOnChange,H=e(n,["name","errorMessage","autoComplete","defaultValue","actionIcon","displayIcon","isDeleteAction","onActionClick","label","placeholder","className","onChange","onKeyPress","isDisabled","CustomInput","size","style","autoFocus","type","isNumerousKeyboard","onFocus","enterKeyHint","nativeOnChange"]),L=a(h),U=L[0],B=L[1];return o.createElement(c,{"data-size":k,className:z,"data-has-action-icon":!!u||void 0,"data-has-display-icon":!!f||void 0,"data-has-error":l&&l.length>0||void 0,style:D},v&&o.createElement(r,{size:"label2",htmlFor:s,className:"inputLabel"},v),o.createElement("div",{style:{position:"relative"}},K||o.createElement("input",t({id:s,name:s,placeholder:y,onChange:null!=Y?Y:function(n){return e=n.target.value,B(e),void C(e);var e},onKeyPress:N,type:j,"aria-label":j,disabled:I,value:U,autoComplete:d,ref:i,autoFocus:E,inputMode:R||"number"===j?"numeric":j,pattern:R?"[0-9]*":".*",onFocus:A,enterKeyHint:M},H)),f&&o.createElement(b,{className:"displayIcon"},f),u&&o.createElement(g,{className:"actionIcon",onClick:function(){var n;m&&(B(""),null===(n=i.current)||void 0===n||n.focus()),w&&w()}},u)),l&&l.length>0&&o.createElement(x,{className:"errorLabel"},l))}));w.displayName="PureInput";export{w as P,p as S};
+import{b as n,c as e,_ as t}from"./tslib.es6-8d81858b.js";import i from"styled-components";import o,{useState as a}from"react";import{L as r}from"./index-aeb16c55.js";import{M as s}from"./utils-a3eccc66.js";var l,p=i.div(l||(l=n(["\n  --width: ",";\n  --height: ",";\n\n  width: calc(var(--width) * 1px);\n  height: calc(var(--height) * 1px);\n  img,\n  svg {\n    width: calc(var(--width) * 1px);\n    height: calc(var(--height) * 1px);\n  }\n\n  img {\n    object-fit: contain;\n  }\n"],["\n  --width: ",";\n  --height: ",";\n\n  width: calc(var(--width) * 1px);\n  height: calc(var(--height) * 1px);\n  img,\n  svg {\n    width: calc(var(--width) * 1px);\n    height: calc(var(--height) * 1px);\n  }\n\n  img {\n    object-fit: contain;\n  }\n"])),(function(n){return n.theme.width||20}),(function(n){return n.theme.height||20})),c=i.div(d||(d=n(["\n  position: relative;\n  width: 100%;\n\n  &[data-has-error] {\n    input {\n      border-color: ",";\n    }\n  }\n\n  input {\n    width: 100%;\n    padding: 12px 16px;\n    border: solid 1px ",";\n    border-radius: 6px;\n\n    &:active,\n    &:focus,\n    .focused & {\n      border-color: ",";\n      box-shadow: 0px 0px 2px 2px ",";\n    }\n\n    &:disabled {\n      background-color: ",";\n      cursor: not-allowed;\n    }\n  }\n\n  &[data-has-action-icon] {\n    input {\n      padding: 12px 48px 12px 16px;\n    }\n  }\n  &[data-has-display-icon] {\n    input {\n      padding: 12px 16px 12px 48px;\n    }\n  }\n\n  &[data-has-action-icon][data-has-display-icon] {\n    input {\n      padding: 12px 48px;\n    }\n  }\n\n  &[data-size='lg'] {\n    input {\n      font-size: 16px;\n      font-weight: ",";\n      "," {\n        font-size: 22px;\n        line-height: 1.2;\n      }\n\n      "," {\n        font-size: 26px;\n        line-height: 1.2;\n      }\n    }\n  }\n  &[data-size='md'] {\n    input {\n      font-weight: ",";\n      "," {\n        font-size: 14px;\n        line-height: 1.2;\n      }\n\n      "," {\n        font-size: 16px;\n        line-height: 1.2;\n      }\n    }\n  }\n  &[data-size='sm'] {\n    input {\n      font-weight: ",";\n      "," {\n        font-size: 13px;\n        line-height: 1.5;\n      }\n\n      "," {\n        font-size: 13px;\n        line-height: 1.5;\n      }\n    }\n  }\n"],["\n  position: relative;\n  width: 100%;\n\n  &[data-has-error] {\n    input {\n      border-color: ",";\n    }\n  }\n\n  input {\n    width: 100%;\n    padding: 12px 16px;\n    border: solid 1px ",";\n    border-radius: 6px;\n\n    &:active,\n    &:focus,\n    .focused & {\n      border-color: ",";\n      box-shadow: 0px 0px 2px 2px ",";\n    }\n\n    &:disabled {\n      background-color: ",";\n      cursor: not-allowed;\n    }\n  }\n\n  &[data-has-action-icon] {\n    input {\n      padding: 12px 48px 12px 16px;\n    }\n  }\n  &[data-has-display-icon] {\n    input {\n      padding: 12px 16px 12px 48px;\n    }\n  }\n\n  &[data-has-action-icon][data-has-display-icon] {\n    input {\n      padding: 12px 48px;\n    }\n  }\n\n  &[data-size='lg'] {\n    input {\n      font-size: 16px;\n      font-weight: ",";\n      "," {\n        font-size: 22px;\n        line-height: 1.2;\n      }\n\n      "," {\n        font-size: 26px;\n        line-height: 1.2;\n      }\n    }\n  }\n  &[data-size='md'] {\n    input {\n      font-weight: ",";\n      "," {\n        font-size: 14px;\n        line-height: 1.2;\n      }\n\n      "," {\n        font-size: 16px;\n        line-height: 1.2;\n      }\n    }\n  }\n  &[data-size='sm'] {\n    input {\n      font-weight: ",";\n      "," {\n        font-size: 13px;\n        line-height: 1.5;\n      }\n\n      "," {\n        font-size: 13px;\n        line-height: 1.5;\n      }\n    }\n  }\n"])),(function(n){return n.theme.colors.red700}),(function(n){return n.theme.colors.gray200}),(function(n){return n.theme.colors.primaryBase}),(function(n){return n.theme.colors.blue200}),(function(n){return n.theme.colors.gray100}),(function(n){return n.theme.sizes.fwRegular}),s.mbDown,s.mbUp,(function(n){return n.theme.sizes.fwRegular}),s.mbDown,s.mbUp,(function(n){return n.theme.sizes.fwRegular}),s.mbDown,s.mbUp);i.label(h||(h=n(["\n  display: inline-block;\n  margin-bottom: 4px;\n  color: ",";\n  font-weight: ",";\n"],["\n  display: inline-block;\n  margin-bottom: 4px;\n  color: ",";\n  font-weight: ",";\n"])),(function(n){return n.theme.colors.gray600}),(function(n){return n.theme.sizes.fwBold}));var d,h,u,f,m,x=i.label(u||(u=n(["\n  color: ",";\n  font-weight: ",";\n"],["\n  color: ",";\n  font-weight: ",";\n"])),(function(n){return n.theme.colors.red700}),(function(n){return n.theme.sizes.fwRegular})),g=i.div(f||(f=n(["\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  cursor: pointer;\n  transform: translateY(-50%);\n"],["\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: inline-flex;\n  cursor: pointer;\n  transform: translateY(-50%);\n"]))),b=i.div(m||(m=n(["\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  cursor: default;\n  transform: translateY(-50%);\n"],["\n  position: absolute;\n  top: 50%;\n  left: 16px;\n  display: inline-flex;\n  cursor: default;\n  transform: translateY(-50%);\n"]))),w=o.forwardRef((function(n,i){var s=n.name,l=n.errorMessage,p=n.autoComplete,d=void 0===p?"off":p,h=n.defaultValue,u=n.actionIcon,f=n.displayIcon,m=n.isDeleteAction,w=n.onActionClick,v=n.label,y=n.placeholder,z=n.className,C=n.onChange,N=n.onKeyPress,I=n.isDisabled,K=n.CustomInput,k=n.size,D=n.style,E=n.autoFocus,F=n.type,j=void 0===F?"text":F,P=n.isNumerousKeyboard,R=void 0!==P&&P,A=n.onFocus,M=n.enterKeyHint,Y=n.nativeOnChange,H=e(n,["name","errorMessage","autoComplete","defaultValue","actionIcon","displayIcon","isDeleteAction","onActionClick","label","placeholder","className","onChange","onKeyPress","isDisabled","CustomInput","size","style","autoFocus","type","isNumerousKeyboard","onFocus","enterKeyHint","nativeOnChange"]),L=a(h),U=L[0],B=L[1];return o.createElement(c,{"data-size":k,className:z,"data-has-action-icon":!!u||void 0,"data-has-display-icon":!!f||void 0,"data-has-error":l&&l.length>0||void 0,style:D},v&&o.createElement(r,{size:"label2",htmlFor:s,className:"inputLabel"},v),o.createElement("div",{style:{position:"relative"}},K||o.createElement("input",t({id:s,name:s,placeholder:y,onChange:null!=Y?Y:function(n){return e=n.target.value,B(e),void C(e);var e},onKeyPress:N,type:j,"aria-label":j,disabled:I,value:U,autoComplete:d,ref:i,autoFocus:E,inputMode:R||"number"===j?"numeric":j,pattern:R?"[0-9]*":".*",onFocus:A,enterKeyHint:M},H)),f&&o.createElement(b,{className:"displayIcon"},f),u&&o.createElement(g,{className:"actionIcon",onClick:function(){var n;m&&(B(""),null===(n=i.current)||void 0===n||n.focus()),w&&w()}},u)),l&&l.length>0&&o.createElement(x,{className:"errorLabel"},l))}));w.displayName="PureInput";export{w as P,p as S};