@os-design/core 1.0.195 → 1.0.197

package/dist/cjs/GlobalStyles/typographyStyles.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = require("@emotion/react");
-var _facepaint = _interopRequireDefault(require("facepaint"));
 var _media = require("@os-design/media");
 var _theming = require("@os-design/theming");
+var _facepaint = _interopRequireDefault(require("facepaint"));
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -34,7 +34,7 @@ var headingsMarginTopStyles = function headingsMarginTopStyles(marginTop) {
   });
 };
 var typographyStyles = function typographyStyles(theme) {
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  html,\n  button,\n  input,\n  textarea,\n  select {\n    font-family: 'Helvetica Neue', Helvetica, sans-serif;\n  }\n\n  html,\n  input {\n    color: ", ";\n  }\n\n  html {\n    line-height: ", ";\n\n    // Sets the font smoothing\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-rendering: optimizeLegibility;\n\n    // Sets the base font size and increases it on large screens\n    ", ";\n  }\n\n  body {\n    background-color: ", ";\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: bold;\n    line-height: 1.2;\n    margin: 0 0 ", "em;\n  }\n\n  // Sets the margin top of headings\n  ", ";\n\n  // Sets the base font size of headings\n  ", ";\n\n  // Sets the font size of headings on large screens\n  ", " {\n    ", "\n  } ;\n"])), (0, _theming.clr)(theme.colorText), theme.lineHeight, (0, _facepaint["default"])([_media.m.min.md, _media.m.min.xxl])({
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  html,\n  button,\n  input,\n  textarea,\n  select {\n    font-family: 'Helvetica Neue', Helvetica, sans-serif;\n  }\n\n  html,\n  input {\n    color: ", ";\n  }\n\n  html {\n    line-height: ", ";\n\n    // Sets the font smoothing\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-rendering: optimizeLegibility;\n\n    // Sets the base font size and increases it on large screens\n    ", ";\n  }\n\n  body {\n    background-color: ", ";\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: bold;\n    line-height: 1.2;\n    margin: 0 0 ", "em;\n  }\n\n  // Sets the margin top of headings\n  ", ";\n\n  // Sets the base font size of headings\n  ", ";\n\n  // Sets the font size of headings on large screens\n  ", " {\n    ", "\n  }\n"])), (0, _theming.clr)(theme.colorText), theme.lineHeight, (0, _facepaint["default"])([_media.m.min.md, _media.m.min.xxl])({
     fontSize: theme.fontSize.map(function (s) {
       return "".concat(s, "px");
     })

package/dist/cjs/GlobalStyles/typographyStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"typographyStyles.js","names":["headingsFontSizeStyles","fontSize","headings","fp","literal","map","item","headingsMarginTopStyles","marginTop","h","typographyStyles","theme","css","clr","colorText","lineHeight","m","min","md","xxl","s","colorBg","headingsMarginBottom","headingsMarginTop","headingsFontSize","headingsFontSizeMd"],"sources":["../../../src/GlobalStyles/typographyStyles.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport fp from 'facepaint';\nimport { SerializedStyles } from '@emotion/serialize';\nimport { m } from '@os-design/media';\nimport { Theme, clr } from '@os-design/theming';\n\nconst headingsFontSizeStyles = (fontSize: number[]) => {\n  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n  return fp(headings, { literal: true })({\n    fontSize: fontSize.map((item) => `${item}em`),\n  });\n};\n\nconst headingsMarginTopStyles = (marginTop: number[]) => {\n  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(\n    (h) => `${h}:not(:first-of-type)`\n  );\n  return fp(headings, { literal: true })({\n    marginTop: marginTop.map((item) => `${item}em`),\n  });\n};\n\nconst typographyStyles = (theme: Theme): SerializedStyles => css`\n  html,\n  button,\n  input,\n  textarea,\n  select {\n    font-family: 'Helvetica Neue', Helvetica, sans-serif;\n  }\n\n  html,\n  input {\n    color: ${clr(theme.colorText)};\n  }\n\n  html {\n    line-height: ${theme.lineHeight};\n\n    // Sets the font smoothing\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-rendering: optimizeLegibility;\n\n    // Sets the base font size and increases it on large screens\n    ${fp([m.min.md, m.min.xxl])({\n      fontSize: theme.fontSize.map((s) => `${s}px`),\n    })};\n  }\n\n  body {\n    background-color: ${clr(theme.colorBg)};\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: bold;\n    line-height: 1.2;\n    margin: 0 0 ${theme.headingsMarginBottom}em;\n  }\n\n  // Sets the margin top of headings\n  ${headingsMarginTopStyles(theme.headingsMarginTop)};\n\n  // Sets the base font size of headings\n  ${headingsFontSizeStyles(theme.headingsFontSize)};\n\n  // Sets the font size of headings on large screens\n  ${m.min.md} {\n    ${headingsFontSizeStyles(theme.headingsFontSizeMd)}\n  } ;\n`;\n\nexport default typographyStyles;\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAAgD;AAAA;AAAA;AAEhD,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIC,QAAkB,EAAK;EACrD,IAAMC,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;EACrD,OAAO,IAAAC,qBAAE,EAACD,QAAQ,EAAE;IAAEE,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCH,QAAQ,EAAEA,QAAQ,CAACI,GAAG,CAAC,UAACC,IAAI;MAAA,iBAAQA,IAAI;IAAA,CAAI;EAC9C,CAAC,CAAC;AACJ,CAAC;AAED,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIC,SAAmB,EAAK;EACvD,IAAMN,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAACG,GAAG,CACvD,UAACI,CAAC;IAAA,iBAAQA,CAAC;EAAA,CAAsB,CAClC;EACD,OAAO,IAAAN,qBAAE,EAACD,QAAQ,EAAE;IAAEE,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCI,SAAS,EAAEA,SAAS,CAACH,GAAG,CAAC,UAACC,IAAI;MAAA,iBAAQA,IAAI;IAAA,CAAI;EAChD,CAAC,CAAC;AACJ,CAAC;AAED,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,KAAY;EAAA,WAAuBC,UAAG,o2BAWnD,IAAAC,YAAG,EAACF,KAAK,CAACG,SAAS,CAAC,EAIdH,KAAK,CAACI,UAAU,EAQ7B,IAAAZ,qBAAE,EAAC,CAACa,QAAC,CAACC,GAAG,CAACC,EAAE,EAAEF,QAAC,CAACC,GAAG,CAACE,GAAG,CAAC,CAAC,CAAC;IAC1BlB,QAAQ,EAAEU,KAAK,CAACV,QAAQ,CAACI,GAAG,CAAC,UAACe,CAAC;MAAA,iBAAQA,CAAC;IAAA,CAAI;EAC9C,CAAC,CAAC,EAIkB,IAAAP,YAAG,EAACF,KAAK,CAACU,OAAO,CAAC,EAWxBV,KAAK,CAACW,oBAAoB,EAIxCf,uBAAuB,CAACI,KAAK,CAACY,iBAAiB,CAAC,EAGhDvB,sBAAsB,CAACW,KAAK,CAACa,gBAAgB,CAAC,EAG9CR,QAAC,CAACC,GAAG,CAACC,EAAE,EACNlB,sBAAsB,CAACW,KAAK,CAACc,kBAAkB,CAAC;AAAA,CAErD;AAAC,eAEaf,gBAAgB;AAAA"}
+{"version":3,"file":"typographyStyles.js","names":["_react","require","_media","_theming","_facepaint","_interopRequireDefault","_templateObject","obj","__esModule","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","headingsFontSizeStyles","fontSize","headings","fp","literal","map","item","concat","headingsMarginTopStyles","marginTop","h","typographyStyles","theme","css","clr","colorText","lineHeight","m","min","md","xxl","s","colorBg","headingsMarginBottom","headingsMarginTop","headingsFontSize","headingsFontSizeMd","_default","exports"],"sources":["../../../src/GlobalStyles/typographyStyles.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { SerializedStyles } from '@emotion/serialize';\nimport { m } from '@os-design/media';\nimport { Theme, clr } from '@os-design/theming';\nimport fp from 'facepaint';\n\nconst headingsFontSizeStyles = (fontSize: number[]) => {\n  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n  return fp(headings, { literal: true })({\n    fontSize: fontSize.map((item) => `${item}em`),\n  });\n};\n\nconst headingsMarginTopStyles = (marginTop: number[]) => {\n  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(\n    (h) => `${h}:not(:first-of-type)`\n  );\n  return fp(headings, { literal: true })({\n    marginTop: marginTop.map((item) => `${item}em`),\n  });\n};\n\nconst typographyStyles = (theme: Theme): SerializedStyles => css`\n  html,\n  button,\n  input,\n  textarea,\n  select {\n    font-family: 'Helvetica Neue', Helvetica, sans-serif;\n  }\n\n  html,\n  input {\n    color: ${clr(theme.colorText)};\n  }\n\n  html {\n    line-height: ${theme.lineHeight};\n\n    // Sets the font smoothing\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-rendering: optimizeLegibility;\n\n    // Sets the base font size and increases it on large screens\n    ${fp([m.min.md, m.min.xxl])({\n      fontSize: theme.fontSize.map((s) => `${s}px`),\n    })};\n  }\n\n  body {\n    background-color: ${clr(theme.colorBg)};\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: bold;\n    line-height: 1.2;\n    margin: 0 0 ${theme.headingsMarginBottom}em;\n  }\n\n  // Sets the margin top of headings\n  ${headingsMarginTopStyles(theme.headingsMarginTop)};\n\n  // Sets the base font size of headings\n  ${headingsFontSizeStyles(theme.headingsFontSize)};\n\n  // Sets the font size of headings on large screens\n  ${m.min.md} {\n    ${headingsFontSizeStyles(theme.headingsFontSizeMd)}\n  }\n`;\n\nexport default typographyStyles;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA2B,IAAAK,eAAA;AAAA,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAE3B,IAAMM,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIC,QAAkB,EAAK;EACrD,IAAMC,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;EACrD,OAAO,IAAAC,qBAAE,EAACD,QAAQ,EAAE;IAAEE,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCH,QAAQ,EAAEA,QAAQ,CAACI,GAAG,CAAC,UAACC,IAAI;MAAA,UAAAC,MAAA,CAAQD,IAAI;IAAA,CAAI;EAC9C,CAAC,CAAC;AACJ,CAAC;AAED,IAAME,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAIC,SAAmB,EAAK;EACvD,IAAMP,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAACG,GAAG,CACvD,UAACK,CAAC;IAAA,UAAAH,MAAA,CAAQG,CAAC;EAAA,CACb,CAAC;EACD,OAAO,IAAAP,qBAAE,EAACD,QAAQ,EAAE;IAAEE,OAAO,EAAE;EAAK,CAAC,CAAC,CAAC;IACrCK,SAAS,EAAEA,SAAS,CAACJ,GAAG,CAAC,UAACC,IAAI;MAAA,UAAAC,MAAA,CAAQD,IAAI;IAAA,CAAI;EAChD,CAAC,CAAC;AACJ,CAAC;AAED,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAAY;EAAA,WAAuBC,UAAG,EAAAxB,eAAA,KAAAA,eAAA,GAAAG,sBAAA,oyBAWnD,IAAAsB,YAAG,EAACF,KAAK,CAACG,SAAS,CAAC,EAIdH,KAAK,CAACI,UAAU,EAQ7B,IAAAb,qBAAE,EAAC,CAACc,QAAC,CAACC,GAAG,CAACC,EAAE,EAAEF,QAAC,CAACC,GAAG,CAACE,GAAG,CAAC,CAAC,CAAC;IAC1BnB,QAAQ,EAAEW,KAAK,CAACX,QAAQ,CAACI,GAAG,CAAC,UAACgB,CAAC;MAAA,UAAAd,MAAA,CAAQc,CAAC;IAAA,CAAI;EAC9C,CAAC,CAAC,EAIkB,IAAAP,YAAG,EAACF,KAAK,CAACU,OAAO,CAAC,EAWxBV,KAAK,CAACW,oBAAoB,EAIxCf,uBAAuB,CAACI,KAAK,CAACY,iBAAiB,CAAC,EAGhDxB,sBAAsB,CAACY,KAAK,CAACa,gBAAgB,CAAC,EAG9CR,QAAC,CAACC,GAAG,CAACC,EAAE,EACNnB,sBAAsB,CAACY,KAAK,CAACc,kBAAkB,CAAC;AAAA,CAErD;AAAC,IAAAC,QAAA,GAEahB,gBAAgB;AAAAiB,OAAA,cAAAD,QAAA"}

package/dist/cjs/HeaderSkeleton/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _react = _interopRequireWildcard(require("react"));
-var _utils = require("@os-design/utils");
 var _media = require("@os-design/media");
-var _react2 = require("@emotion/react");
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("react"));
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
 var _excluded = ["type", "hasMargin", "width"];
 var _templateObject, _templateObject2;
@@ -21,7 +21,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var hasMarginStyles = function hasMarginStyles(p) {
-  return p.hasMargin && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", "em 0\n      ", "em;\n  "])), p.theme.headingsMarginTop[p.type - 1], p.theme.headingsMarginBottom);
+  return p.hasMargin && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: ", "em 0\n      ", "em;\n  "])), p.theme.headingsMarginTop[p.type - 1], p.theme.headingsMarginBottom);
 };
 var MULTIPLIER = 0.9;
 var StyledHeaderSkeleton = (0, _styled["default"])(_Skeleton["default"], (0, _utils.omitEmotionProps)('type', 'hasMargin'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "em;\n  ", " {\n    font-size: ", "em;\n  }\n  ", ";\n"])), function (p) {
@@ -33,7 +33,7 @@ var StyledHeaderSkeleton = (0, _styled["default"])(_Skeleton["default"], (0, _ut
 /**
  * Provides a header placeholder while a user waits for the content to load.
  */
-var HeaderSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var HeaderSkeleton = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 1 : _ref$type,
     _ref$hasMargin = _ref.hasMargin,
@@ -41,7 +41,7 @@ var HeaderSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(StyledHeaderSkeleton, _extends({
+  return /*#__PURE__*/_react2["default"].createElement(StyledHeaderSkeleton, _extends({
     type: type,
     hasMargin: hasMargin,
     width: width

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["hasMarginStyles","p","hasMargin","css","theme","headingsMarginTop","type","headingsMarginBottom","MULTIPLIER","StyledHeaderSkeleton","styled","Skeleton","omitEmotionProps","headingsFontSize","m","min","md","headingsFontSizeMd","HeaderSkeleton","forwardRef","ref","width","rest","displayName"],"sources":["../../../src/HeaderSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface HeaderSkeletonProps extends SkeletonProps {\n  /**\n   * The header type.\n   * @default 1\n   */\n  type?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Whether the header has top and bottom margins.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin: ${p.theme.headingsMarginTop[p.type - 1]}em 0\n      ${p.theme.headingsMarginBottom}em;\n  `;\n\nconst MULTIPLIER = 0.9;\n\ntype StyledHeaderSkeletonProps = Required<\n  Pick<HeaderSkeletonProps, 'type' | 'hasMargin'>\n>;\nconst StyledHeaderSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('type', 'hasMargin')\n)<StyledHeaderSkeletonProps>`\n  font-size: ${(p) => p.theme.headingsFontSize[p.type - 1] * MULTIPLIER}em;\n  ${m.min.md} {\n    font-size: ${(p) => p.theme.headingsFontSizeMd[p.type - 1] * MULTIPLIER}em;\n  }\n  ${hasMarginStyles};\n`;\n\n/**\n * Provides a header placeholder while a user waits for the content to load.\n */\nconst HeaderSkeleton = forwardRef<HTMLDivElement, HeaderSkeletonProps>(\n  ({ type = 1, hasMargin = false, width = '100%', ...rest }, ref) => (\n    <StyledHeaderSkeleton\n      type={type}\n      hasMargin={hasMargin}\n      width={width}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nHeaderSkeleton.displayName = 'HeaderSkeleton';\n\nexport default HeaderSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAetD,IAAMA,eAAe,GAAG,SAAlBA,eAAe,CAAIC,CAAC;EAAA,OACxBA,CAAC,CAACC,SAAS,QACXC,WAAG,gHACSF,CAAC,CAACG,KAAK,CAACC,iBAAiB,CAACJ,CAAC,CAACK,IAAI,GAAG,CAAC,CAAC,EAC3CL,CAAC,CAACG,KAAK,CAACG,oBAAoB,CACjC;AAAA;AAEH,IAAMC,UAAU,GAAG,GAAG;AAKtB,IAAMC,oBAAoB,GAAG,IAAAC,kBAAM,EACjCC,oBAAQ,EACR,IAAAC,uBAAgB,EAAC,MAAM,EAAE,WAAW,CAAC,CACtC,gJACc,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACS,gBAAgB,CAACZ,CAAC,CAACK,IAAI,GAAG,CAAC,CAAC,GAAGE,UAAU;AAAA,GACnEM,QAAC,CAACC,GAAG,CAACC,EAAE,EACK,UAACf,CAAC;EAAA,OAAKA,CAAC,CAACG,KAAK,CAACa,kBAAkB,CAAChB,CAAC,CAACK,IAAI,GAAG,CAAC,CAAC,GAAGE,UAAU;AAAA,GAEvER,eAAe,CAClB;;AAED;AACA;AACA;AACA,IAAMkB,cAAc,gBAAG,IAAAC,iBAAU,EAC/B,gBAA2DC,GAAG;EAAA,qBAA3Dd,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAAA,sBAAEJ,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,kBAAEmB,KAAK;IAALA,KAAK,2BAAG,MAAM;IAAKC,IAAI;EAAA,oBACrD,gCAAC,oBAAoB;IACnB,IAAI,EAAEhB,IAAK;IACX,SAAS,EAAEJ,SAAU;IACrB,KAAK,EAAEmB;EAAM,GACTC,IAAI;IACR,GAAG,EAAEF;EAAI,GACT;AAAA,CACH,CACF;AAEDF,cAAc,CAACK,WAAW,GAAG,gBAAgB;AAAC,eAE/BL,cAAc;AAAA"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_media","_utils","_react2","_interopRequireWildcard","_Skeleton","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","hasMarginStyles","p","hasMargin","css","theme","headingsMarginTop","type","headingsMarginBottom","MULTIPLIER","StyledHeaderSkeleton","styled","Skeleton","omitEmotionProps","headingsFontSize","m","min","md","headingsFontSizeMd","HeaderSkeleton","forwardRef","_ref","ref","_ref$type","_ref$hasMargin","_ref$width","width","rest","createElement","displayName","_default","exports"],"sources":["../../../src/HeaderSkeleton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\n\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface HeaderSkeletonProps extends SkeletonProps {\n  /**\n   * The header type.\n   * @default 1\n   */\n  type?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Whether the header has top and bottom margins.\n   * @default false\n   */\n  hasMargin?: boolean;\n}\n\nconst hasMarginStyles = (p) =>\n  p.hasMargin &&\n  css`\n    margin: ${p.theme.headingsMarginTop[p.type - 1]}em 0\n      ${p.theme.headingsMarginBottom}em;\n  `;\n\nconst MULTIPLIER = 0.9;\n\ntype StyledHeaderSkeletonProps = Required<\n  Pick<HeaderSkeletonProps, 'type' | 'hasMargin'>\n>;\nconst StyledHeaderSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('type', 'hasMargin')\n)<StyledHeaderSkeletonProps>`\n  font-size: ${(p) => p.theme.headingsFontSize[p.type - 1] * MULTIPLIER}em;\n  ${m.min.md} {\n    font-size: ${(p) => p.theme.headingsFontSizeMd[p.type - 1] * MULTIPLIER}em;\n  }\n  ${hasMarginStyles};\n`;\n\n/**\n * Provides a header placeholder while a user waits for the content to load.\n */\nconst HeaderSkeleton = forwardRef<HTMLDivElement, HeaderSkeletonProps>(\n  ({ type = 1, hasMargin = false, width = '100%', ...rest }, ref) => (\n    <StyledHeaderSkeleton\n      type={type}\n      hasMargin={hasMargin}\n      width={width}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nHeaderSkeleton.displayName = 'HeaderSkeleton';\n\nexport default HeaderSkeleton;\n"],"mappings":"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"}

package/dist/cjs/Image/index.js

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _utils = require("@os-design/utils");
-var _react2 = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _excluded = ["url", "sizes", "defaultSize", "cropped", "cover", "className"];
 var _templateObject, _templateObject2;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var EMPTY_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';
 var coverStyles = function coverStyles(p) {
-  return p.cover && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 100%;\n    object-fit: cover;\n  "])));
+  return p.cover && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 100%;\n    object-fit: cover;\n  "])));
 };
 var StyledImage = (0, _styled["default"])('img', (0, _utils.omitEmotionProps)('cover'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block; // To remove the indent under the image\n  width: 100%;\n  border-radius: ", "em;\n  ", ";\n"])), function (p) {
   return p.theme.borderRadius;
@@ -30,7 +30,7 @@ var StyledImage = (0, _styled["default"])('img', (0, _utils.omitEmotionProps)('c
  * The image with lazy loading. Required lazysizes.
  * Should be loaded by @os-team/image-storage.
  */
-var Image = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Image = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var url = _ref.url,
     _ref$sizes = _ref.sizes,
     sizes = _ref$sizes === void 0 ? [72, 192, 512, 1024, 2560] : _ref$sizes,
@@ -42,18 +42,18 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     cover = _ref$cover === void 0 ? false : _ref$cover,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var getUrl = (0, _react.useCallback)(function (size) {
+  var getUrl = (0, _react2.useCallback)(function (size) {
     return "".concat(url, "-").concat(size).concat(cropped ? '-c' : '');
   }, [url, cropped]);
   if (!url) {
-    return /*#__PURE__*/_react["default"].createElement(StyledImage, _extends({
+    return /*#__PURE__*/_react2["default"].createElement(StyledImage, _extends({
       src: EMPTY_IMAGE,
       className: className
     }, rest, {
       ref: ref
     }));
   }
-  return /*#__PURE__*/_react["default"].createElement(StyledImage, _extends({
+  return /*#__PURE__*/_react2["default"].createElement(StyledImage, _extends({
     src: getUrl(defaultSize),
     srcSet: EMPTY_IMAGE,
     "data-sizes": "auto",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["EMPTY_IMAGE","coverStyles","p","cover","css","StyledImage","styled","omitEmotionProps","theme","borderRadius","Image","forwardRef","ref","url","sizes","defaultSize","cropped","className","rest","getUrl","useCallback","size","map","join","filter","i","displayName"],"sources":["../../../src/Image/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { css } from '@emotion/react';\n\nconst EMPTY_IMAGE =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';\n\ntype JsxImgProps = Omit<JSX.IntrinsicElements['img'], 'sizes' | 'ref'>;\nexport interface ImageProps extends JsxImgProps {\n  /**\n   * The image URL.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * All available sizes of the image.\n   * @default [72, 192, 512, 1024, 2560]\n   */\n  sizes?: number[];\n  /**\n   * The image size if the browser does not support lazy loading.\n   * @default 72\n   */\n  defaultSize?: number;\n  /**\n   * Whether the image is cropped.\n   * @default false\n   */\n  cropped?: boolean;\n  /**\n   * Sets object-fit: cover.\n   * @default false\n   */\n  cover?: boolean;\n}\n\nconst coverStyles = (p) =>\n  p.cover &&\n  css`\n    height: 100%;\n    object-fit: cover;\n  `;\n\ntype StyledImageProps = Pick<ImageProps, 'cover'>;\nconst StyledImage = styled('img', omitEmotionProps('cover'))<StyledImageProps>`\n  display: block; // To remove the indent under the image\n  width: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  ${coverStyles};\n`;\n\n/**\n * The image with lazy loading. Required lazysizes.\n * Should be loaded by @os-team/image-storage.\n */\nconst Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      url,\n      sizes = [72, 192, 512, 1024, 2560],\n      defaultSize = 72,\n      cropped = false,\n      cover = false,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const getUrl = useCallback(\n      (size: number) => `${url}-${size}${cropped ? '-c' : ''}`,\n      [url, cropped]\n    );\n\n    if (!url) {\n      return (\n        <StyledImage\n          src={EMPTY_IMAGE}\n          className={className}\n          {...rest}\n          ref={ref}\n        />\n      );\n    }\n\n    return (\n      <StyledImage\n        src={getUrl(defaultSize)}\n        srcSet={EMPTY_IMAGE}\n        data-sizes='auto'\n        data-srcset={sizes.map((size) => `${getUrl(size)} ${size}w`).join(', ')}\n        cover={cover}\n        className={[className, 'lazyload'].filter((i) => i).join(' ')}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAErC,IAAMA,WAAW,GACf,oHAAoH;AA+BtH,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAC;EAAA,OACpBA,CAAC,CAACC,KAAK,QACPC,WAAG,qHAGF;AAAA;AAGH,IAAMC,WAAW,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,OAAO,CAAC,CAAC,wLAGzC,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACC,YAAY;AAAA,GAC1CR,WAAW,CACd;;AAED;AACA;AACA;AACA;AACA,IAAMS,KAAK,gBAAG,IAAAC,iBAAU,EACtB,gBAUEC,GAAG,EACA;EAAA,IATDC,GAAG,QAAHA,GAAG;IAAA,kBACHC,KAAK;IAALA,KAAK,2BAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;IAAA,wBAClCC,WAAW;IAAXA,WAAW,iCAAG,EAAE;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,kBACfb,KAAK;IAALA,KAAK,2BAAG,KAAK;IACbc,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,MAAM,GAAG,IAAAC,kBAAW,EACxB,UAACC,IAAY;IAAA,iBAAQR,GAAG,cAAIQ,IAAI,SAAGL,OAAO,GAAG,IAAI,GAAG,EAAE;EAAA,CAAE,EACxD,CAACH,GAAG,EAAEG,OAAO,CAAC,CACf;EAED,IAAI,CAACH,GAAG,EAAE;IACR,oBACE,gCAAC,WAAW;MACV,GAAG,EAAEb,WAAY;MACjB,SAAS,EAAEiB;IAAU,GACjBC,IAAI;MACR,GAAG,EAAEN;IAAI,GACT;EAEN;EAEA,oBACE,gCAAC,WAAW;IACV,GAAG,EAAEO,MAAM,CAACJ,WAAW,CAAE;IACzB,MAAM,EAAEf,WAAY;IACpB,cAAW,MAAM;IACjB,eAAac,KAAK,CAACQ,GAAG,CAAC,UAACD,IAAI;MAAA,iBAAQF,MAAM,CAACE,IAAI,CAAC,cAAIA,IAAI;IAAA,CAAG,CAAC,CAACE,IAAI,CAAC,IAAI,CAAE;IACxE,KAAK,EAAEpB,KAAM;IACb,SAAS,EAAE,CAACc,SAAS,EAAE,UAAU,CAAC,CAACO,MAAM,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC;IAAA,EAAC,CAACF,IAAI,CAAC,GAAG;EAAE,GAC1DL,IAAI;IACR,GAAG,EAAEN;EAAI,GACT;AAEN,CAAC,CACF;AAEDF,KAAK,CAACgB,WAAW,GAAG,OAAO;AAAC,eAEbhB,KAAK;AAAA"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_utils","_react2","_interopRequireWildcard","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","EMPTY_IMAGE","coverStyles","p","cover","css","StyledImage","styled","omitEmotionProps","theme","borderRadius","Image","forwardRef","_ref","ref","url","_ref$sizes","sizes","_ref$defaultSize","defaultSize","_ref$cropped","cropped","_ref$cover","className","rest","getUrl","useCallback","size","concat","createElement","src","srcSet","map","join","filter","displayName","_default","exports"],"sources":["../../../src/Image/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useCallback } from 'react';\n\nconst EMPTY_IMAGE =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';\n\ntype JsxImgProps = Omit<JSX.IntrinsicElements['img'], 'sizes' | 'ref'>;\nexport interface ImageProps extends JsxImgProps {\n  /**\n   * The image URL.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * All available sizes of the image.\n   * @default [72, 192, 512, 1024, 2560]\n   */\n  sizes?: number[];\n  /**\n   * The image size if the browser does not support lazy loading.\n   * @default 72\n   */\n  defaultSize?: number;\n  /**\n   * Whether the image is cropped.\n   * @default false\n   */\n  cropped?: boolean;\n  /**\n   * Sets object-fit: cover.\n   * @default false\n   */\n  cover?: boolean;\n}\n\nconst coverStyles = (p) =>\n  p.cover &&\n  css`\n    height: 100%;\n    object-fit: cover;\n  `;\n\ntype StyledImageProps = Pick<ImageProps, 'cover'>;\nconst StyledImage = styled('img', omitEmotionProps('cover'))<StyledImageProps>`\n  display: block; // To remove the indent under the image\n  width: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  ${coverStyles};\n`;\n\n/**\n * The image with lazy loading. Required lazysizes.\n * Should be loaded by @os-team/image-storage.\n */\nconst Image = forwardRef<HTMLImageElement, ImageProps>(\n  (\n    {\n      url,\n      sizes = [72, 192, 512, 1024, 2560],\n      defaultSize = 72,\n      cropped = false,\n      cover = false,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const getUrl = useCallback(\n      (size: number) => `${url}-${size}${cropped ? '-c' : ''}`,\n      [url, cropped]\n    );\n\n    if (!url) {\n      return (\n        <StyledImage\n          src={EMPTY_IMAGE}\n          className={className}\n          {...rest}\n          ref={ref}\n        />\n      );\n    }\n\n    return (\n      <StyledImage\n        src={getUrl(defaultSize)}\n        srcSet={EMPTY_IMAGE}\n        data-sizes='auto'\n        data-srcset={sizes.map((size) => `${getUrl(size)} ${size}w`).join(', ')}\n        cover={cover}\n        className={[className, 'lazyload'].filter((i) => i).join(' ')}\n        {...rest}\n        ref={ref}\n      />\n    );\n  }\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":"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"}

package/dist/cjs/ImageSkeleton/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = _interopRequireWildcard(require("react"));
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
 var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var StyledImageSkeleton = (0, _styled["default"])(_Skeleton["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledImageSkeleton","styled","Skeleton","ImageSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/ImageSkeleton/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type ImageSkeletonProps = Omit<SkeletonProps, 'width'>;\n\nconst StyledImageSkeleton = styled(Skeleton)`\n  height: 100%;\n`;\n\n/**\n * Provides an image placeholder while a user waits for the content to load.\n */\nconst ImageSkeleton = forwardRef<HTMLDivElement, ImageSkeletonProps>(\n  (props, ref) => <StyledImageSkeleton width='100%' {...props} ref={ref} />\n);\n\nImageSkeleton.displayName = 'ImageSkeleton';\n\nexport default ImageSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAItD,IAAMA,mBAAmB,GAAG,IAAAC,kBAAM,EAACC,oBAAQ,CAAC,wFAE3C;;AAED;AACA;AACA;AACA,IAAMC,aAAa,gBAAG,IAAAC,iBAAU,EAC9B,UAACC,KAAK,EAAEC,GAAG;EAAA,oBAAK,gCAAC,mBAAmB;IAAC,KAAK,EAAC;EAAM,GAAKD,KAAK;IAAE,GAAG,EAAEC;EAAI,GAAG;AAAA,EAC1E;AAEDH,aAAa,CAACI,WAAW,GAAG,eAAe;AAAC,eAE7BJ,aAAa;AAAA"}
+{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_react","_interopRequireWildcard","_Skeleton","_templateObject","_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","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","StyledImageSkeleton","styled","Skeleton","ImageSkeleton","forwardRef","props","ref","createElement","width","displayName","_default","exports"],"sources":["../../../src/ImageSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n\nimport React, { forwardRef } from 'react';\n\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type ImageSkeletonProps = Omit<SkeletonProps, 'width'>;\n\nconst StyledImageSkeleton = styled(Skeleton)`\n  height: 100%;\n`;\n\n/**\n * Provides an image placeholder while a user waits for the content to load.\n */\nconst ImageSkeleton = forwardRef<HTMLDivElement, ImageSkeletonProps>(\n  (props, ref) => <StyledImageSkeleton width='100%' {...props} ref={ref} />\n);\n\nImageSkeleton.displayName = 'ImageSkeleton';\n\nexport default ImageSkeleton;\n"],"mappings":"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"}

package/dist/cjs/Input/index.js

@@ -5,37 +5,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.StyledInput = exports.InputContainer = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styles = require("@os-design/styles");
-var _utils = require("@os-design/utils");
+var _react = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _theming = require("@os-design/theming");
-var _react2 = require("@emotion/react");
 var _icons = require("@os-design/icons");
+var _styles = require("@os-design/styles");
+var _theming = require("@os-design/theming");
+var _utils = require("@os-design/utils");
+var _react2 = _interopRequireWildcard(require("react"));
 var _getFocusableElements = _interopRequireDefault(require("./utils/getFocusableElements"));
 var _excluded = ["type", "left", "leftHasPadding", "right", "rightHasPadding", "disabled", "loading", "containerRef", "containerProps", "size", "value", "onChange"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var hoverStyles = function hoverStyles(p) {
-  return !p.disabled && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      &:hover {\n        border-color: ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.theme.inputHoverColorBorder));
+  return !p.disabled && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      &:hover {\n        border-color: ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.theme.inputHoverColorBorder));
 };
 var focusStyles = function focusStyles(p) {
-  return !p.disabled && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    &:focus-within {\n      border-color: ", ";\n      box-shadow: 0 0 0 0.15em ", ";\n    }\n  "])), (0, _theming.clr)(p.theme.inputFocusColorBorder), (0, _theming.clr)(p.theme.inputFocusColorShadow));
+  return !p.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    &:focus-within {\n      border-color: ", ";\n      box-shadow: 0 0 0 0.15em ", ";\n    }\n  "])), (0, _theming.clr)(p.theme.inputFocusColorBorder), (0, _theming.clr)(p.theme.inputFocusColorShadow));
 };
 var disabledStyles = function disabledStyles(p) {
-  return p.disabled && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.theme.inputDisabledColorText), (0, _theming.clr)(p.theme.inputDisabledColorBg), (0, _theming.clr)(p.theme.inputDisabledColorBorder), (0, _theming.clr)(p.theme.inputDisabledColorPlaceholder));
+  return p.disabled && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.theme.inputDisabledColorText), (0, _theming.clr)(p.theme.inputDisabledColorBg), (0, _theming.clr)(p.theme.inputDisabledColorBorder), (0, _theming.clr)(p.theme.inputDisabledColorPlaceholder));
 };
 var InputContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('disabled', 'size'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n\n  display: inline-flex;\n  width: 100%;\n  height: ", "em;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  border: ", "px solid\n    ", ";\n  border-radius: ", "em;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return p.theme.baseHeight;
@@ -50,10 +50,10 @@ var InputContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)
 }, hoverStyles, focusStyles, disabledStyles, _styles.sizeStyles, (0, _styles.transitionStyles)('border-color', 'box-shadow'));
 exports.InputContainer = InputContainer;
 var notHasLeftStyles = function notHasLeftStyles(p) {
-  return !p.hasLeft && (0, _react2.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: ", "em;\n  "])), p.theme.inputPaddingHorizontal);
+  return !p.hasLeft && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-left: ", "em;\n  "])), p.theme.inputPaddingHorizontal);
 };
 var notHasRightStyles = function notHasRightStyles(p) {
-  return !p.hasRight && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-right: ", "em;\n  "])), p.theme.inputPaddingHorizontal);
+  return !p.hasRight && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding-right: ", "em;\n  "])), p.theme.inputPaddingHorizontal);
 };
 var StyledInput = (0, _styled["default"])('input', (0, _utils.omitEmotionProps)('hasLeft', 'hasRight'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", ";\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ", ";\n  background-color: transparent;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return (0, _theming.clr)(p.theme.inputColorText);
@@ -67,18 +67,18 @@ var Addon = (0, _styled["default"])('span', (0, _utils.omitEmotionProps)('hasPad
 var LeftAddon = (0, _styled["default"])(Addon)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding-right: ", "em;\n  ", "\n"])), function (p) {
   return p.theme.inputAddonPaddingHorizontal;
 }, function (p) {
-  return p.hasPadding && (0, _react2.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      padding-left: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
+  return p.hasPadding && (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      padding-left: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
 });
 var RightAddon = (0, _styled["default"])(Addon)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding-left: ", "em;\n  ", "\n"])), function (p) {
   return p.theme.inputAddonPaddingHorizontal;
 }, function (p) {
-  return p.hasPadding && (0, _react2.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      padding-right: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
+  return p.hasPadding && (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      padding-right: ", "em;\n    "])), p.theme.inputPaddingHorizontal);
 });
 
 /**
  * The basic input component.
  */
-var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Input = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
     left = _ref.left,
@@ -103,20 +103,20 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
     innerContainerRef = _useForwardedRef2[0],
     mergedContainerRef = _useForwardedRef2[1];
-  var rightValue = (0, _react.useMemo)(function () {
-    return loading ? /*#__PURE__*/_react["default"].createElement(_icons.Loading, null) : right;
+  var rightValue = (0, _react2.useMemo)(function () {
+    return loading ? /*#__PURE__*/_react2["default"].createElement(_icons.Loading, null) : right;
   }, [loading, right]);
-  var rightHasPaddingValue = (0, _react.useMemo)(function () {
+  var rightHasPaddingValue = (0, _react2.useMemo)(function () {
     return loading ? true : rightHasPadding;
   }, [loading, rightHasPadding]);
-  var onFocus = (0, _react.useCallback)(function (e) {
+  var onFocus = (0, _react2.useCallback)(function (e) {
     // Focus the next element if the container element was focused.
     // The next element will be the input or button in the addon.
     if (disabled || e.target !== innerContainerRef.current) return;
     var focusableElements = (0, _getFocusableElements["default"])(innerContainerRef.current);
     focusableElements[0].focus();
   }, [disabled, innerContainerRef]);
-  var onKeyDown = (0, _react.useCallback)(function (e) {
+  var onKeyDown = (0, _react2.useCallback)(function (e) {
     // Focus the previous element if the first element in the input
     // container is focused and the Shift + Tab combination is pressed.
     var focusableElements = (0, _getFocusableElements["default"])(document);
@@ -131,20 +131,20 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       elementBeforeInputContainer.focus();
     }
   }, [innerContainerRef]);
-  return /*#__PURE__*/_react["default"].createElement(InputContainer, _extends({
+  return /*#__PURE__*/_react2["default"].createElement(InputContainer, _extends({
     disabled: disabled,
     size: size,
     tabIndex: !disabled ? 0 : -1,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     ref: mergedContainerRef
-  }, containerProps), left && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
+  }, containerProps), left && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
     overrides: {
       buttonPaddingHorizontal: 0.8
     }
-  }, /*#__PURE__*/_react["default"].createElement(LeftAddon, {
+  }, /*#__PURE__*/_react2["default"].createElement(LeftAddon, {
     hasPadding: leftHasPadding
-  }, left)), /*#__PURE__*/_react["default"].createElement(StyledInput, _extends({
+  }, left)), /*#__PURE__*/_react2["default"].createElement(StyledInput, _extends({
     type: type,
     disabled: disabled,
     hasLeft: !!left,
@@ -155,11 +155,11 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   }, rest, {
     ref: ref
-  })), rightValue && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
+  })), rightValue && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
     overrides: {
       buttonPaddingHorizontal: 0.8
     }
-  }, /*#__PURE__*/_react["default"].createElement(RightAddon, {
+  }, /*#__PURE__*/_react2["default"].createElement(RightAddon, {
     hasPadding: rightHasPaddingValue
   }, rightValue)));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["hoverStyles","p","disabled","css","clr","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","styled","omitEmotionProps","resetFocusStyles","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","sizeStyles","transitionStyles","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","forwardRef","ref","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","useForwardedRef","innerContainerRef","mergedContainerRef","rightValue","useMemo","rightHasPaddingValue","onFocus","useCallback","e","target","current","focusableElements","getFocusableElements","focus","onKeyDown","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    const onFocus = useCallback<FocusEventHandler>(\n      (e) => {\n        // Focus the next element if the container element was focused.\n        // The next element will be the input or button in the addon.\n        if (disabled || e.target !== innerContainerRef.current) return;\n        const focusableElements = getFocusableElements(\n          innerContainerRef.current\n        );\n        focusableElements[0].focus();\n      },\n      [disabled, innerContainerRef]\n    );\n\n    const onKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        // Focus the previous element if the first element in the input\n        // container is focused and the Shift + Tab combination is pressed.\n        const focusableElements = getFocusableElements(document);\n        const inputFocusableElements = innerContainerRef.current\n          ? getFocusableElements(innerContainerRef.current)\n          : [];\n        const firstInputElementIsFocused =\n          inputFocusableElements[0] === document.activeElement;\n        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n          const inputContainerIndex = focusableElements.findIndex(\n            (el) => el === innerContainerRef.current\n          );\n          if (inputContainerIndex === 0) return;\n          const elementBeforeInputContainer =\n            focusableElements[inputContainerIndex - 1];\n          elementBeforeInputContainer.focus();\n        }\n      },\n      [innerContainerRef]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;AAAA;AASA;AAMA;AACA;AACA;AACA;AACA;AACA;AAAgE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkEhE,IAAMA,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAC;EAAA,OACpB,CAACA,CAAC,CAACC,QAAQ,QACXC,WAAG,sKAGmB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACC,qBAAqB,CAAC,CAGvD;AAAA;AAEH,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIN,CAAC;EAAA,OACpB,CAACA,CAAC,CAACC,QAAQ,QACXC,WAAG,2KAEiB,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACG,qBAAqB,CAAC,EACvB,IAAAJ,YAAG,EAACH,CAAC,CAACI,KAAK,CAACI,qBAAqB,CAAC,CAEhE;AAAA;AAEH,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIT,CAAC;EAAA,OACvBA,CAAC,CAACC,QAAQ,QACVC,WAAG,uSAEQ,IAAAC,YAAG,EAACH,CAAC,CAACI,KAAK,CAACM,sBAAsB,CAAC,EACxB,IAAAP,YAAG,EAACH,CAAC,CAACI,KAAK,CAACO,oBAAoB,CAAC,EACrC,IAAAR,YAAG,EAACH,CAAC,CAACI,KAAK,CAACQ,wBAAwB,CAAC,EAMxC,IAAAT,YAAG,EAACH,CAAC,CAACI,KAAK,CAACS,6BAA6B,CAAC,CAGxD;AAAA;AAGI,IAAMC,cAAc,GAAG,IAAAC,kBAAM,EAClC,KAAK,EACL,IAAAC,uBAAgB,EAAC,UAAU,EAAE,MAAM,CAAC,CACrC,qTACGC,wBAAgB,EAIR,UAACjB,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACc,UAAU;AAAA,GAEf,UAAClB,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACe,YAAY,CAAC;AAAA,GAE1C,UAACnB,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACgB,gBAAgB;AAAA,GACrC,UAACpB,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAACiB,gBAAgB,CAAC;AAAA,GACvB,UAACrB,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAACkB,YAAY;AAAA,GAE1CvB,WAAW,EACXO,WAAW,EACXG,cAAc,EACdc,kBAAU,EACV,IAAAC,wBAAgB,EAAC,cAAc,EAAE,YAAY,CAAC,CACjD;AAAC;AAEF,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIzB,CAAC;EAAA,OACzB,CAACA,CAAC,CAAC0B,OAAO,QACVxB,WAAG,wGACeF,CAAC,CAACI,KAAK,CAACuB,sBAAsB,CAC/C;AAAA;AAEH,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAI5B,CAAC;EAAA,OAC1B,CAACA,CAAC,CAAC6B,QAAQ,QACX3B,WAAG,yGACgBF,CAAC,CAACI,KAAK,CAACuB,sBAAsB,CAChD;AAAA;AAMI,IAAMG,WAAW,GAAG,IAAAf,kBAAM,EAC/B,OAAO,EACP,IAAAC,uBAAgB,EAAC,SAAS,EAAE,UAAU,CAAC,CACxC,kSACGC,wBAAgB,EAOT,UAACjB,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAAC2B,cAAc,CAAC;AAAA,GAIhC,UAAC/B,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAAC4B,qBAAqB,CAAC;AAAA,GAGlDP,gBAAgB,EAChBG,iBAAiB,CACpB;AAAC;AAKF,IAAMK,KAAK,GAAG,IAAAlB,kBAAM,EAAC,MAAM,EAAE,IAAAC,uBAAgB,EAAC,YAAY,CAAC,CAAC,sMAIjD,UAAChB,CAAC;EAAA,OAAK,IAAAG,YAAG,EAACH,CAAC,CAACI,KAAK,CAAC4B,qBAAqB,CAAC;AAAA,EAKnD;AAED,IAAME,SAAS,GAAG,IAAAnB,kBAAM,EAACkB,KAAK,CAAC,4GACZ,UAACjC,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAAC+B,2BAA2B;AAAA,GACzD,UAACnC,CAAC;EAAA,OACFA,CAAC,CAACoC,UAAU,QACZlC,WAAG,8GACeF,CAAC,CAACI,KAAK,CAACuB,sBAAsB,CAC/C;AAAA,EACJ;AAED,IAAMU,UAAU,GAAG,IAAAtB,kBAAM,EAACkB,KAAK,CAAC,6GACd,UAACjC,CAAC;EAAA,OAAKA,CAAC,CAACI,KAAK,CAAC+B,2BAA2B;AAAA,GACxD,UAACnC,CAAC;EAAA,OACFA,CAAC,CAACoC,UAAU,QACZlC,WAAG,+GACgBF,CAAC,CAACI,KAAK,CAACuB,sBAAsB,CAChD;AAAA,EACJ;;AAED;AACA;AACA;AACA,IAAMW,KAAK,gBAAG,IAAAC,iBAAU,EACtB,gBAgBEC,GAAG,EACA;EAAA,qBAfDC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,IAAI,QAAJA,IAAI;IAAA,2BACJC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IACtBC,KAAK,QAALA,KAAK;IAAA,4BACLC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IAAA,qBACvB5C,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,oBAChB6C,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,YAAY,QAAZA,YAAY;IAAA,2BACZC,cAAc;IAAdA,cAAc,oCAAG,CAAC,CAAC;IACnBC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,SAAQ,8BAAG,YAAM,CAAC,CAAC;IAChBC,IAAI;EAIT,uBACE,IAAAC,sBAAe,EAACN,YAAY,CAAC;IAAA;IADxBO,iBAAiB;IAAEC,kBAAkB;EAG5C,IAAMC,UAAU,GAAG,IAAAC,cAAO,EACxB;IAAA,OAAOX,OAAO,gBAAG,gCAAC,cAAO,OAAG,GAAGF,KAAK;EAAA,CAAC,EACrC,CAACE,OAAO,EAAEF,KAAK,CAAC,CACjB;EAED,IAAMc,oBAAoB,GAAG,IAAAD,cAAO,EAClC;IAAA,OAAOX,OAAO,GAAG,IAAI,GAAGD,eAAe;EAAA,CAAC,EACxC,CAACC,OAAO,EAAED,eAAe,CAAC,CAC3B;EAED,IAAMc,OAAO,GAAG,IAAAC,kBAAW,EACzB,UAACC,CAAC,EAAK;IACL;IACA;IACA,IAAI5D,QAAQ,IAAI4D,CAAC,CAACC,MAAM,KAAKR,iBAAiB,CAACS,OAAO,EAAE;IACxD,IAAMC,iBAAiB,GAAG,IAAAC,gCAAoB,EAC5CX,iBAAiB,CAACS,OAAO,CAC1B;IACDC,iBAAiB,CAAC,CAAC,CAAC,CAACE,KAAK,EAAE;EAC9B,CAAC,EACD,CAACjE,QAAQ,EAAEqD,iBAAiB,CAAC,CAC9B;EAED,IAAMa,SAAS,GAAG,IAAAP,kBAAW,EAC3B,UAACC,CAAC,EAAK;IACL;IACA;IACA,IAAMG,iBAAiB,GAAG,IAAAC,gCAAoB,EAACG,QAAQ,CAAC;IACxD,IAAMC,sBAAsB,GAAGf,iBAAiB,CAACS,OAAO,GACpD,IAAAE,gCAAoB,EAACX,iBAAiB,CAACS,OAAO,CAAC,GAC/C,EAAE;IACN,IAAMO,0BAA0B,GAC9BD,sBAAsB,CAAC,CAAC,CAAC,KAAKD,QAAQ,CAACG,aAAa;IACtD,IAAID,0BAA0B,IAAIT,CAAC,CAACW,GAAG,KAAK,KAAK,IAAIX,CAAC,CAACY,QAAQ,EAAE;MAC/D,IAAMC,mBAAmB,GAAGV,iBAAiB,CAACW,SAAS,CACrD,UAACC,EAAE;QAAA,OAAKA,EAAE,KAAKtB,iBAAiB,CAACS,OAAO;MAAA,EACzC;MACD,IAAIW,mBAAmB,KAAK,CAAC,EAAE;MAC/B,IAAMG,2BAA2B,GAC/Bb,iBAAiB,CAACU,mBAAmB,GAAG,CAAC,CAAC;MAC5CG,2BAA2B,CAACX,KAAK,EAAE;IACrC;EACF,CAAC,EACD,CAACZ,iBAAiB,CAAC,CACpB;EAED,oBACE,gCAAC,cAAc;IACb,QAAQ,EAAErD,QAAS;IACnB,IAAI,EAAEgD,IAAK;IACX,QAAQ,EAAE,CAAChD,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE0D,OAAQ;IACjB,SAAS,EAAEQ,SAAU;IACrB,GAAG,EAAEZ;EAAmB,GACpBP,cAAc,GAEjBN,IAAI,iBACH,gCAAC,uBAAc;IAAC,SAAS,EAAE;MAAEoC,uBAAuB,EAAE;IAAI;EAAE,gBAC1D,gCAAC,SAAS;IAAC,UAAU,EAAEnC;EAAe,GAAED,IAAI,CAAa,CAE5D,eAED,gCAAC,WAAW;IACV,IAAI,EAAED,IAAK;IACX,QAAQ,EAAExC,QAAS;IACnB,OAAO,EAAE,CAAC,CAACyC,IAAK;IAChB,QAAQ,EAAE,CAAC,CAACE,KAAM;IAClB,KAAK,EAAEM,KAAK,IAAI,EAAG;IACnB,QAAQ,EAAE,kBAACW,CAAC;MAAA,OAAKV,SAAQ,CAACU,CAAC,CAACC,MAAM,CAACZ,KAAK,EAAEW,CAAC,CAAC;IAAA;EAAC,GACzCT,IAAI;IACR,GAAG,EAAEZ;EAAI,GACT,EAEDgB,UAAU,iBACT,gCAAC,uBAAc;IAAC,SAAS,EAAE;MAAEsB,uBAAuB,EAAE;IAAI;EAAE,gBAC1D,gCAAC,UAAU;IAAC,UAAU,EAAEpB;EAAqB,GAC1CF,UAAU,CACA,CAEhB,CACc;AAErB,CAAC,CACF;AAEDlB,KAAK,CAACyC,WAAW,GAAG,OAAO;AAAC,eAEbzC,KAAK;AAAA"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_icons","_styles","_theming","_utils","_react2","_interopRequireWildcard","_getFocusableElements","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_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","hoverStyles","p","disabled","css","clr","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","styled","omitEmotionProps","resetFocusStyles","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","sizeStyles","transitionStyles","exports","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","forwardRef","_ref","ref","_ref$type","type","left","_ref$leftHasPadding","leftHasPadding","right","_ref$rightHasPadding","rightHasPadding","_ref$disabled","_ref$loading","loading","containerRef","_ref$containerProps","containerProps","size","_ref$onChange","onChange","rest","_useForwardedRef","useForwardedRef","_useForwardedRef2","innerContainerRef","mergedContainerRef","rightValue","useMemo","createElement","Loading","rightHasPaddingValue","onFocus","useCallback","e","current","focusableElements","getFocusableElements","focus","onKeyDown","document","inputFocusableElements","firstInputElementIsFocused","activeElement","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","tabIndex","ThemeOverrider","overrides","buttonPaddingHorizontal","displayName","_default"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Loading } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\n\nimport React, {\n  ChangeEvent,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\n`;\n\nconst notHasLeftStyles = (p) =>\n  !p.hasLeft &&\n  css`\n    padding-left: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\nconst notHasRightStyles = (p) =>\n  !p.hasRight &&\n  css`\n    padding-right: ${p.theme.inputPaddingHorizontal}em;\n  `;\n\ninterface StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\n`;\n\ninterface AddonProps {\n  hasPadding: boolean;\n}\nconst Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`\n  display: flex;\n  align-items: center;\n  user-select: none;\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n\n  svg {\n    transform: scale(1.2);\n  }\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-left: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;\n  ${(p) =>\n    p.hasPadding &&\n    css`\n      padding-right: ${p.theme.inputPaddingHorizontal}em;\n    `}\n`;\n\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    const onFocus = useCallback<FocusEventHandler>(\n      (e) => {\n        // Focus the next element if the container element was focused.\n        // The next element will be the input or button in the addon.\n        if (disabled || e.target !== innerContainerRef.current) return;\n        const focusableElements = getFocusableElements(\n          innerContainerRef.current\n        );\n        focusableElements[0].focus();\n      },\n      [disabled, innerContainerRef]\n    );\n\n    const onKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        // Focus the previous element if the first element in the input\n        // container is focused and the Shift + Tab combination is pressed.\n        const focusableElements = getFocusableElements(document);\n        const inputFocusableElements = innerContainerRef.current\n          ? getFocusableElements(innerContainerRef.current)\n          : [];\n        const firstInputElementIsFocused =\n          inputFocusableElements[0] === document.activeElement;\n        if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n          const inputContainerIndex = focusableElements.findIndex(\n            (el) => el === innerContainerRef.current\n          );\n          if (inputContainerIndex === 0) return;\n          const elementBeforeInputContainer =\n            focusableElements[inputContainerIndex - 1];\n          elementBeforeInputContainer.focus();\n        }\n      },\n      [innerContainerRef]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/dist/cjs/Input/utils/getFocusableElements.js

@@ -9,7 +9,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var getFocusableElements = function getFocusableElements(element) {
   return _toConsumableArray(element.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])')).filter(function (el) {
     return !el.hasAttribute('disabled');

package/dist/cjs/Input/utils/getFocusableElements.js.map

@@ -1 +1 @@
-{"version":3,"file":"getFocusableElements.js","names":["getFocusableElements","element","querySelectorAll","filter","el","hasAttribute"],"sources":["../../../../src/Input/utils/getFocusableElements.ts"],"sourcesContent":["const getFocusableElements = (element: ParentNode): HTMLElement[] =>\n  [\n    ...element.querySelectorAll<HTMLElement>(\n      'a, button, input, textarea, select, details,[tabindex]:not([tabindex=\"-1\"])'\n    ),\n  ].filter((el) => !el.hasAttribute('disabled'));\n\nexport default getFocusableElements;\n"],"mappings":";;;;;;;;;;;;AAAA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIC,OAAmB;EAAA,OAC/C,mBACKA,OAAO,CAACC,gBAAgB,CACzB,6EAA6E,CAC9E,EACDC,MAAM,CAAC,UAACC,EAAE;IAAA,OAAK,CAACA,EAAE,CAACC,YAAY,CAAC,UAAU,CAAC;EAAA,EAAC;AAAA;AAAC,eAElCL,oBAAoB;AAAA"}
+{"version":3,"file":"getFocusableElements.js","names":["getFocusableElements","element","_toConsumableArray","querySelectorAll","filter","el","hasAttribute","_default","exports"],"sources":["../../../../src/Input/utils/getFocusableElements.ts"],"sourcesContent":["const getFocusableElements = (element: ParentNode): HTMLElement[] =>\n  [\n    ...element.querySelectorAll<HTMLElement>(\n      'a, button, input, textarea, select, details,[tabindex]:not([tabindex=\"-1\"])'\n    ),\n  ].filter((el) => !el.hasAttribute('disabled'));\n\nexport default getFocusableElements;\n"],"mappings":";;;;;;;;;;;;AAAA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,OAAmB;EAAA,OAC/CC,kBAAA,CACKD,OAAO,CAACE,gBAAgB,CACzB,6EACF,CAAC,EACDC,MAAM,CAAC,UAACC,EAAE;IAAA,OAAK,CAACA,EAAE,CAACC,YAAY,CAAC,UAAU,CAAC;EAAA,EAAC;AAAA;AAAC,IAAAC,QAAA,GAElCP,oBAAoB;AAAAQ,OAAA,cAAAD,QAAA"}

package/dist/cjs/InputNumber/index.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _utils = require("@os-design/utils");
 var _inputNumberUtils = require("@os-design/input-number-utils");
+var _utils = require("@os-design/utils");
+var _react = _interopRequireWildcard(require("react"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
 var _excluded = ["min", "max", "precision", "prefix", "suffix", "decimalSeparator", "thousandsSeparator", "locale", "value", "onChange", "onSelect", "onFocus"];
@@ -18,8 +18,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }