@os-design/core 1.0.198 → 1.0.200

package/dist/cjs/InputSearch/index.js

@@ -64,9 +64,9 @@ var InputSearch = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
     setForwardedValue = _useForwardedState2[1];
   return /*#__PURE__*/_react2["default"].createElement(_Input["default"], _extends({
     type: "text",
-    left: /*#__PURE__*/_react2["default"].createElement(_react2["default"].Fragment, null, /*#__PURE__*/_react2["default"].createElement(_icons.Search, {
+    left: left || /*#__PURE__*/_react2["default"].createElement(_icons.Search, {
       key: "search-icon"
-    }), left),
+    }),
     leftHasPadding: leftHasPadding,
     right: /*#__PURE__*/_react2["default"].createElement(_react2["default"].Fragment, null, !!forwardedValue && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
       overrides: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_theming","_utils","_react2","_interopRequireWildcard","_Button","_Input","_defaultLocale","_excluded","_templateObject","_templateObject2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","fadeIn","keyframes","ClearButton","styled","Button","p","theme","transitionDelay","InputSearch","forwardRef","_ref","ref","_ref$locale","locale","defaultLocale","defaultValue","_ref$onChange","onChange","disabled","left","_ref$leftHasPadding","leftHasPadding","right","rest","_useForwardedRef","useForwardedRef","_useForwardedRef2","inputRef","mergedInputRef","_useForwardedState","useForwardedState","_useForwardedState2","forwardedValue","setForwardedValue","createElement","type","Fragment","Search","ThemeOverrider","overrides","buttonIconScaleFactor","wide","size","onClick","current","focus","clearLabel","CloseCircle","role","displayName","_default","exports"],"sources":["../../../src/InputSearch/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CloseCircle, Search } from '@os-design/icons';\nimport { ThemeOverrider } from '@os-design/theming';\n\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Button from '../Button';\n\nimport Input, { InputProps } from '../Input';\n\nimport defaultLocale, { InputSearchLocale } from './utils/defaultLocale';\n\nexport interface InputSearchProps\n  extends Omit<InputProps, 'type' | 'onChange'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputSearchLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst ClearButton = styled(Button)`\n  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n/**\n * The search input.\n */\nconst InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      disabled,\n      left,\n      leftHasPadding = true,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Input\n        type='text'\n        left={\n          <>\n            <Search key='search-icon' />\n            {left}\n          </>\n        }\n        leftHasPadding={leftHasPadding}\n        right={\n          <>\n            {!!forwardedValue && (\n              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>\n                <ClearButton\n                  key='clear-button'\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => {\n                    setForwardedValue('');\n                    if (!inputRef.current) return;\n                    inputRef.current.focus();\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <CloseCircle />\n                </ClearButton>\n              </ThemeOverrider>\n            )}\n            {right}\n          </>\n        }\n        value={forwardedValue}\n        onChange={setForwardedValue}\n        role='searchbox'\n        disabled={disabled}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputSearch.displayName = 'InputSearch';\n\nexport default InputSearch;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_theming","_utils","_react2","_interopRequireWildcard","_Button","_Input","_defaultLocale","_excluded","_templateObject","_templateObject2","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","fadeIn","keyframes","ClearButton","styled","Button","p","theme","transitionDelay","InputSearch","forwardRef","_ref","ref","_ref$locale","locale","defaultLocale","defaultValue","_ref$onChange","onChange","disabled","left","_ref$leftHasPadding","leftHasPadding","right","rest","_useForwardedRef","useForwardedRef","_useForwardedRef2","inputRef","mergedInputRef","_useForwardedState","useForwardedState","_useForwardedState2","forwardedValue","setForwardedValue","createElement","type","Search","Fragment","ThemeOverrider","overrides","buttonIconScaleFactor","wide","size","onClick","current","focus","clearLabel","CloseCircle","role","displayName","_default","exports"],"sources":["../../../src/InputSearch/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CloseCircle, Search } from '@os-design/icons';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Button from '../Button';\nimport Input, { InputProps } from '../Input';\nimport defaultLocale, { InputSearchLocale } from './utils/defaultLocale';\n\nexport interface InputSearchProps\n  extends Omit<InputProps, 'type' | 'onChange'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputSearchLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst ClearButton = styled(Button)`\n  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n/**\n * The search input.\n */\nconst InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      disabled,\n      left,\n      leftHasPadding = true,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Input\n        type='text'\n        left={left || <Search key='search-icon' />}\n        leftHasPadding={leftHasPadding}\n        right={\n          <>\n            {!!forwardedValue && (\n              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>\n                <ClearButton\n                  key='clear-button'\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => {\n                    setForwardedValue('');\n                    if (!inputRef.current) return;\n                    inputRef.current.focus();\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <CloseCircle />\n                </ClearButton>\n              </ThemeOverrider>\n            )}\n            {right}\n          </>\n        }\n        value={forwardedValue}\n        onChange={setForwardedValue}\n        role='searchbox'\n        disabled={disabled}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputSearch.displayName = 'InputSearch';\n\nexport default InputSearch;\n"],"mappings":"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"}

package/dist/esm/InputSearch/index.js

@@ -38,9 +38,9 @@ const InputSearch = /*#__PURE__*/forwardRef(({
   });
   return /*#__PURE__*/React.createElement(Input, _extends({
     type: "text",
-    left: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Search, {
+    left: left || /*#__PURE__*/React.createElement(Search, {
       key: "search-icon"
-    }), left),
+    }),
     leftHasPadding: leftHasPadding,
     right: /*#__PURE__*/React.createElement(React.Fragment, null, !!forwardedValue && /*#__PURE__*/React.createElement(ThemeOverrider, {
       overrides: {

package/dist/esm/InputSearch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["keyframes","styled","CloseCircle","Search","ThemeOverrider","useForwardedRef","useForwardedState","React","forwardRef","Button","Input","defaultLocale","fadeIn","ClearButton","p","theme","transitionDelay","InputSearch","locale","value","defaultValue","onChange","disabled","left","leftHasPadding","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","createElement","_extends","type","Fragment","key","overrides","buttonIconScaleFactor","wide","size","onClick","current","focus","clearLabel","role","displayName"],"sources":["../../../src/InputSearch/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CloseCircle, Search } from '@os-design/icons';\nimport { ThemeOverrider } from '@os-design/theming';\n\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Button from '../Button';\n\nimport Input, { InputProps } from '../Input';\n\nimport defaultLocale, { InputSearchLocale } from './utils/defaultLocale';\n\nexport interface InputSearchProps\n  extends Omit<InputProps, 'type' | 'onChange'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputSearchLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst ClearButton = styled(Button)`\n  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n/**\n * The search input.\n */\nconst InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      disabled,\n      left,\n      leftHasPadding = true,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Input\n        type='text'\n        left={\n          <>\n            <Search key='search-icon' />\n            {left}\n          </>\n        }\n        leftHasPadding={leftHasPadding}\n        right={\n          <>\n            {!!forwardedValue && (\n              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>\n                <ClearButton\n                  key='clear-button'\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => {\n                    setForwardedValue('');\n                    if (!inputRef.current) return;\n                    inputRef.current.focus();\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <CloseCircle />\n                </ClearButton>\n              </ThemeOverrider>\n            )}\n            {right}\n          </>\n        }\n        value={forwardedValue}\n        onChange={setForwardedValue}\n        role='searchbox'\n        disabled={disabled}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputSearch.displayName = 'InputSearch';\n\nexport default InputSearch;\n"],"mappings":";AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,WAAW,EAAEC,MAAM,QAAQ,kBAAkB;AACtD,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,kBAAkB;AACrE,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,WAAW;AAE9B,OAAOC,KAAK,MAAsB,UAAU;AAE5C,OAAOC,aAAa,MAA6B,uBAAuB;AA0BxE,MAAMC,MAAM,GAAGZ,SAAU;AACzB;AACA;AACA,CAAC;AAED,MAAMa,WAAW,GAAGZ,MAAM,CAACQ,MAAM,CAAE;AACnC,eAAeG,MAAO,IAAIE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,eAAgB;AACxD,CAAC;;AAED;AACA;AACA;AACA,MAAMC,WAAW,gBAAGT,UAAU,CAC5B,CACE;EACEU,MAAM,GAAGP,aAAa;EACtBQ,KAAK;EACLC,YAAY;EACZC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC,QAAQ;EACRC,IAAI;EACJC,cAAc,GAAG,IAAI;EACrBC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,QAAQ,EAAEC,cAAc,CAAC,GAAGxB,eAAe,CAACsB,GAAG,CAAC;EACvD,MAAM,CAACG,cAAc,EAAEC,iBAAiB,CAAC,GAAGzB,iBAAiB,CAAC;IAC5Da,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EAEF,oBACEd,KAAA,CAAAyB,aAAA,CAACtB,KAAK,EAAAuB,QAAA;IACJC,IAAI,EAAC,MAAM;IACXX,IAAI,eACFhB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA4B,QAAA,qBACE5B,KAAA,CAAAyB,aAAA,CAAC7B,MAAM;MAACiC,GAAG,EAAC;IAAa,CAAE,CAAC,EAC3Bb,IACD,CACH;IACDC,cAAc,EAAEA,cAAe;IAC/BC,KAAK,eACHlB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA4B,QAAA,QACG,CAAC,CAACL,cAAc,iBACfvB,KAAA,CAAAyB,aAAA,CAAC5B,cAAc;MAACiC,SAAS,EAAE;QAAEC,qBAAqB,EAAE;MAAI;IAAE,gBACxD/B,KAAA,CAAAyB,aAAA,CAACnB,WAAW;MACVuB,GAAG,EAAC,cAAc;MAClBF,IAAI,EAAC,OAAO;MACZK,IAAI,EAAC,OAAO;MACZC,IAAI,EAAC,OAAO;MACZlB,QAAQ,EAAEA,QAAS;MACnBmB,OAAO,EAAEA,CAAA,KAAM;QACbV,iBAAiB,CAAC,EAAE,CAAC;QACrB,IAAI,CAACH,QAAQ,CAACc,OAAO,EAAE;QACvBd,QAAQ,CAACc,OAAO,CAACC,KAAK,CAAC,CAAC;MAC1B,CAAE;MACF,cAAYzB,MAAM,CAAC0B;IAAW,gBAE9BrC,KAAA,CAAAyB,aAAA,CAAC9B,WAAW,MAAE,CACH,CACC,CACjB,EACAuB,KACD,CACH;IACDN,KAAK,EAAEW,cAAe;IACtBT,QAAQ,EAAEU,iBAAkB;IAC5Bc,IAAI,EAAC,WAAW;IAChBvB,QAAQ,EAAEA;EAAS,GACfI,IAAI;IACRC,GAAG,EAAEE;EAAe,EACrB,CAAC;AAEN,CACF,CAAC;AAEDZ,WAAW,CAAC6B,WAAW,GAAG,aAAa;AAEvC,eAAe7B,WAAW"}
+{"version":3,"file":"index.js","names":["keyframes","styled","CloseCircle","Search","ThemeOverrider","useForwardedRef","useForwardedState","React","forwardRef","Button","Input","defaultLocale","fadeIn","ClearButton","p","theme","transitionDelay","InputSearch","locale","value","defaultValue","onChange","disabled","left","leftHasPadding","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","createElement","_extends","type","key","Fragment","overrides","buttonIconScaleFactor","wide","size","onClick","current","focus","clearLabel","role","displayName"],"sources":["../../../src/InputSearch/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { CloseCircle, Search } from '@os-design/icons';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport Button from '../Button';\nimport Input, { InputProps } from '../Input';\nimport defaultLocale, { InputSearchLocale } from './utils/defaultLocale';\n\nexport interface InputSearchProps\n  extends Omit<InputProps, 'type' | 'onChange'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputSearchLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst ClearButton = styled(Button)`\n  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n/**\n * The search input.\n */\nconst InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      disabled,\n      left,\n      leftHasPadding = true,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Input\n        type='text'\n        left={left || <Search key='search-icon' />}\n        leftHasPadding={leftHasPadding}\n        right={\n          <>\n            {!!forwardedValue && (\n              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>\n                <ClearButton\n                  key='clear-button'\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => {\n                    setForwardedValue('');\n                    if (!inputRef.current) return;\n                    inputRef.current.focus();\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <CloseCircle />\n                </ClearButton>\n              </ThemeOverrider>\n            )}\n            {right}\n          </>\n        }\n        value={forwardedValue}\n        onChange={setForwardedValue}\n        role='searchbox'\n        disabled={disabled}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputSearch.displayName = 'InputSearch';\n\nexport default InputSearch;\n"],"mappings":";AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,WAAW,EAAEC,MAAM,QAAQ,kBAAkB;AACtD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,kBAAkB;AACrE,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,KAAK,MAAsB,UAAU;AAC5C,OAAOC,aAAa,MAA6B,uBAAuB;AA0BxE,MAAMC,MAAM,GAAGZ,SAAU;AACzB;AACA;AACA,CAAC;AAED,MAAMa,WAAW,GAAGZ,MAAM,CAACQ,MAAM,CAAE;AACnC,eAAeG,MAAO,IAAIE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,eAAgB;AACxD,CAAC;;AAED;AACA;AACA;AACA,MAAMC,WAAW,gBAAGT,UAAU,CAC5B,CACE;EACEU,MAAM,GAAGP,aAAa;EACtBQ,KAAK;EACLC,YAAY;EACZC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;EACnBC,QAAQ;EACRC,IAAI;EACJC,cAAc,GAAG,IAAI;EACrBC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,QAAQ,EAAEC,cAAc,CAAC,GAAGxB,eAAe,CAACsB,GAAG,CAAC;EACvD,MAAM,CAACG,cAAc,EAAEC,iBAAiB,CAAC,GAAGzB,iBAAiB,CAAC;IAC5Da,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EAEF,oBACEd,KAAA,CAAAyB,aAAA,CAACtB,KAAK,EAAAuB,QAAA;IACJC,IAAI,EAAC,MAAM;IACXX,IAAI,EAAEA,IAAI,iBAAIhB,KAAA,CAAAyB,aAAA,CAAC7B,MAAM;MAACgC,GAAG,EAAC;IAAa,CAAE,CAAE;IAC3CX,cAAc,EAAEA,cAAe;IAC/BC,KAAK,eACHlB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA6B,QAAA,QACG,CAAC,CAACN,cAAc,iBACfvB,KAAA,CAAAyB,aAAA,CAAC5B,cAAc;MAACiC,SAAS,EAAE;QAAEC,qBAAqB,EAAE;MAAI;IAAE,gBACxD/B,KAAA,CAAAyB,aAAA,CAACnB,WAAW;MACVsB,GAAG,EAAC,cAAc;MAClBD,IAAI,EAAC,OAAO;MACZK,IAAI,EAAC,OAAO;MACZC,IAAI,EAAC,OAAO;MACZlB,QAAQ,EAAEA,QAAS;MACnBmB,OAAO,EAAEA,CAAA,KAAM;QACbV,iBAAiB,CAAC,EAAE,CAAC;QACrB,IAAI,CAACH,QAAQ,CAACc,OAAO,EAAE;QACvBd,QAAQ,CAACc,OAAO,CAACC,KAAK,CAAC,CAAC;MAC1B,CAAE;MACF,cAAYzB,MAAM,CAAC0B;IAAW,gBAE9BrC,KAAA,CAAAyB,aAAA,CAAC9B,WAAW,MAAE,CACH,CACC,CACjB,EACAuB,KACD,CACH;IACDN,KAAK,EAAEW,cAAe;IACtBT,QAAQ,EAAEU,iBAAkB;IAC5Bc,IAAI,EAAC,WAAW;IAChBvB,QAAQ,EAAEA;EAAS,GACfI,IAAI;IACRC,GAAG,EAAEE;EAAe,EACrB,CAAC;AAEN,CACF,CAAC;AAEDZ,WAAW,CAAC6B,WAAW,GAAG,aAAa;AAEvC,eAAe7B,WAAW"}

package/dist/types/InputSearch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/InputSearch/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzE,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,CAAC;IAK7C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAK3B,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAcD,QAAA,MAAM,WAAW,2FAiEhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/InputSearch/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzE,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,CAAC;IAK7C,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAK3B,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAcD,QAAA,MAAM,WAAW,2FA4DhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.198",
+  "version": "1.0.200",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,16 +37,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/date-picker-utils": "^1.0.16",
-    "@os-design/icons": "^1.0.47",
-    "@os-design/input-number-utils": "^1.0.21",
-    "@os-design/media": "^1.0.18",
-    "@os-design/menu-utils": "^1.0.14",
-    "@os-design/portal": "^1.0.10",
-    "@os-design/styles": "^1.0.44",
-    "@os-design/theming": "^1.0.42",
-    "@os-design/time-picker-utils": "^1.0.7",
-    "@os-design/utils": "^1.0.60",
+    "@os-design/date-picker-utils": "^1.0.17",
+    "@os-design/icons": "^1.0.48",
+    "@os-design/input-number-utils": "^1.0.22",
+    "@os-design/media": "^1.0.19",
+    "@os-design/menu-utils": "^1.0.15",
+    "@os-design/portal": "^1.0.11",
+    "@os-design/styles": "^1.0.45",
+    "@os-design/theming": "^1.0.43",
+    "@os-design/time-picker-utils": "^1.0.8",
+    "@os-design/utils": "^1.0.62",
     "@os-team/password-score": "^1.0.4",
     "facepaint": "^1.2.1",
     "react-focus-lock": "^2.9.4",
@@ -58,5 +66,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "8791b7a1da0d71fb3e47d0df630e835c8221cfa9"
+  "gitHead": "3d6b264027712ef81a75379fe3fde3c76c3079af"
 }

package/src/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends BaseTheme {}
+}

package/src/Alert/index.tsx

@@ -0,0 +1,112 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';
+import { WithSize, sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface AlertProps extends JsxDivProps, WithSize {
+  /**
+   * Type of styles.
+   */
+  type: 'info' | 'success' | 'error';
+}
+
+const infoContainerStyles = (p) =>
+  p.type === 'info' &&
+  css`
+    background-color: ${clr(p.theme.alertInfoColorBg)};
+  `;
+
+const successContainerStyles = (p) =>
+  p.type === 'success' &&
+  css`
+    background-color: ${clr(p.theme.alertSuccessColorBg)};
+  `;
+
+const errorContainerStyles = (p) =>
+  p.type === 'error' &&
+  css`
+    background-color: ${clr(p.theme.alertErrorColorBg)};
+  `;
+
+type ContainerProps = Pick<AlertProps, 'type' | 'size'>;
+const Container = styled(
+  'div',
+  omitEmotionProps('type', 'size')
+)<ContainerProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding: 1em;
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  color: ${(p) => clr(p.theme.colorText)};
+
+  ${infoContainerStyles};
+  ${successContainerStyles};
+  ${errorContainerStyles};
+  ${sizeStyles};
+`;
+
+const infoIconContainerStyles = (p) =>
+  p.type === 'info' &&
+  css`
+    color: ${clr(p.theme.alertInfoColorIcon)};
+  `;
+
+const successIconContainerStyles = (p) =>
+  p.type === 'success' &&
+  css`
+    color: ${clr(p.theme.alertSuccessColorIcon)};
+  `;
+
+const errorIconContainerStyles = (p) =>
+  p.type === 'error' &&
+  css`
+    color: ${clr(p.theme.alertErrorColorIcon)};
+  `;
+
+type IconContainerProps = Pick<AlertProps, 'type'>;
+const IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`
+  display: flex;
+  align-items: center;
+
+  margin-right: 0.3em;
+  font-size: 1.4em;
+
+  ${infoIconContainerStyles};
+  ${successIconContainerStyles};
+  ${errorIconContainerStyles};
+`;
+
+const typeIconMap = {
+  info: InfoCircle,
+  success: CheckCircle,
+  error: CloseCircle,
+};
+
+/**
+ * The component for feedback.
+ */
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ type, size, children, ...rest }, ref) => {
+    const Icon = useMemo(() => typeIconMap[type], [type]);
+
+    return (
+      <Container size={size} type={type} role='alert' {...rest} ref={ref}>
+        <IconContainer type={type}>
+          <Icon />
+        </IconContainer>
+        <span>{children}</span>
+      </Container>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';
+
+export default Alert;

package/src/Avatar/index.tsx

@@ -0,0 +1,173 @@
+import styled from '@emotion/styled';
+import { User } from '@os-design/icons';
+import { WithSize, sizeStyles } from '@os-design/styles';
+import { Color, clr, useTheme } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import Image, { ImageProps } from '../Image';
+
+import nameToInitials from './utils/nameToInitials';
+import strToHue from './utils/strToHue';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface AvatarProps extends JsxDivProps, WithSize {
+  /**
+   * Used to render the first letter if the image URL is not specified.
+   * @default undefined
+   */
+  firstName?: string;
+  /**
+   * Used to render the second letter if the image URL is not specified.
+   * @default undefined
+   */
+  lastName?: string;
+  /**
+   * The URL of the image.
+   * @default undefined
+   */
+  image?: string;
+  /**
+   * The props of the image.
+   * @default undefined
+   */
+  imageProps?: Omit<ImageProps, 'url'>;
+  /**
+   * Whether the user is online.
+   * @default false
+   */
+  online?: boolean;
+}
+
+const Container = styled('div', omitEmotionProps('size'))<WithSize>`
+  position: relative;
+  width: 1em;
+  height: 1em;
+  min-width: 1em;
+  min-height: 1em;
+  ${sizeStyles};
+`;
+
+interface AvatarContainerProps {
+  bgColor: Color;
+}
+
+const AvatarContainer = styled(
+  'div',
+  omitEmotionProps('bgColor')
+)<AvatarContainerProps>`
+  width: 100%;
+  height: 100%;
+  border-radius: ${(p) => p.theme.borderRadius}em;
+
+  font-weight: 500;
+  line-height: 1;
+
+  color: hsl(0, 0%, 100%);
+  background-color: ${(p) => clr(p.bgColor)};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  white-space: nowrap; // To disable multiline text
+  overflow: hidden; // To trim the image corners
+
+  ${sizeStyles};
+`;
+
+const UserIcon = styled(User)`
+  font-size: 0.6em;
+`;
+
+const Initials = styled.div`
+  font-size: 0.35em;
+`;
+
+const INNER_SIZE = 0.25;
+const OUTER_SIZE = INNER_SIZE * 1.2;
+
+const Online = styled.span`
+  position: absolute;
+  right: -0.05em;
+  bottom: -0.05em;
+  width: ${OUTER_SIZE}em;
+  height: ${OUTER_SIZE}em;
+  border-radius: 50%;
+  background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;
+    bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;
+    width: ${INNER_SIZE}em;
+    height: ${INNER_SIZE}em;
+    border-radius: 50%;
+    background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};
+  }
+`;
+
+/**
+ * Avatar can be used to represent people.
+ */
+const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  (
+    {
+      firstName,
+      lastName,
+      image,
+      imageProps = {},
+      online = false,
+      size = '2em',
+      ...rest
+    },
+    ref
+  ) => {
+    const { theme } = useTheme();
+
+    const bgColor = useMemo<Color>(() => {
+      const parts: string[] = [];
+      if (firstName) parts.push(firstName);
+      if (lastName) parts.push(lastName);
+      if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];
+      return theme.avatarDefaultColorBg;
+    }, [firstName, lastName, theme.avatarDefaultColorBg]);
+
+    const fullName = useMemo(
+      () => [firstName, lastName].filter((i) => i).join(' ') || undefined,
+      [firstName, lastName]
+    );
+
+    const renderChildren = useCallback(() => {
+      // Render the image if the image property was specified
+      if (image) return <Image url={image} cropped {...imageProps} />;
+
+      // Render the initials of the name if either firstName or lastName was specified
+      const initials = nameToInitials({ firstName, lastName });
+      if (initials) return <Initials>{initials}</Initials>;
+
+      // Otherwise render the user icon
+      return <UserIcon />;
+    }, [image, imageProps, firstName, lastName]);
+
+    return (
+      <Container size={size}>
+        <AvatarContainer
+          bgColor={bgColor}
+          role='img'
+          aria-label={fullName || 'User'}
+          {...rest}
+          ref={ref}
+        >
+          {renderChildren()}
+        </AvatarContainer>
+        {online && <Online />}
+      </Container>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';
+
+export default Avatar;

package/src/Avatar/utils/nameToInitials.ts

@@ -0,0 +1,12 @@
+interface Name {
+  firstName?: string;
+  lastName?: string;
+}
+
+const nameToInitials = ({ firstName, lastName }: Name): string => {
+  const first = firstName ? firstName.charAt(0) : '';
+  const second = lastName ? lastName.charAt(0) : '';
+  return `${first}${second}`.toUpperCase();
+};
+
+export default nameToInitials;

package/src/Avatar/utils/strToHue.ts

@@ -0,0 +1,13 @@
+/**
+ * Return the hue of the color by string.
+ */
+const strToHue = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i += 1) {
+    // eslint-disable-next-line no-bitwise
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash % 360;
+};
+
+export default strToHue;

package/src/AvatarSkeleton/index.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import Skeleton from '../Skeleton';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export type AvatarSkeletonProps = JsxDivProps & WithSize;
+
+const Container = styled('div', omitEmotionProps('size'))<WithSize>`
+  ${sizeStyles};
+`;
+
+/**
+ * Provides an avatar placeholder while a user waits for the content to load.
+ */
+const AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(
+  ({ size = '2em', ...rest }, ref) => (
+    <Container size={size} {...rest} ref={ref}>
+      <Skeleton width='1em' />
+    </Container>
+  )
+);
+
+AvatarSkeleton.displayName = 'AvatarSkeleton';
+
+export default AvatarSkeleton;

package/src/Breadcrumb/index.tsx

@@ -0,0 +1,93 @@
+import styled from '@emotion/styled';
+import { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, ReactElement, useMemo } from 'react';
+import BreadcrumbItem from '../BreadcrumbItem';
+
+type JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;
+export interface BreadcrumbProps extends JsxOlProps, WithSize {
+  'aria-label'?: string;
+}
+
+const Container = styled('ol', omitEmotionProps('size'))<WithSize>`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  color: ${(p) => clr(p.theme.colorText)};
+
+  ${enableScrollingStyles('x', false)};
+  ${sizeStyles};
+`;
+
+let childIndex = 0;
+
+/**
+ * Displays the current location within the hierarchical structure.
+ * Implements the Schema.org markup for breadcrumbs.
+ * See https://schema.org/BreadcrumbList
+ */
+const Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(
+  ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {
+    const breadcrumbItems = useMemo(() => {
+      const items: ReactElement[] = [];
+      const childrenArray = React.Children.toArray(children);
+      childrenArray.forEach((child, index) => {
+        if (!React.isValidElement(child)) return;
+
+        let element;
+        const breadcrumbItemProps = {
+          key: childIndex,
+          position: index + 1,
+          hasRightArrow: index < childrenArray.length - 1,
+        };
+
+        if (child.type === BreadcrumbItem) {
+          element = React.cloneElement(child, breadcrumbItemProps);
+        } else if (
+          React.isValidElement(child.props.children) &&
+          child.props.children.type === BreadcrumbItem
+        ) {
+          const breadcrumbItem = React.cloneElement(
+            child.props.children,
+            breadcrumbItemProps
+          );
+          element = React.cloneElement(
+            child,
+            {
+              ...(child.props || {}),
+              key: childIndex,
+            },
+            breadcrumbItem
+          );
+        }
+        if (!element) return;
+
+        items.push(element);
+        childIndex += 1;
+      });
+      return items;
+    }, [children]);
+
+    if (breadcrumbItems.length === 0) return null;
+
+    return (
+      <nav aria-label={ariaLabel}>
+        <Container
+          itemScope
+          itemType='https://schema.org/BreadcrumbList'
+          {...rest}
+          ref={ref}
+        >
+          {breadcrumbItems}
+        </Container>
+      </nav>
+    );
+  }
+);
+
+Breadcrumb.displayName = 'Breadcrumb';
+
+export default Breadcrumb;