@os-design/core 1.0.156 → 1.0.157

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","clr","theme","formDividerColor","sizeStyles","Content","div","Title","colorText","sizes","large","ellipsisStyles","Description","inputColorPlaceholder","small","FormDivider","forwardRef","ref","title","description","rest","displayName"],"sources":["../../../src/FormDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormDividerProps extends JsxDivProps, WithSize {\n  /**\n   * The title that is in the center of the divider.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};\n  }\n\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  line-height: 1.2;\n  ${ellipsisStyles};\n`;\n\n/**\n * The divider line for separating the various elements of the form.\n */\nconst FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(\n  ({ title, description, ...rest }, ref) => (\n    <Container role='separator' {...rest} ref={ref}>\n      <Content>\n        <Title>{title}</Title>\n        <Description>{description}</Description>\n      </Content>\n    </Container>\n  )\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAeA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,gSAWa,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,gBAAZ,CAAP;AAAA,CAXb,EAcXC,kBAdW,CAAf;;AAiBA,IAAMC,OAAO,GAAGP,kBAAA,CAAOQ,GAAV,0IAAb;;AAMA,IAAMC,KAAK,GAAGT,kBAAA,CAAOQ,GAAV,8IACA,UAACN,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQM,SAAZ,CAAP;AAAA,CADA,EAEI,UAACR,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQO,KAAR,CAAcC,KAArB;AAAA,CAFJ,EAIPC,sBAJO,CAAX;;AAOA,IAAMC,WAAW,GAAGd,kBAAA,CAAOQ,GAAV,8IACN,UAACN,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQW,qBAAZ,CAAP;AAAA,CADM,EAEF,UAACb,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQO,KAAR,CAAcK,KAArB;AAAA,CAFE,EAIbH,sBAJa,CAAjB;AAOA;AACA;AACA;;;AACA,IAAMI,WAAW,gBAAG,IAAAC,iBAAA,EAClB,gBAAkCC,GAAlC;EAAA,IAAGC,KAAH,QAAGA,KAAH;EAAA,IAAUC,WAAV,QAAUA,WAAV;EAAA,IAA0BC,IAA1B;;EAAA,oBACE,gCAAC,SAAD;IAAW,IAAI,EAAC;EAAhB,GAAgCA,IAAhC;IAAsC,GAAG,EAAEH;EAA3C,iBACE,gCAAC,OAAD,qBACE,gCAAC,KAAD,QAAQC,KAAR,CADF,eAEE,gCAAC,WAAD,QAAcC,WAAd,CAFF,CADF,CADF;AAAA,CADkB,CAApB;AAWAJ,WAAW,CAACM,WAAZ,GAA0B,aAA1B;eAEeN,W"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","clr","theme","formDividerColor","sizeStyles","Content","div","Title","colorText","sizes","large","ellipsisStyles","Description","inputColorPlaceholder","small","FormDivider","forwardRef","ref","title","description","rest","displayName"],"sources":["../../../src/FormDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormDividerProps extends JsxDivProps, WithSize {\n  /**\n   * The title that is in the center of the divider.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};\n  }\n\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  line-height: 1.2;\n  ${ellipsisStyles};\n`;\n\n/**\n * The divider line for separating the various elements of the form.\n */\nconst FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(\n  ({ title, description, ...rest }, ref) => (\n    <Container role='separator' {...rest} ref={ref}>\n      <Content>\n        <Title>{title}</Title>\n        <Description>{description}</Description>\n      </Content>\n    </Container>\n  )\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezC,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CAAC,gSAW7B,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,gBAAgB,CAAC;AAAA,GAG5DC,kBAAU,CACb;AAED,IAAMC,OAAO,GAAGP,kBAAM,CAACQ,GAAG,0IAIzB;AAED,IAAMC,KAAK,GAAGT,kBAAM,CAACQ,GAAG,8IACb,UAACN,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACM,SAAS,CAAC;AAAA,GACzB,UAACR,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACO,KAAK,CAACC,KAAK;AAAA,GAErCC,sBAAc,CACjB;AAED,IAAMC,WAAW,GAAGd,kBAAM,CAACQ,GAAG,8IACnB,UAACN,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACW,qBAAqB,CAAC;AAAA,GACrC,UAACb,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACO,KAAK,CAACK,KAAK;AAAA,GAErCH,sBAAc,CACjB;;AAED;AACA;AACA;AACA,IAAMI,WAAW,gBAAG,IAAAC,iBAAU,EAC5B,gBAAkCC,GAAG;EAAA,IAAlCC,KAAK,QAALA,KAAK;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EAAA,oBAC5B,gCAAC,SAAS;IAAC,IAAI,EAAC;EAAW,GAAKA,IAAI;IAAE,GAAG,EAAEH;EAAI,iBAC7C,gCAAC,OAAO,qBACN,gCAAC,KAAK,QAAEC,KAAK,CAAS,eACtB,gCAAC,WAAW,QAAEC,WAAW,CAAe,CAChC,CACA;AAAA,CACb,CACF;AAEDJ,WAAW,CAACM,WAAW,GAAG,aAAa;AAAC,eAEzBN,WAAW;AAAA"}

package/dist/cjs/FormItem/index.js

@@ -1,97 +1,67 @@
 "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 _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _react2 = require("@emotion/react");
-
 var _firstChildHasType = _interopRequireDefault(require("./utils/firstChildHasType"));
-
 var _TextArea = _interopRequireDefault(require("../TextArea"));
-
 var _TextAreaSkeleton = _interopRequireDefault(require("../TextAreaSkeleton"));
-
 var _InputSkeleton = _interopRequireDefault(require("../InputSkeleton"));
-
 var _FormConfigContext = _interopRequireDefault(require("../Form/FormConfigContext"));
-
 var _Switch = _interopRequireDefault(require("../Switch"));
-
 var _SwitchSkeleton = _interopRequireDefault(require("../SwitchSkeleton"));
-
 var _excluded = ["label", "help", "optional", "hasError", "loading", "id", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 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 Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n"])), _styles.sizeStyles);
-
 var Label = _styled["default"].label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ", "em;\n  color: ", ";\n"])), function (p) {
   return p.theme.sizes.small;
 }, function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 });
-
 var Optional = _styled["default"].span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-left: 0.3em;\n"])), function (p) {
   return (0, _theming.clr)(p.theme.formItemColorOptional);
 });
-
 var hasErrorStyles = function hasErrorStyles(p) {
   return p.hasError && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.formItemColorError));
 };
-
 var Help = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('hasError'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-top: 0.1em;\n  font-size: ", "em;\n  color: ", ";\n  ", ";\n"])), function (p) {
   return p.theme.sizes.small;
 }, function (p) {
   return (0, _theming.clr)(p.theme.formItemColorHelp);
 }, hasErrorStyles);
+
 /**
  * The wrapper of the field.
  */
-
 var FormItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var label = _ref.label,
-      help = _ref.help,
-      _ref$optional = _ref.optional,
-      optional = _ref$optional === void 0 ? false : _ref$optional,
-      _ref$hasError = _ref.hasError,
-      hasError = _ref$hasError === void 0 ? false : _ref$hasError,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      id = _ref.id,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    help = _ref.help,
+    _ref$optional = _ref.optional,
+    optional = _ref$optional === void 0 ? false : _ref$optional,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    id = _ref.id,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_FormConfigContext["default"]),
-      optionalText = _useContext.optionalText;
-
+    optionalText = _useContext.optionalText;
   var containerId = (0, _react.useMemo)(function () {
     return id || Math.random().toString(36).slice(2, 11);
   }, [id]);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","css","formItemColorError","Help","formItemColorHelp","FormItem","forwardRef","ref","help","optional","loading","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","renderChildren","useCallback","c","React","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","firstChildHasType","TextArea","Switch","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AA+BA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,iFACXC,kBADW,CAAf;;AAIA,IAAMC,KAAK,GAAGH,kBAAA,CAAOI,KAAV,0LAII,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAArB;AAAA,CAJJ,EAKA,UAACH,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQI,SAAZ,CAAP;AAAA,CALA,CAAX;;AAQA,IAAMC,QAAQ,GAAGX,kBAAA,CAAOY,IAAV,iHACH,UAACP,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQO,qBAAZ,CAAP;AAAA,CADG,CAAd;;AAKA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACT,CAAD;EAAA,OACrBA,CAAC,CAACU,QAAF,QACAC,WADA,+FAEW,IAAAP,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQW,kBAAZ,CAFX,CADqB;AAAA,CAAvB;;AAOA,IAAMC,IAAI,GAAG,IAAAlB,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,UAAjB,CAAd,CAAH,+IAEK,UAACI,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAArB;AAAA,CAFL,EAGC,UAACH,CAAD;EAAA,OAAO,IAAAI,YAAA,EAAIJ,CAAC,CAACC,KAAF,CAAQa,iBAAZ,CAAP;AAAA,CAHD,EAINL,cAJM,CAAV;AAOA;AACA;AACA;;AACA,IAAMM,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAWEC,GAXF,EAYK;EAAA,IAVDlB,KAUC,QAVDA,KAUC;EAAA,IATDmB,IASC,QATDA,IASC;EAAA,yBARDC,QAQC;EAAA,IARDA,QAQC,8BARU,KAQV;EAAA,yBAPDT,QAOC;EAAA,IAPDA,QAOC,8BAPU,KAOV;EAAA,wBANDU,OAMC;EAAA,IANDA,OAMC,6BANS,KAMT;EAAA,IALDC,EAKC,QALDA,EAKC;EAAA,IAJDC,QAIC,QAJDA,QAIC;EAAA,IAHEC,IAGF;;EACH,kBAAyB,IAAAC,iBAAA,EAAWC,6BAAX,CAAzB;EAAA,IAAQC,YAAR,eAAQA,YAAR;;EAEA,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAClB;IAAA,OAAMP,EAAE,IAAIQ,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CAAZ;EAAA,CADkB,EAElB,CAACX,EAAD,CAFkB,CAApB;EAIA,IAAMY,OAAO,GAAG,IAAAL,cAAA,EAAQ;IAAA,uBAAeD,WAAf;EAAA,CAAR,EAAsC,CAACA,WAAD,CAAtC,CAAhB;EACA,IAAMO,MAAM,GAAG,IAAAN,cAAA,EAAQ;IAAA,sBAAcD,WAAd;EAAA,CAAR,EAAqC,CAACA,WAAD,CAArC,CAAf;EAEA,IAAMQ,cAAc,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACvC,IAAMC,CAAC,GAAG,aAAAC,iBAAA,CAAMC,cAAN,CAAqBjB,QAArB,iBACNgB,iBAAA,CAAME,YAAN,CAAwBlB,QAAxB,EAAkC;MAChCD,EAAE,EAAEY,OAD4B;MAEhC,gBAAgBvB,QAFgB;MAGhC,oBAAoBQ,IAAI,GAAGgB,MAAH,GAAYO;IAHJ,CAAlC,CADM,GAMNnB,QANJ;IAQA,IAAI,CAACZ,QAAL,EAAe,OAAO2B,CAAP;IAEf,oBACE,gCAAC,uBAAD;MACE,SAAS,EAAE,mBAACpC,KAAD;QAAA,OAAY;UACrByC,gBAAgB,EAAEzC,KAAK,CAACW;QADH,CAAZ;MAAA;IADb,GAKGyB,CALH,CADF;EASD,CApBsB,EAoBpB,CAACf,QAAD,EAAWW,OAAX,EAAoBf,IAApB,EAA0BgB,MAA1B,EAAkCxB,QAAlC,CApBoB,CAAvB;EAsBA,IAAMiC,cAAc,GAAG,IAAAP,kBAAA,EAAY,YAAM;IACvC,IAAI,IAAAQ,6BAAA,EAAkBtB,QAAlB,EAA4BuB,oBAA5B,CAAJ,EAA2C,oBAAO,gCAAC,4BAAD,OAAP;IAC3C,IAAI,IAAAD,6BAAA,EAAkBtB,QAAlB,EAA4BwB,kBAA5B,CAAJ,EAAyC,oBAAO,gCAAC,0BAAD,OAAP;IACzC,oBAAO,gCAAC,yBAAD,OAAP;EACD,CAJsB,EAIpB,CAACxB,QAAD,CAJoB,CAAvB;EAMA,oBACE,gCAAC,SAAD;IAAW,IAAI,EAAC,OAAhB;IAAwB,EAAE,EAAED;EAA5B,GAAoCE,IAApC;IAA0C,GAAG,EAAEN;EAA/C,IACGlB,KAAK,iBACJ,gCAAC,KAAD;IAAO,OAAO,EAAEkC;EAAhB,GACGlC,KADH,EAEGoB,QAAQ,iBAAI,gCAAC,QAAD,aAAYO,YAAZ,MAFf,CAFJ,EAOGN,OAAO,GAAGuB,cAAc,EAAjB,GAAsBR,cAAc,EAP9C,EAQGjB,IAAI,iBACH,gCAAC,IAAD;IACE,QAAQ,EAAER,QADZ;IAEE,aAAWA,QAAQ,GAAG,QAAH,GAAc+B,SAFnC;IAGE,EAAE,EAAEP;EAHN,GAKGhB,IALH,CATJ,CADF;AAoBD,CAvEc,CAAjB;AA0EAH,QAAQ,CAACgC,WAAT,GAAuB,UAAvB;eAEehC,Q"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","css","formItemColorError","Help","formItemColorHelp","FormItem","forwardRef","ref","help","optional","loading","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","renderChildren","useCallback","c","React","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","firstChildHasType","TextArea","Switch","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}

package/dist/cjs/FormItem/utils/firstChildHasType.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var firstChildHasType = function firstChildHasType(children, component) {
   var firstChild = _react["default"].Children.toArray(children)[0];
-
   return /*#__PURE__*/_react["default"].isValidElement(firstChild) && firstChild.type === component;
 };
-
 var _default = firstChildHasType;
 exports["default"] = _default;
 //# sourceMappingURL=firstChildHasType.js.map

package/dist/cjs/FormItem/utils/firstChildHasType.js.map

@@ -1 +1 @@
-{"version":3,"file":"firstChildHasType.js","names":["firstChildHasType","children","component","firstChild","React","Children","toArray","isValidElement","type"],"sources":["../../../../src/FormItem/utils/firstChildHasType.ts"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nconst firstChildHasType = (\n  children: ReactNode | ReactNode[],\n  component: React.FC\n): boolean => {\n  const firstChild = React.Children.toArray(children)[0];\n  return React.isValidElement(firstChild) && firstChild.type === component;\n};\n\nexport default firstChildHasType;\n"],"mappings":";;;;;;;AAAA;;;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CACxBC,QADwB,EAExBC,SAFwB,EAGZ;EACZ,IAAMC,UAAU,GAAGC,iBAAA,CAAMC,QAAN,CAAeC,OAAf,CAAuBL,QAAvB,EAAiC,CAAjC,CAAnB;;EACA,OAAO,aAAAG,iBAAA,CAAMG,cAAN,CAAqBJ,UAArB,KAAoCA,UAAU,CAACK,IAAX,KAAoBN,SAA/D;AACD,CAND;;eAQeF,iB"}
+{"version":3,"file":"firstChildHasType.js","names":["firstChildHasType","children","component","firstChild","React","Children","toArray","isValidElement","type"],"sources":["../../../../src/FormItem/utils/firstChildHasType.ts"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nconst firstChildHasType = (\n  children: ReactNode | ReactNode[],\n  component: React.FC\n): boolean => {\n  const firstChild = React.Children.toArray(children)[0];\n  return React.isValidElement(firstChild) && firstChild.type === component;\n};\n\nexport default firstChildHasType;\n"],"mappings":";;;;;;AAAA;AAAyC;AAEzC,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiB,CACrBC,QAAiC,EACjCC,SAAmB,EACP;EACZ,IAAMC,UAAU,GAAGC,iBAAK,CAACC,QAAQ,CAACC,OAAO,CAACL,QAAQ,CAAC,CAAC,CAAC,CAAC;EACtD,OAAO,aAAAG,iBAAK,CAACG,cAAc,CAACJ,UAAU,CAAC,IAAIA,UAAU,CAACK,IAAI,KAAKN,SAAS;AAC1E,CAAC;AAAC,eAEaF,iBAAiB;AAAA"}

package/dist/cjs/Gallery/Status.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _utils = require("@os-design/utils");
-
 var _templateObject, _templateObject2;
-
 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 Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('height'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: ", "px;\n"])), function (p) {
   return p.height;
 });
@@ -29,11 +21,10 @@ var Block = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('count',
 }, function (p) {
   return p.current ? (0, _theming.clr)(p.theme.galleryStatusColorBgCurrent) : (0, _theming.clr)(p.theme.galleryStatusColorBg);
 });
-
 var Status = function Status(_ref) {
   var count = _ref.count,
-      current = _ref.current,
-      height = _ref.height;
+    current = _ref.current,
+    height = _ref.height;
   return /*#__PURE__*/_react["default"].createElement(Container, {
     height: height
   }, Array(count).fill(0).map(function (_, index) {
@@ -46,7 +37,6 @@ var Status = function Status(_ref) {
     });
   }));
 };
-
 var _default = Status;
 exports["default"] = _default;
 //# sourceMappingURL=Status.js.map

package/dist/cjs/Gallery/Status.js.map

@@ -1 +1 @@
-{"version":3,"file":"Status.js","names":["Container","styled","omitEmotionProps","p","height","Block","count","index","current","clr","theme","galleryStatusColorBgCurrent","galleryStatusColorBg","Status","Array","fill","map","_"],"sources":["../../../src/Gallery/Status.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\n\ninterface StatusProps {\n  count: number;\n  current: number;\n  height: number;\n}\n\ninterface ContainerProps {\n  height: number;\n}\nconst Container = styled('div', omitEmotionProps('height'))<ContainerProps>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: ${(p) => p.height}px;\n`;\n\ninterface BlockProps {\n  count: number;\n  index: number;\n  current: boolean;\n}\nconst Block = styled(\n  'div',\n  omitEmotionProps('count', 'index', 'current')\n)<BlockProps>`\n  position: absolute;\n  left: ${(p) => (100 / p.count) * p.index}%;\n  width: ${(p) =>\n    p.index < p.count - 1\n      ? `calc(${100 / p.count}% - 2px)`\n      : `${100 / p.count}%`};\n  height: 100%;\n\n  background-color: ${(p) =>\n    p.current\n      ? clr(p.theme.galleryStatusColorBgCurrent)\n      : clr(p.theme.galleryStatusColorBg)};\n  backdrop-filter: blur(0.2em);\n`;\n\nconst Status: React.FC<StatusProps> = ({ count, current, height }) => (\n  <Container height={height}>\n    {Array(count)\n      .fill(0)\n      .map((_, index) => (\n        <Block\n          key={index} // eslint-disable-line react/no-array-index-key\n          count={count}\n          index={index}\n          current={index === current}\n        />\n      ))}\n  </Container>\n);\n\nexport default Status;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAWA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,QAAjB,CAAd,CAAH,yJAKH,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,MAAT;AAAA,CALG,CAAf;AAaA,IAAMC,KAAK,GAAG,IAAAJ,kBAAA,EACZ,KADY,EAEZ,IAAAC,uBAAA,EAAiB,OAAjB,EAA0B,OAA1B,EAAmC,SAAnC,CAFY,CAAH,gNAKD,UAACC,CAAD;EAAA,OAAQ,MAAMA,CAAC,CAACG,KAAT,GAAkBH,CAAC,CAACI,KAA3B;AAAA,CALC,EAMA,UAACJ,CAAD;EAAA,OACPA,CAAC,CAACI,KAAF,GAAUJ,CAAC,CAACG,KAAF,GAAU,CAApB,kBACY,MAAMH,CAAC,CAACG,KADpB,0BAEO,MAAMH,CAAC,CAACG,KAFf,MADO;AAAA,CANA,EAYW,UAACH,CAAD;EAAA,OAClBA,CAAC,CAACK,OAAF,GACI,IAAAC,YAAA,EAAIN,CAAC,CAACO,KAAF,CAAQC,2BAAZ,CADJ,GAEI,IAAAF,YAAA,EAAIN,CAAC,CAACO,KAAF,CAAQE,oBAAZ,CAHc;AAAA,CAZX,CAAX;;AAmBA,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC;EAAA,IAAGP,KAAH,QAAGA,KAAH;EAAA,IAAUE,OAAV,QAAUA,OAAV;EAAA,IAAmBJ,MAAnB,QAAmBA,MAAnB;EAAA,oBACpC,gCAAC,SAAD;IAAW,MAAM,EAAEA;EAAnB,GACGU,KAAK,CAACR,KAAD,CAAL,CACES,IADF,CACO,CADP,EAEEC,GAFF,CAEM,UAACC,CAAD,EAAIV,KAAJ;IAAA,oBACH,gCAAC,KAAD;MACE,GAAG,EAAEA,KADP,CACc;MADd;MAEE,KAAK,EAAED,KAFT;MAGE,KAAK,EAAEC,KAHT;MAIE,OAAO,EAAEA,KAAK,KAAKC;IAJrB,EADG;EAAA,CAFN,CADH,CADoC;AAAA,CAAtC;;eAeeK,M"}
+{"version":3,"file":"Status.js","names":["Container","styled","omitEmotionProps","p","height","Block","count","index","current","clr","theme","galleryStatusColorBgCurrent","galleryStatusColorBg","Status","Array","fill","map","_"],"sources":["../../../src/Gallery/Status.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\n\ninterface StatusProps {\n  count: number;\n  current: number;\n  height: number;\n}\n\ninterface ContainerProps {\n  height: number;\n}\nconst Container = styled('div', omitEmotionProps('height'))<ContainerProps>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: ${(p) => p.height}px;\n`;\n\ninterface BlockProps {\n  count: number;\n  index: number;\n  current: boolean;\n}\nconst Block = styled(\n  'div',\n  omitEmotionProps('count', 'index', 'current')\n)<BlockProps>`\n  position: absolute;\n  left: ${(p) => (100 / p.count) * p.index}%;\n  width: ${(p) =>\n    p.index < p.count - 1\n      ? `calc(${100 / p.count}% - 2px)`\n      : `${100 / p.count}%`};\n  height: 100%;\n\n  background-color: ${(p) =>\n    p.current\n      ? clr(p.theme.galleryStatusColorBgCurrent)\n      : clr(p.theme.galleryStatusColorBg)};\n  backdrop-filter: blur(0.2em);\n`;\n\nconst Status: React.FC<StatusProps> = ({ count, current, height }) => (\n  <Container height={height}>\n    {Array(count)\n      .fill(0)\n      .map((_, index) => (\n        <Block\n          key={index} // eslint-disable-line react/no-array-index-key\n          count={count}\n          index={index}\n          current={index === current}\n        />\n      ))}\n  </Container>\n);\n\nexport default Status;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAAoD;AAAA;AAAA;AAWpD,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,QAAQ,CAAC,CAAC,yJAK/C,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,MAAM;AAAA,EAC1B;AAOD,IAAMC,KAAK,GAAG,IAAAJ,kBAAM,EAClB,KAAK,EACL,IAAAC,uBAAgB,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9C,gNAES,UAACC,CAAC;EAAA,OAAM,GAAG,GAAGA,CAAC,CAACG,KAAK,GAAIH,CAAC,CAACI,KAAK;AAAA,GAC/B,UAACJ,CAAC;EAAA,OACTA,CAAC,CAACI,KAAK,GAAGJ,CAAC,CAACG,KAAK,GAAG,CAAC,kBACT,GAAG,GAAGH,CAAC,CAACG,KAAK,0BAClB,GAAG,GAAGH,CAAC,CAACG,KAAK,MAAG;AAAA,GAGL,UAACH,CAAC;EAAA,OACpBA,CAAC,CAACK,OAAO,GACL,IAAAC,YAAG,EAACN,CAAC,CAACO,KAAK,CAACC,2BAA2B,CAAC,GACxC,IAAAF,YAAG,EAACN,CAAC,CAACO,KAAK,CAACE,oBAAoB,CAAC;AAAA,EAExC;AAED,IAAMC,MAA6B,GAAG,SAAhCA,MAA6B;EAAA,IAAMP,KAAK,QAALA,KAAK;IAAEE,OAAO,QAAPA,OAAO;IAAEJ,MAAM,QAANA,MAAM;EAAA,oBAC7D,gCAAC,SAAS;IAAC,MAAM,EAAEA;EAAO,GACvBU,KAAK,CAACR,KAAK,CAAC,CACVS,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,UAACC,CAAC,EAAEV,KAAK;IAAA,oBACZ,gCAAC,KAAK;MACJ,GAAG,EAAEA,KAAM,CAAC;MAAA;MACZ,KAAK,EAAED,KAAM;MACb,KAAK,EAAEC,KAAM;MACb,OAAO,EAAEA,KAAK,KAAKC;IAAQ,EAC3B;EAAA,CACH,CAAC,CACM;AAAA,CACb;AAAC,eAEaK,MAAM;AAAA"}

package/dist/cjs/Gallery/index.js

@@ -1,58 +1,33 @@
 "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 _icons = require("@os-design/icons");
-
 var _theming = require("@os-design/theming");
-
 var _utils = require("@os-design/utils");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Image = _interopRequireDefault(require("../Image"));
-
 var _Status = _interopRequireDefault(require("./Status"));
-
 var _excluded = ["urls", "aspectRatio", "imageProps", "hideArrows", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 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 = 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 Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('heightPercent'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding-bottom: ", "%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ", ";\n  border-radius: ", "em;\n  overflow: hidden;\n"])), function (p) {
   return p.heightPercent;
 }, function (p) {
@@ -66,45 +41,42 @@ var LeftButton = (0, _styled["default"])(NavButton)(_templateObject4 || (_templa
 var RightButton = (0, _styled["default"])(NavButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  right: 0.2em;\n"])));
 var MIN_DIST_PX = 30;
 var MAX_ANGLE = 30;
+
 /**
  * The image gallery. Change the cursor/touch position to change images.
  * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.
  */
-
 var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var urls = _ref.urls,
-      _ref$aspectRatio = _ref.aspectRatio,
-      aspectRatio = _ref$aspectRatio === void 0 ? [16, 9] : _ref$aspectRatio,
-      _ref$imageProps = _ref.imageProps,
-      imageProps = _ref$imageProps === void 0 ? {} : _ref$imageProps,
-      _ref$hideArrows = _ref.hideArrows,
-      hideArrows = _ref$hideArrows === void 0 ? false : _ref$hideArrows,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$aspectRatio = _ref.aspectRatio,
+    aspectRatio = _ref$aspectRatio === void 0 ? [16, 9] : _ref$aspectRatio,
+    _ref$imageProps = _ref.imageProps,
+    imageProps = _ref$imageProps === void 0 ? {} : _ref$imageProps,
+    _ref$hideArrows = _ref.hideArrows,
+    hideArrows = _ref$hideArrows === void 0 ? false : _ref$hideArrows,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
-      _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
-      innerContainerRef = _useForwardedRef2[0],
-      mergedContainerRef = _useForwardedRef2[1];
-
+    _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
+    innerContainerRef = _useForwardedRef2[0],
+    mergedContainerRef = _useForwardedRef2[1];
   var _useState = (0, _react.useState)(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      imageUrl = _useState2[0],
-      setImageUrl = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    imageUrl = _useState2[0],
+    setImageUrl = _useState2[1];
   var _useState3 = (0, _react.useState)(urls.length > 0 ? 0 : null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      imageIndex = _useState4[0],
-      setImageIndex = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    imageIndex = _useState4[0],
+    setImageIndex = _useState4[1];
   var heightPercent = (0, _react.useMemo)(function () {
     return Math.round(aspectRatio[1] / aspectRatio[0] * 1000000) / 10000;
   }, [aspectRatio]);
   var imageIndexRef = (0, _react.useRef)(imageIndex);
   (0, _react.useEffect)(function () {
     imageIndexRef.current = imageIndex;
-  }, [imageIndex]); // Update the image if the index was changed
+  }, [imageIndex]);
 
+  // Update the image if the index was changed
   (0, _react.useEffect)(function () {
     setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
   }, [imageIndex, urls]);
@@ -119,15 +91,12 @@ var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, [size.height]);
   var updateGalleryImage = (0, _react.useCallback)(function (clientX) {
     if (!innerContainerRef.current) return;
-
     var _innerContainerRef$cu = innerContainerRef.current.getBoundingClientRect(),
-        x = _innerContainerRef$cu.x;
-
+      x = _innerContainerRef$cu.x;
     var widthPerImage = sizeRef.current.width / urls.length;
     var xPos = clientX - x;
     if (xPos < 0) return;
     var nextIndex = Math.floor(xPos / widthPerImage);
-
     if (imageIndexRef.current !== nextIndex) {
       setImageIndex(nextIndex);
     }
@@ -155,8 +124,8 @@ var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, [updateGalleryImage]);
   var touchStartHandler = (0, _react.useCallback)(function (e) {
     var _e$touches$ = e.touches[0],
-        clientX = _e$touches$.clientX,
-        clientY = _e$touches$.clientY;
+      clientX = _e$touches$.clientX,
+      clientY = _e$touches$.clientY;
     startTouchPosRef.current = {
       x: clientX,
       y: clientY
@@ -165,22 +134,20 @@ var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var touchMoveHandler = (0, _react.useCallback)(function (e) {
     if (!startTouchPosRef.current) return;
     var _startTouchPosRef$cur = startTouchPosRef.current,
-        x = _startTouchPosRef$cur.x,
-        y = _startTouchPosRef$cur.y;
+      x = _startTouchPosRef$cur.x,
+      y = _startTouchPosRef$cur.y;
     var _e$touches$2 = e.touches[0],
-        clientX = _e$touches$2.clientX,
-        clientY = _e$touches$2.clientY;
+      clientX = _e$touches$2.clientX,
+      clientY = _e$touches$2.clientY;
     var diffX = Math.abs(x - clientX);
     var diffY = Math.abs(y - clientY);
     var diff = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
     if (diff < MIN_DIST_PX) return;
     var angle = Math.atan(diffY / diffX) * 180 / Math.PI;
-
     if (angle > MAX_ANGLE) {
       startTouchPosRef.current = null;
       return;
     }
-
     if (x < clientX) prev();else next();
     startTouchPosRef.current = null;
   }, [next, prev]);
@@ -195,7 +162,6 @@ var Gallery = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         onTouchEnd: touchEndHandler
       };
     }
-
     return {
       onMouseMove: mouseMoveHandler
     };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","heightPercent","clr","theme","galleryColorBg","borderRadius","StyledImage","Image","NavButton","Button","LeftButton","RightButton","MIN_DIST_PX","MAX_ANGLE","Gallery","forwardRef","ref","urls","aspectRatio","imageProps","hideArrows","children","rest","useForwardedRef","innerContainerRef","mergedContainerRef","useState","undefined","imageUrl","setImageUrl","length","imageIndex","setImageIndex","useMemo","Math","round","imageIndexRef","useRef","useEffect","current","startTouchPosRef","size","useSize","sizeRef","statusHeight","height","updateGalleryImage","useCallback","clientX","getBoundingClientRect","x","widthPerImage","width","xPos","nextIndex","floor","prev","index","next","left","e","preventDefault","right","mouseMoveHandler","touchStartHandler","touches","clientY","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler","handlers","isTouchDevice","onTouchStart","onTouchMove","onTouchEnd","onMouseMove","colorPrimary"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Left, Right } from '@os-design/icons';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst NavButton = styled(Button)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n\n  background-color: hsla(0, 0%, 0%, 0.5);\n  backdrop-filter: blur(0.2em);\n`;\n\nconst LeftButton = styled(NavButton)`\n  left: 0.2em;\n`;\n\nconst RightButton = styled(NavButton)`\n  right: 0.2em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the navigation buttons is shown.\n   */\n  hideArrows?: boolean;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 30;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery = forwardRef<HTMLDivElement, GalleryProps>(\n  (\n    {\n      urls,\n      aspectRatio = [16, 9],\n      imageProps = {},\n      hideArrows = false,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);\n\n    const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n    const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n    const heightPercent = useMemo(\n      () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n      [aspectRatio]\n    );\n\n    const imageIndexRef = useRef(imageIndex);\n    useEffect(() => {\n      imageIndexRef.current = imageIndex;\n    }, [imageIndex]);\n\n    // Update the image if the index was changed\n    useEffect(() => {\n      setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n    }, [imageIndex, urls]);\n\n    const startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n    const size = useSize(innerContainerRef);\n    const sizeRef = useRef(size);\n    useEffect(() => {\n      sizeRef.current = size;\n    }, [size]);\n\n    const statusHeight = useMemo(\n      () => Math.round(size.height / 70),\n      [size.height]\n    );\n\n    const updateGalleryImage = useCallback(\n      (clientX: number) => {\n        if (!innerContainerRef.current) return;\n        const { x } = innerContainerRef.current.getBoundingClientRect();\n        const widthPerImage = sizeRef.current.width / urls.length;\n        const xPos = clientX - x;\n        if (xPos < 0) return;\n        const nextIndex = Math.floor(xPos / widthPerImage);\n        if (imageIndexRef.current !== nextIndex) {\n          setImageIndex(nextIndex);\n        }\n      },\n      [innerContainerRef, urls.length]\n    );\n\n    const prev = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n    }, [urls.length]);\n\n    const next = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n    }, [urls.length]);\n\n    const left = useCallback<MouseEventHandler>(\n      (e) => {\n        prev();\n        e.preventDefault();\n      },\n      [prev]\n    );\n\n    const right = useCallback<MouseEventHandler>(\n      (e) => {\n        next();\n        e.preventDefault();\n      },\n      [next]\n    );\n\n    const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n      (e) => updateGalleryImage(e.clientX),\n      [updateGalleryImage]\n    );\n\n    const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n      (e) => {\n        const { clientX, clientY } = e.touches[0];\n        startTouchPosRef.current = { x: clientX, y: clientY };\n      },\n      []\n    );\n\n    const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n      (e) => {\n        if (!startTouchPosRef.current) return;\n        const { x, y } = startTouchPosRef.current;\n        const { clientX, clientY } = e.touches[0];\n        const diffX = Math.abs(x - clientX);\n        const diffY = Math.abs(y - clientY);\n        const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n        if (diff < MIN_DIST_PX) return;\n        const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n        if (angle > MAX_ANGLE) {\n          startTouchPosRef.current = null;\n          return;\n        }\n        if (x < clientX) prev();\n        else next();\n        startTouchPosRef.current = null;\n      },\n      [next, prev]\n    );\n\n    const touchEndHandler = useCallback<\n      TouchEventHandler<HTMLDivElement>\n    >(() => {\n      startTouchPosRef.current = null;\n    }, []);\n\n    const handlers = useMemo(() => {\n      if (isTouchDevice()) {\n        return {\n          onTouchStart: touchStartHandler,\n          onTouchMove: touchMoveHandler,\n          onTouchEnd: touchEndHandler,\n        };\n      }\n      return {\n        onMouseMove: mouseMoveHandler,\n      };\n    }, [\n      mouseMoveHandler,\n      touchEndHandler,\n      touchMoveHandler,\n      touchStartHandler,\n    ]);\n\n    return (\n      <ThemeOverrider activeTheme='dark'>\n        <Container\n          heightPercent={heightPercent}\n          {...handlers}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <StyledImage url={imageUrl} {...imageProps} />\n          {urls.length > 1 && imageIndex !== null && (\n            <>\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n              {isTouchDevice() && !hideArrows && (\n                <ThemeOverrider overrides={{ colorPrimary: [0, 0, 100] }}>\n                  <LeftButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={left}\n                  >\n                    <Left />\n                  </LeftButton>\n                  <RightButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={right}\n                  >\n                    <Right />\n                  </RightButton>\n                </ThemeOverrider>\n              )}\n            </>\n          )}\n          {children}\n        </Container>\n      </ThemeOverrider>\n    );\n  }\n);\n\nexport default Gallery;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","heightPercent","clr","theme","galleryColorBg","borderRadius","StyledImage","Image","NavButton","Button","LeftButton","RightButton","MIN_DIST_PX","MAX_ANGLE","Gallery","forwardRef","ref","urls","aspectRatio","imageProps","hideArrows","children","rest","useForwardedRef","innerContainerRef","mergedContainerRef","useState","undefined","imageUrl","setImageUrl","length","imageIndex","setImageIndex","useMemo","Math","round","imageIndexRef","useRef","useEffect","current","startTouchPosRef","size","useSize","sizeRef","statusHeight","height","updateGalleryImage","useCallback","clientX","getBoundingClientRect","x","widthPerImage","width","xPos","nextIndex","floor","prev","index","next","left","e","preventDefault","right","mouseMoveHandler","touchStartHandler","touches","clientY","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler","handlers","isTouchDevice","onTouchStart","onTouchMove","onTouchEnd","onMouseMove","colorPrimary"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { Left, Right } from '@os-design/icons';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSize,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst NavButton = styled(Button)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n\n  background-color: hsla(0, 0%, 0%, 0.5);\n  backdrop-filter: blur(0.2em);\n`;\n\nconst LeftButton = styled(NavButton)`\n  left: 0.2em;\n`;\n\nconst RightButton = styled(NavButton)`\n  right: 0.2em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the navigation buttons is shown.\n   */\n  hideArrows?: boolean;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 30;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery = forwardRef<HTMLDivElement, GalleryProps>(\n  (\n    {\n      urls,\n      aspectRatio = [16, 9],\n      imageProps = {},\n      hideArrows = false,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);\n\n    const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n    const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n    const heightPercent = useMemo(\n      () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n      [aspectRatio]\n    );\n\n    const imageIndexRef = useRef(imageIndex);\n    useEffect(() => {\n      imageIndexRef.current = imageIndex;\n    }, [imageIndex]);\n\n    // Update the image if the index was changed\n    useEffect(() => {\n      setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n    }, [imageIndex, urls]);\n\n    const startTouchPosRef = useRef<{ x: number; y: number } | null>(null);\n\n    const size = useSize(innerContainerRef);\n    const sizeRef = useRef(size);\n    useEffect(() => {\n      sizeRef.current = size;\n    }, [size]);\n\n    const statusHeight = useMemo(\n      () => Math.round(size.height / 70),\n      [size.height]\n    );\n\n    const updateGalleryImage = useCallback(\n      (clientX: number) => {\n        if (!innerContainerRef.current) return;\n        const { x } = innerContainerRef.current.getBoundingClientRect();\n        const widthPerImage = sizeRef.current.width / urls.length;\n        const xPos = clientX - x;\n        if (xPos < 0) return;\n        const nextIndex = Math.floor(xPos / widthPerImage);\n        if (imageIndexRef.current !== nextIndex) {\n          setImageIndex(nextIndex);\n        }\n      },\n      [innerContainerRef, urls.length]\n    );\n\n    const prev = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index > 0 ? index - 1 : urls.length - 1);\n    }, [urls.length]);\n\n    const next = useCallback(() => {\n      const index = imageIndexRef.current;\n      if (index === null) return;\n      setImageIndex(index < urls.length - 1 ? index + 1 : 0);\n    }, [urls.length]);\n\n    const left = useCallback<MouseEventHandler>(\n      (e) => {\n        prev();\n        e.preventDefault();\n      },\n      [prev]\n    );\n\n    const right = useCallback<MouseEventHandler>(\n      (e) => {\n        next();\n        e.preventDefault();\n      },\n      [next]\n    );\n\n    const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n      (e) => updateGalleryImage(e.clientX),\n      [updateGalleryImage]\n    );\n\n    const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n      (e) => {\n        const { clientX, clientY } = e.touches[0];\n        startTouchPosRef.current = { x: clientX, y: clientY };\n      },\n      []\n    );\n\n    const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n      (e) => {\n        if (!startTouchPosRef.current) return;\n        const { x, y } = startTouchPosRef.current;\n        const { clientX, clientY } = e.touches[0];\n        const diffX = Math.abs(x - clientX);\n        const diffY = Math.abs(y - clientY);\n        const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n        if (diff < MIN_DIST_PX) return;\n        const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n        if (angle > MAX_ANGLE) {\n          startTouchPosRef.current = null;\n          return;\n        }\n        if (x < clientX) prev();\n        else next();\n        startTouchPosRef.current = null;\n      },\n      [next, prev]\n    );\n\n    const touchEndHandler = useCallback<\n      TouchEventHandler<HTMLDivElement>\n    >(() => {\n      startTouchPosRef.current = null;\n    }, []);\n\n    const handlers = useMemo(() => {\n      if (isTouchDevice()) {\n        return {\n          onTouchStart: touchStartHandler,\n          onTouchMove: touchMoveHandler,\n          onTouchEnd: touchEndHandler,\n        };\n      }\n      return {\n        onMouseMove: mouseMoveHandler,\n      };\n    }, [\n      mouseMoveHandler,\n      touchEndHandler,\n      touchMoveHandler,\n      touchStartHandler,\n    ]);\n\n    return (\n      <ThemeOverrider activeTheme='dark'>\n        <Container\n          heightPercent={heightPercent}\n          {...handlers}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          <StyledImage url={imageUrl} {...imageProps} />\n          {urls.length > 1 && imageIndex !== null && (\n            <>\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n              {isTouchDevice() && !hideArrows && (\n                <ThemeOverrider overrides={{ colorPrimary: [0, 0, 100] }}>\n                  <LeftButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={left}\n                  >\n                    <Left />\n                  </LeftButton>\n                  <RightButton\n                    type='ghost'\n                    wide='never'\n                    size='small'\n                    onClick={right}\n                  >\n                    <Right />\n                  </RightButton>\n                </ThemeOverrider>\n              )}\n            </>\n          )}\n          {children}\n        </Container>\n      </ThemeOverrider>\n    );\n  }\n);\n\nexport default Gallery;\n"],"mappings":"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"}

package/dist/cjs/GlobalStyles/index.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _utils = require("@os-design/utils");
-
 var _resetStyles = _interopRequireDefault(require("./resetStyles"));
-
 var _typographyStyles = _interopRequireDefault(require("./typographyStyles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var GlobalStyles = function GlobalStyles() {
   (0, _utils.useVh)();
   return /*#__PURE__*/_react["default"].createElement(_react2.Global, {
@@ -25,7 +18,6 @@ var GlobalStyles = function GlobalStyles() {
     }
   });
 };
-
 GlobalStyles.displayName = 'GlobalStyles';
 var _default = GlobalStyles;
 exports["default"] = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["GlobalStyles","useVh","theme","resetStyles","typographyStyles","displayName"],"sources":["../../../src/GlobalStyles/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Global } from '@emotion/react';\nimport { useVh } from '@os-design/utils';\nimport resetStyles from './resetStyles';\nimport typographyStyles from './typographyStyles';\n\nconst GlobalStyles: React.FC = () => {\n  useVh();\n  return (\n    <Global styles={(theme) => [resetStyles(theme), typographyStyles(theme)]} />\n  );\n};\n\nGlobalStyles.displayName = 'GlobalStyles';\n\nexport default GlobalStyles;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,YAAsB,GAAG,SAAzBA,YAAyB,GAAM;EACnC,IAAAC,YAAA;EACA,oBACE,gCAAC,cAAD;IAAQ,MAAM,EAAE,gBAACC,KAAD;MAAA,OAAW,CAAC,IAAAC,uBAAA,EAAYD,KAAZ,CAAD,EAAqB,IAAAE,4BAAA,EAAiBF,KAAjB,CAArB,CAAX;IAAA;EAAhB,EADF;AAGD,CALD;;AAOAF,YAAY,CAACK,WAAb,GAA2B,cAA3B;eAEeL,Y"}
+{"version":3,"file":"index.js","names":["GlobalStyles","useVh","theme","resetStyles","typographyStyles","displayName"],"sources":["../../../src/GlobalStyles/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Global } from '@emotion/react';\nimport { useVh } from '@os-design/utils';\nimport resetStyles from './resetStyles';\nimport typographyStyles from './typographyStyles';\n\nconst GlobalStyles: React.FC = () => {\n  useVh();\n  return (\n    <Global styles={(theme) => [resetStyles(theme), typographyStyles(theme)]} />\n  );\n};\n\nGlobalStyles.displayName = 'GlobalStyles';\n\nexport default GlobalStyles;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAAkD;AAElD,IAAMA,YAAsB,GAAG,SAAzBA,YAAsB,GAAS;EACnC,IAAAC,YAAK,GAAE;EACP,oBACE,gCAAC,cAAM;IAAC,MAAM,EAAE,gBAACC,KAAK;MAAA,OAAK,CAAC,IAAAC,uBAAW,EAACD,KAAK,CAAC,EAAE,IAAAE,4BAAgB,EAACF,KAAK,CAAC,CAAC;IAAA;EAAC,EAAG;AAEhF,CAAC;AAEDF,YAAY,CAACK,WAAW,GAAG,cAAc;AAAC,eAE3BL,YAAY;AAAA"}

package/dist/cjs/GlobalStyles/resetStyles.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("@emotion/react");
-
 var _templateObject;
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var resetStyles = function resetStyles(theme) {
   return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    margin: 0;\n  }\n\n  p,\n  figure,\n  pre {\n    margin: 0 0 ", "em;\n  }\n"])), theme.paragraphMarginBottom);
 };
-
 var _default = resetStyles;
 exports["default"] = _default;
 //# sourceMappingURL=resetStyles.js.map