@os-design/core 1.0.155 → 1.0.157

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

@@ -1 +1 @@
-{"version":3,"file":"resetStyles.js","names":["resetStyles","theme","css","paragraphMarginBottom"],"sources":["../../../src/GlobalStyles/resetStyles.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { Theme } from '@os-design/theming';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst resetStyles = (theme: Theme): SerializedStyles => css`\n  body {\n    margin: 0;\n  }\n\n  p,\n  figure,\n  pre {\n    margin: 0 0 ${theme.paragraphMarginBottom}em;\n  }\n`;\n\nexport default resetStyles;\n"],"mappings":";;;;;;;AAAA;;;;;;AAIA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;EAAA,WAAoCC,UAApC,kKAQFD,KAAK,CAACE,qBARJ;AAAA,CAApB;;eAYeH,W"}
+{"version":3,"file":"resetStyles.js","names":["resetStyles","theme","css","paragraphMarginBottom"],"sources":["../../../src/GlobalStyles/resetStyles.ts"],"sourcesContent":["import { css } from '@emotion/react';\nimport { Theme } from '@os-design/theming';\nimport { SerializedStyles } from '@emotion/serialize';\n\nconst resetStyles = (theme: Theme): SerializedStyles => css`\n  body {\n    margin: 0;\n  }\n\n  p,\n  figure,\n  pre {\n    margin: 0 0 ${theme.paragraphMarginBottom}em;\n  }\n`;\n\nexport default resetStyles;\n"],"mappings":";;;;;;AAAA;AAAqC;AAAA;AAIrC,IAAMA,WAAW,GAAG,SAAdA,WAAW,CAAIC,KAAY;EAAA,WAAuBC,UAAG,kKAQzCD,KAAK,CAACE,qBAAqB;AAAA,CAE5C;AAAC,eAEaH,WAAW;AAAA"}

package/dist/cjs/GlobalStyles/typographyStyles.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _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) } })); }
-
 var headingsFontSizeStyles = function headingsFontSizeStyles(fontSize) {
   var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
   return (0, _facepaint["default"])(headings, {
@@ -29,7 +21,6 @@ var headingsFontSizeStyles = function headingsFontSizeStyles(fontSize) {
     })
   });
 };
-
 var headingsMarginTopStyles = function headingsMarginTopStyles(marginTop) {
   var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(function (h) {
     return "".concat(h, ":not(:first-of-type)");
@@ -42,7 +33,6 @@ 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])({
     fontSize: theme.fontSize.map(function (s) {
@@ -50,7 +40,6 @@ var typographyStyles = function typographyStyles(theme) {
     })
   }), (0, _theming.clr)(theme.colorBg), theme.headingsMarginBottom, headingsMarginTopStyles(theme.headingsMarginTop), headingsFontSizeStyles(theme.headingsFontSize), _media.m.min.md, headingsFontSizeStyles(theme.headingsFontSizeMd));
 };
-
 var _default = typographyStyles;
 exports["default"] = _default;
 //# sourceMappingURL=typographyStyles.js.map

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;;;;;;;;AAEA,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,QAAD,EAAwB;EACrD,IAAMC,QAAQ,GAAG,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,EAA+B,IAA/B,CAAjB;EACA,OAAO,IAAAC,qBAAA,EAAGD,QAAH,EAAa;IAAEE,OAAO,EAAE;EAAX,CAAb,EAAgC;IACrCH,QAAQ,EAAEA,QAAQ,CAACI,GAAT,CAAa,UAACC,IAAD;MAAA,iBAAaA,IAAb;IAAA,CAAb;EAD2B,CAAhC,CAAP;AAGD,CALD;;AAOA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,SAAD,EAAyB;EACvD,IAAMN,QAAQ,GAAG,CAAC,IAAD,EAAO,IAAP,EAAa,IAAb,EAAmB,IAAnB,EAAyB,IAAzB,EAA+B,IAA/B,EAAqCG,GAArC,CACf,UAACI,CAAD;IAAA,iBAAUA,CAAV;EAAA,CADe,CAAjB;EAGA,OAAO,IAAAN,qBAAA,EAAGD,QAAH,EAAa;IAAEE,OAAO,EAAE;EAAX,CAAb,EAAgC;IACrCI,SAAS,EAAEA,SAAS,CAACH,GAAV,CAAc,UAACC,IAAD;MAAA,iBAAaA,IAAb;IAAA,CAAd;EAD0B,CAAhC,CAAP;AAGD,CAPD;;AASA,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD;EAAA,WAAoCC,UAApC,o2BAWZ,IAAAC,YAAA,EAAIF,KAAK,CAACG,SAAV,CAXY,EAeNH,KAAK,CAACI,UAfA,EAuBnB,IAAAZ,qBAAA,EAAG,CAACa,QAAA,CAAEC,GAAF,CAAMC,EAAP,EAAWF,QAAA,CAAEC,GAAF,CAAME,GAAjB,CAAH,EAA0B;IAC1BlB,QAAQ,EAAEU,KAAK,CAACV,QAAN,CAAeI,GAAf,CAAmB,UAACe,CAAD;MAAA,iBAAUA,CAAV;IAAA,CAAnB;EADgB,CAA1B,CAvBmB,EA6BD,IAAAP,YAAA,EAAIF,KAAK,CAACU,OAAV,CA7BC,EAwCPV,KAAK,CAACW,oBAxCC,EA4CrBf,uBAAuB,CAACI,KAAK,CAACY,iBAAP,CA5CF,EA+CrBvB,sBAAsB,CAACW,KAAK,CAACa,gBAAP,CA/CD,EAkDrBR,QAAA,CAAEC,GAAF,CAAMC,EAlDe,EAmDnBlB,sBAAsB,CAACW,KAAK,CAACc,kBAAP,CAnDH;AAAA,CAAzB;;eAuDef,gB"}
+{"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"}

package/dist/cjs/HeaderSkeleton/index.js

@@ -1,65 +1,46 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 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 _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
 var _excluded = ["type", "hasMargin", "width"];
-
 var _templateObject, _templateObject2;
-
 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 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);
 };
-
 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) {
   return p.theme.headingsFontSize[p.type - 1] * MULTIPLIER;
 }, _media.m.min.md, function (p) {
   return p.theme.headingsFontSizeMd[p.type - 1] * MULTIPLIER;
 }, hasMarginStyles);
+
 /**
  * Provides a header placeholder while a user waits for the content to load.
  */
-
 var HeaderSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 1 : _ref$type,
-      _ref$hasMargin = _ref.hasMargin,
-      hasMargin = _ref$hasMargin === void 0 ? false : _ref$hasMargin,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '100%' : _ref$width,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 1 : _ref$type,
+    _ref$hasMargin = _ref.hasMargin,
+    hasMargin = _ref$hasMargin === void 0 ? false : _ref$hasMargin,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(StyledHeaderSkeleton, _extends({
     type: type,
     hasMargin: hasMargin,

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;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD;EAAA,OACtBA,CAAC,CAACC,SAAF,QACAC,WADA,gHAEYF,CAAC,CAACG,KAAF,CAAQC,iBAAR,CAA0BJ,CAAC,CAACK,IAAF,GAAS,CAAnC,CAFZ,EAGML,CAAC,CAACG,KAAF,CAAQG,oBAHd,CADsB;AAAA,CAAxB;;AAOA,IAAMC,UAAU,GAAG,GAAnB;AAKA,IAAMC,oBAAoB,GAAG,IAAAC,kBAAA,EAC3BC,oBAD2B,EAE3B,IAAAC,uBAAA,EAAiB,MAAjB,EAAyB,WAAzB,CAF2B,CAAH,gJAIX,UAACX,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQS,gBAAR,CAAyBZ,CAAC,CAACK,IAAF,GAAS,CAAlC,IAAuCE,UAA9C;AAAA,CAJW,EAKtBM,QAAA,CAAEC,GAAF,CAAMC,EALgB,EAMT,UAACf,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQa,kBAAR,CAA2BhB,CAAC,CAACK,IAAF,GAAS,CAApC,IAAyCE,UAAhD;AAAA,CANS,EAQtBR,eARsB,CAA1B;AAWA;AACA;AACA;;AACA,IAAMkB,cAAc,gBAAG,IAAAC,iBAAA,EACrB,gBAA2DC,GAA3D;EAAA,qBAAGd,IAAH;EAAA,IAAGA,IAAH,0BAAU,CAAV;EAAA,0BAAaJ,SAAb;EAAA,IAAaA,SAAb,+BAAyB,KAAzB;EAAA,sBAAgCmB,KAAhC;EAAA,IAAgCA,KAAhC,2BAAwC,MAAxC;EAAA,IAAmDC,IAAnD;;EAAA,oBACE,gCAAC,oBAAD;IACE,IAAI,EAAEhB,IADR;IAEE,SAAS,EAAEJ,SAFb;IAGE,KAAK,EAAEmB;EAHT,GAIMC,IAJN;IAKE,GAAG,EAAEF;EALP,GADF;AAAA,CADqB,CAAvB;AAYAF,cAAc,CAACK,WAAf,GAA6B,gBAA7B;eAEeL,c"}
+{"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"}

package/dist/cjs/Image/index.js

@@ -1,69 +1,50 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _utils = require("@os-design/utils");
-
 var _react2 = require("@emotion/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 _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  "])));
 };
-
 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;
 }, coverStyles);
+
 /**
  * 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 url = _ref.url,
-      _ref$sizes = _ref.sizes,
-      sizes = _ref$sizes === void 0 ? [72, 192, 512, 1024, 2560] : _ref$sizes,
-      _ref$defaultSize = _ref.defaultSize,
-      defaultSize = _ref$defaultSize === void 0 ? 72 : _ref$defaultSize,
-      _ref$cropped = _ref.cropped,
-      cropped = _ref$cropped === void 0 ? false : _ref$cropped,
-      _ref$cover = _ref.cover,
-      cover = _ref$cover === void 0 ? false : _ref$cover,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$sizes = _ref.sizes,
+    sizes = _ref$sizes === void 0 ? [72, 192, 512, 1024, 2560] : _ref$sizes,
+    _ref$defaultSize = _ref.defaultSize,
+    defaultSize = _ref$defaultSize === void 0 ? 72 : _ref$defaultSize,
+    _ref$cropped = _ref.cropped,
+    cropped = _ref$cropped === void 0 ? false : _ref$cropped,
+    _ref$cover = _ref.cover,
+    cover = _ref$cover === void 0 ? false : _ref$cover,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var getUrl = (0, _react.useCallback)(function (size) {
     return "".concat(url, "-").concat(size).concat(cropped ? '-c' : '');
   }, [url, cropped]);
-
   if (!url) {
     return /*#__PURE__*/_react["default"].createElement(StyledImage, _extends({
       src: EMPTY_IMAGE,
@@ -72,7 +53,6 @@ var Image = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       ref: ref
     }));
   }
-
   return /*#__PURE__*/_react["default"].createElement(StyledImage, _extends({
     src: getUrl(defaultSize),
     srcSet: EMPTY_IMAGE,

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;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,WAAW,GACf,oHADF;;AAgCA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD;EAAA,OAClBA,CAAC,CAACC,KAAF,QACAC,WADA,qHADkB;AAAA,CAApB;;AAQA,IAAMC,WAAW,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,OAAjB,CAAd,CAAH,wLAGE,UAACL,CAAD;EAAA,OAAOA,CAAC,CAACM,KAAF,CAAQC,YAAf;AAAA,CAHF,EAIbR,WAJa,CAAjB;AAOA;AACA;AACA;AACA;;AACA,IAAMS,KAAK,gBAAG,IAAAC,iBAAA,EACZ,gBAUEC,GAVF,EAWK;EAAA,IATDC,GASC,QATDA,GASC;EAAA,sBARDC,KAQC;EAAA,IARDA,KAQC,2BARO,CAAC,EAAD,EAAK,GAAL,EAAU,GAAV,EAAe,IAAf,EAAqB,IAArB,CAQP;EAAA,4BAPDC,WAOC;EAAA,IAPDA,WAOC,iCAPa,EAOb;EAAA,wBANDC,OAMC;EAAA,IANDA,OAMC,6BANS,KAMT;EAAA,sBALDb,KAKC;EAAA,IALDA,KAKC,2BALO,KAKP;EAAA,IAJDc,SAIC,QAJDA,SAIC;EAAA,IAHEC,IAGF;;EACH,IAAMC,MAAM,GAAG,IAAAC,kBAAA,EACb,UAACC,IAAD;IAAA,iBAAqBR,GAArB,cAA4BQ,IAA5B,SAAmCL,OAAO,GAAG,IAAH,GAAU,EAApD;EAAA,CADa,EAEb,CAACH,GAAD,EAAMG,OAAN,CAFa,CAAf;;EAKA,IAAI,CAACH,GAAL,EAAU;IACR,oBACE,gCAAC,WAAD;MACE,GAAG,EAAEb,WADP;MAEE,SAAS,EAAEiB;IAFb,GAGMC,IAHN;MAIE,GAAG,EAAEN;IAJP,GADF;EAQD;;EAED,oBACE,gCAAC,WAAD;IACE,GAAG,EAAEO,MAAM,CAACJ,WAAD,CADb;IAEE,MAAM,EAAEf,WAFV;IAGE,cAAW,MAHb;IAIE,eAAac,KAAK,CAACQ,GAAN,CAAU,UAACD,IAAD;MAAA,iBAAaF,MAAM,CAACE,IAAD,CAAnB,cAA6BA,IAA7B;IAAA,CAAV,EAAgDE,IAAhD,CAAqD,IAArD,CAJf;IAKE,KAAK,EAAEpB,KALT;IAME,SAAS,EAAE,CAACc,SAAD,EAAY,UAAZ,EAAwBO,MAAxB,CAA+B,UAACC,CAAD;MAAA,OAAOA,CAAP;IAAA,CAA/B,EAAyCF,IAAzC,CAA8C,GAA9C;EANb,GAOML,IAPN;IAQE,GAAG,EAAEN;EARP,GADF;AAYD,CAzCW,CAAd;AA4CAF,KAAK,CAACgB,WAAN,GAAoB,OAApB;eAEehB,K"}
+{"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"}

package/dist/cjs/ImageSkeleton/index.js

@@ -1,35 +1,24 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 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 _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"])));
+
 /**
  * Provides an image placeholder while a user waits for the content to load.
  */
-
 var ImageSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react["default"].createElement(StyledImageSkeleton, _extends({
     width: "100%"

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;;;;;;;;;;;;;;AAIA,IAAMA,mBAAmB,GAAG,IAAAC,kBAAA,EAAOC,oBAAP,CAAH,wFAAzB;AAIA;AACA;AACA;;AACA,IAAMC,aAAa,gBAAG,IAAAC,iBAAA,EACpB,UAACC,KAAD,EAAQC,GAAR;EAAA,oBAAgB,gCAAC,mBAAD;IAAqB,KAAK,EAAC;EAA3B,GAAsCD,KAAtC;IAA6C,GAAG,EAAEC;EAAlD,GAAhB;AAAA,CADoB,CAAtB;AAIAH,aAAa,CAACI,WAAd,GAA4B,eAA5B;eAEeJ,a"}
+{"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"}

package/dist/cjs/Input/index.js

@@ -1,70 +1,42 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 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 _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _react2 = require("@emotion/react");
-
 var _icons = require("@os-design/icons");
-
 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 _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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 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));
 };
-
 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));
 };
-
 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));
 };
-
 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;
 }, function (p) {
@@ -77,15 +49,12 @@ var InputContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)
   return p.theme.borderRadius;
 }, 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);
 };
-
 var notHasRightStyles = function notHasRightStyles(p) {
   return !p.hasRight && (0, _react2.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);
 }, function (p) {
@@ -105,37 +74,35 @@ var RightAddon = (0, _styled["default"])(Addon)(_templateObject11 || (_templateO
 }, function (p) {
   return p.hasPadding && (0, _react2.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 _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      left = _ref.left,
-      _ref$leftHasPadding = _ref.leftHasPadding,
-      leftHasPadding = _ref$leftHasPadding === void 0 ? false : _ref$leftHasPadding,
-      right = _ref.right,
-      _ref$rightHasPadding = _ref.rightHasPadding,
-      rightHasPadding = _ref$rightHasPadding === void 0 ? false : _ref$rightHasPadding,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      containerRef = _ref.containerRef,
-      _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      size = _ref.size,
-      value = _ref.value,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    left = _ref.left,
+    _ref$leftHasPadding = _ref.leftHasPadding,
+    leftHasPadding = _ref$leftHasPadding === void 0 ? false : _ref$leftHasPadding,
+    right = _ref.right,
+    _ref$rightHasPadding = _ref.rightHasPadding,
+    rightHasPadding = _ref$rightHasPadding === void 0 ? false : _ref$rightHasPadding,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    containerRef = _ref.containerRef,
+    _ref$containerProps = _ref.containerProps,
+    containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
+    size = _ref.size,
+    value = _ref.value,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedRef = (0, _utils.useForwardedRef)(containerRef),
-      _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
-      innerContainerRef = _useForwardedRef2[0],
-      mergedContainerRef = _useForwardedRef2[1];
-
+    _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;
   }, [loading, right]);
@@ -159,7 +126,6 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       var focusableElements = (0, _getFocusableElements["default"])(document);
       var inputFocusableElements = innerContainerRef.current ? (0, _getFocusableElements["default"])(innerContainerRef.current) : [];
       var firstInputElementIsFocused = inputFocusableElements[0] === document.activeElement;
-
       if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {
         var inputContainerIndex = focusableElements.findIndex(function (el) {
           return el === innerContainerRef.current;

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","e","target","current","focusableElements","getFocusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } 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    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(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        onKeyDown={(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        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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"}
+{"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","e","target","current","focusableElements","getFocusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"sources":["../../../src/Input/index.tsx"],"sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } 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    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(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        onKeyDown={(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        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;AACA;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,oBACE,gCAAC,cAAc;IACb,QAAQ,EAAE5C,QAAS;IACnB,IAAI,EAAEgD,IAAK;IACX,QAAQ,EAAE,CAAChD,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,iBAAC0D,CAAC,EAAK;MACd;MACA;MACA,IAAI1D,QAAQ,IAAI0D,CAAC,CAACC,MAAM,KAAKN,iBAAiB,CAACO,OAAO,EAAE;MACxD,IAAMC,iBAAiB,GAAG,IAAAC,gCAAoB,EAC5CT,iBAAiB,CAACO,OAAO,CAC1B;MACDC,iBAAiB,CAAC,CAAC,CAAC,CAACE,KAAK,EAAE;IAC9B,CAAE;IACF,SAAS,EAAE,mBAACL,CAAC,EAAK;MAChB;MACA;MACA,IAAMG,iBAAiB,GAAG,IAAAC,gCAAoB,EAACE,QAAQ,CAAC;MACxD,IAAMC,sBAAsB,GAAGZ,iBAAiB,CAACO,OAAO,GACpD,IAAAE,gCAAoB,EAACT,iBAAiB,CAACO,OAAO,CAAC,GAC/C,EAAE;MACN,IAAMM,0BAA0B,GAC9BD,sBAAsB,CAAC,CAAC,CAAC,KAAKD,QAAQ,CAACG,aAAa;MACtD,IAAID,0BAA0B,IAAIR,CAAC,CAACU,GAAG,KAAK,KAAK,IAAIV,CAAC,CAACW,QAAQ,EAAE;QAC/D,IAAMC,mBAAmB,GAAGT,iBAAiB,CAACU,SAAS,CACrD,UAACC,EAAE;UAAA,OAAKA,EAAE,KAAKnB,iBAAiB,CAACO,OAAO;QAAA,EACzC;QACD,IAAIU,mBAAmB,KAAK,CAAC,EAAE;QAC/B,IAAMG,2BAA2B,GAC/BZ,iBAAiB,CAACS,mBAAmB,GAAG,CAAC,CAAC;QAC5CG,2BAA2B,CAACV,KAAK,EAAE;MACrC;IACF,CAAE;IACF,GAAG,EAAET;EAAmB,GACpBP,cAAc,GAEjBN,IAAI,iBACH,gCAAC,uBAAc;IAAC,SAAS,EAAE;MAAEiC,uBAAuB,EAAE;IAAI;EAAE,gBAC1D,gCAAC,SAAS;IAAC,UAAU,EAAEhC;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,kBAACS,CAAC;MAAA,OAAKR,SAAQ,CAACQ,CAAC,CAACC,MAAM,CAACV,KAAK,EAAES,CAAC,CAAC;IAAA;EAAC,GACzCP,IAAI;IACR,GAAG,EAAEZ;EAAI,GACT,EAEDgB,UAAU,iBACT,gCAAC,uBAAc;IAAC,SAAS,EAAE;MAAEmB,uBAAuB,EAAE;IAAI;EAAE,gBAC1D,gCAAC,UAAU;IAAC,UAAU,EAAEjB;EAAqB,GAC1CF,UAAU,CACA,CAEhB,CACc;AAErB,CAAC,CACF;AAEDlB,KAAK,CAACsC,WAAW,GAAG,OAAO;AAAC,eAEbtC,KAAK;AAAA"}