@os-design/core 1.0.112 → 1.0.116

package/dist/cjs/InputSearch/index.js

@@ -113,7 +113,7 @@ var InputSearch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         inputRef.current.focus();
       },
       "aria-label": locale.clearLabel
-    }, /*#__PURE__*/_react["default"].createElement(_icons.Close, null))), right),
+    }, /*#__PURE__*/_react["default"].createElement(_icons.CloseCircle, null))), right),
     value: forwardedValue,
     onChange: setForwardedValue,
     role: "searchbox",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputSearch/index.tsx"],"names":["fadeIn","keyframes","ClearButton","Button","p","theme","transitionDelay","InputSearch","ref","locale","defaultLocale","value","defaultValue","onChange","disabled","left","leftHasPadding","right","rest","inputRef","mergedInputRef","forwardedValue","setForwardedValue","buttonIconScaleFactor","current","focus","clearLabel","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAMA,MAAM,OAAGC,iBAAH,sHAAZ;AAKA,IAAMC,WAAW,GAAG,wBAAOC,kBAAP,CAAH,qGACFH,MADE,EACQ,UAACI,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,eAAf;AAAA,CADR,CAAjB;AAIA;AACA;AACA;;AACA,IAAMC,WAAW,gBAAG,uBAClB,gBAYEC,GAZF,EAaK;AAAA,yBAXDC,MAWC;AAAA,MAXDA,MAWC,4BAXQC,yBAWR;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,YASC,QATDA,YASC;AAAA,2BARDC,QAQC;AAAA,MARDA,QAQC,8BARU,YAAM,CAAE,CAQlB;AAAA,MAPDC,QAOC,QAPDA,QAOC;AAAA,MANDC,IAMC,QANDA,IAMC;AAAA,iCALDC,cAKC;AAAA,MALDA,cAKC,oCALgB,IAKhB;AAAA,MAJDC,KAIC,QAJDA,KAIC;AAAA,MAHEC,IAGF;;AACH,yBAAmC,4BAAgBV,GAAhB,CAAnC;AAAA;AAAA,MAAOW,QAAP;AAAA,MAAiBC,cAAjB;;AACA,2BAA4C,8BAAkB;AAC5DT,IAAAA,KAAK,EAALA,KAD4D;AAE5DC,IAAAA,YAAY,EAAZA,YAF4D;AAG5DC,IAAAA,QAAQ,EAARA;AAH4D,GAAlB,CAA5C;AAAA;AAAA,MAAOQ,cAAP;AAAA,MAAuBC,iBAAvB;;AAMA,sBACE,gCAAC,iBAAD;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,IAAI,eACF,+EACE,gCAAC,aAAD;AAAQ,MAAA,GAAG,EAAC;AAAZ,MADF,EAEGP,IAFH,CAHJ;AAQE,IAAA,cAAc,EAAEC,cARlB;AASE,IAAA,KAAK,eACH,kEACG,CAAC,CAACK,cAAF,iBACC,gCAAC,uBAAD;AAAgB,MAAA,SAAS,EAAE;AAAEE,QAAAA,qBAAqB,EAAE;AAAzB;AAA3B,oBACE,gCAAC,WAAD;AACE,MAAA,GAAG,EAAC,cADN;AAEE,MAAA,IAAI,EAAC,OAFP;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,IAAI,EAAC,OAJP;AAKE,MAAA,QAAQ,EAAET,QALZ;AAME,MAAA,OAAO,EAAE,mBAAM;AACbQ,QAAAA,iBAAiB,CAAC,EAAD,CAAjB;AACA,YAAI,CAACH,QAAQ,CAACK,OAAd,EAAuB;AACvBL,QAAAA,QAAQ,CAACK,OAAT,CAAiBC,KAAjB;AACD,OAVH;AAWE,oBAAYhB,MAAM,CAACiB;AAXrB,oBAaE,gCAAC,YAAD,OAbF,CADF,CAFJ,EAoBGT,KApBH,CAVJ;AAiCE,IAAA,KAAK,EAAEI,cAjCT;AAkCE,IAAA,QAAQ,EAAEC,iBAlCZ;AAmCE,IAAA,IAAI,EAAC,WAnCP;AAoCE,IAAA,QAAQ,EAAER;AApCZ,KAqCMI,IArCN;AAsCE,IAAA,GAAG,EAAEE;AAtCP,KADF;AA0CD,CAhEiB,CAApB;AAmEAb,WAAW,CAACoB,WAAZ,GAA0B,aAA1B;eAEepB,W","sourcesContent":["import React, { forwardRef } from 'react';\nimport { Close, Search } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport Input, { InputProps } from '../Input';\nimport Button from '../Button';\nimport defaultLocale, { InputSearchLocale } from './utils/defaultLocale';\n\nexport interface InputSearchProps\n  extends Omit<InputProps, 'type' | 'onChange'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputSearchLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst ClearButton = styled(Button)`\n  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n/**\n * The search input.\n */\nconst InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      disabled,\n      left,\n      leftHasPadding = true,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Input\n        type='text'\n        left={\n          <>\n            <Search key='search-icon' />\n            {left}\n          </>\n        }\n        leftHasPadding={leftHasPadding}\n        right={\n          <>\n            {!!forwardedValue && (\n              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>\n                <ClearButton\n                  key='clear-button'\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => {\n                    setForwardedValue('');\n                    if (!inputRef.current) return;\n                    inputRef.current.focus();\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <Close />\n                </ClearButton>\n              </ThemeOverrider>\n            )}\n            {right}\n          </>\n        }\n        value={forwardedValue}\n        onChange={setForwardedValue}\n        role='searchbox'\n        disabled={disabled}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputSearch.displayName = 'InputSearch';\n\nexport default InputSearch;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/InputSearch/index.tsx"],"names":["fadeIn","keyframes","ClearButton","Button","p","theme","transitionDelay","InputSearch","ref","locale","defaultLocale","value","defaultValue","onChange","disabled","left","leftHasPadding","right","rest","inputRef","mergedInputRef","forwardedValue","setForwardedValue","buttonIconScaleFactor","current","focus","clearLabel","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAMA,MAAM,OAAGC,iBAAH,sHAAZ;AAKA,IAAMC,WAAW,GAAG,wBAAOC,kBAAP,CAAH,qGACFH,MADE,EACQ,UAACI,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,eAAf;AAAA,CADR,CAAjB;AAIA;AACA;AACA;;AACA,IAAMC,WAAW,gBAAG,uBAClB,gBAYEC,GAZF,EAaK;AAAA,yBAXDC,MAWC;AAAA,MAXDA,MAWC,4BAXQC,yBAWR;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,YASC,QATDA,YASC;AAAA,2BARDC,QAQC;AAAA,MARDA,QAQC,8BARU,YAAM,CAAE,CAQlB;AAAA,MAPDC,QAOC,QAPDA,QAOC;AAAA,MANDC,IAMC,QANDA,IAMC;AAAA,iCALDC,cAKC;AAAA,MALDA,cAKC,oCALgB,IAKhB;AAAA,MAJDC,KAIC,QAJDA,KAIC;AAAA,MAHEC,IAGF;;AACH,yBAAmC,4BAAgBV,GAAhB,CAAnC;AAAA;AAAA,MAAOW,QAAP;AAAA,MAAiBC,cAAjB;;AACA,2BAA4C,8BAAkB;AAC5DT,IAAAA,KAAK,EAALA,KAD4D;AAE5DC,IAAAA,YAAY,EAAZA,YAF4D;AAG5DC,IAAAA,QAAQ,EAARA;AAH4D,GAAlB,CAA5C;AAAA;AAAA,MAAOQ,cAAP;AAAA,MAAuBC,iBAAvB;;AAMA,sBACE,gCAAC,iBAAD;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,IAAI,eACF,+EACE,gCAAC,aAAD;AAAQ,MAAA,GAAG,EAAC;AAAZ,MADF,EAEGP,IAFH,CAHJ;AAQE,IAAA,cAAc,EAAEC,cARlB;AASE,IAAA,KAAK,eACH,kEACG,CAAC,CAACK,cAAF,iBACC,gCAAC,uBAAD;AAAgB,MAAA,SAAS,EAAE;AAAEE,QAAAA,qBAAqB,EAAE;AAAzB;AAA3B,oBACE,gCAAC,WAAD;AACE,MAAA,GAAG,EAAC,cADN;AAEE,MAAA,IAAI,EAAC,OAFP;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,IAAI,EAAC,OAJP;AAKE,MAAA,QAAQ,EAAET,QALZ;AAME,MAAA,OAAO,EAAE,mBAAM;AACbQ,QAAAA,iBAAiB,CAAC,EAAD,CAAjB;AACA,YAAI,CAACH,QAAQ,CAACK,OAAd,EAAuB;AACvBL,QAAAA,QAAQ,CAACK,OAAT,CAAiBC,KAAjB;AACD,OAVH;AAWE,oBAAYhB,MAAM,CAACiB;AAXrB,oBAaE,gCAAC,kBAAD,OAbF,CADF,CAFJ,EAoBGT,KApBH,CAVJ;AAiCE,IAAA,KAAK,EAAEI,cAjCT;AAkCE,IAAA,QAAQ,EAAEC,iBAlCZ;AAmCE,IAAA,IAAI,EAAC,WAnCP;AAoCE,IAAA,QAAQ,EAAER;AApCZ,KAqCMI,IArCN;AAsCE,IAAA,GAAG,EAAEE;AAtCP,KADF;AA0CD,CAhEiB,CAApB;AAmEAb,WAAW,CAACoB,WAAZ,GAA0B,aAA1B;eAEepB,W","sourcesContent":["import React, { forwardRef } from 'react';\nimport { Search, CloseCircle } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport Input, { InputProps } from '../Input';\nimport Button from '../Button';\nimport defaultLocale, { InputSearchLocale } from './utils/defaultLocale';\n\nexport interface InputSearchProps\n  extends Omit<InputProps, 'type' | 'onChange'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputSearchLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst ClearButton = styled(Button)`\n  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n/**\n * The search input.\n */\nconst InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      disabled,\n      left,\n      leftHasPadding = true,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Input\n        type='text'\n        left={\n          <>\n            <Search key='search-icon' />\n            {left}\n          </>\n        }\n        leftHasPadding={leftHasPadding}\n        right={\n          <>\n            {!!forwardedValue && (\n              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>\n                <ClearButton\n                  key='clear-button'\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => {\n                    setForwardedValue('');\n                    if (!inputRef.current) return;\n                    inputRef.current.focus();\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <CloseCircle />\n                </ClearButton>\n              </ThemeOverrider>\n            )}\n            {right}\n          </>\n        }\n        value={forwardedValue}\n        onChange={setForwardedValue}\n        role='searchbox'\n        disabled={disabled}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputSearch.displayName = 'InputSearch';\n\nexport default InputSearch;\n"],"file":"index.js"}

package/dist/cjs/ListItem/index.js

@@ -19,7 +19,7 @@ var _theming = require("@os-design/theming");
 
 var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
 
-var _excluded = ["title", "description", "left", "right", "actions"];
+var _excluded = ["title", "description", "left", "right", "actions", "onTouchStart", "onTouchMove", "onTouchEnd"];
 
 var _templateObject;
 
@@ -53,6 +53,12 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       right = _ref.right,
       _ref$actions = _ref.actions,
       actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$onTouchStart = _ref.onTouchStart,
+      _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
+      _ref$onTouchMove = _ref.onTouchMove,
+      _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
+      _ref$onTouchEnd = _ref.onTouchEnd,
+      _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var touchDevice = (0, _react.useMemo)(function () {
@@ -63,7 +69,22 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       opened = _useSwipe.opened,
       handlers = _useSwipe.handlers;
 
-  return /*#__PURE__*/_react["default"].createElement(ListItemContainer, _extends({}, handlers, rest, {
+  return /*#__PURE__*/_react["default"].createElement(ListItemContainer, _extends({}, rest, {
+    onTouchStart: function onTouchStart(e) {
+      handlers.onTouchStart(e);
+
+      _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      handlers.onTouchMove(e);
+
+      _onTouchMove(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      handlers.onTouchEnd(e);
+
+      _onTouchEnd(e);
+    },
     ref: ref
   }), /*#__PURE__*/_react["default"].createElement(_ListItemContent["default"], {
     title: title,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["ListItemContainer","styled","div","p","theme","listItemColorBorder","ListItem","ref","title","description","left","right","actions","rest","touchDevice","opened","handlers","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUO,IAAMA,iBAAiB,GAAGC,mBAAOC,GAAV,2hBAUC,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CAVD,EA4B1B,sCA5B0B,CAAvB;AA+BP;AACA;AACA;;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAA6DC,GAA7D,EAAqE;AAAA,MAAlEC,KAAkE,QAAlEA,KAAkE;AAAA,MAA3DC,WAA2D,QAA3DA,WAA2D;AAAA,MAA9CC,IAA8C,QAA9CA,IAA8C;AAAA,MAAxCC,KAAwC,QAAxCA,KAAwC;AAAA,0BAAjCC,OAAiC;AAAA,MAAjCA,OAAiC,6BAAvB,EAAuB;AAAA,MAAhBC,IAAgB;;AACnE,MAAMC,WAAW,GAAG,oBAAQ;AAAA,WAAM,2BAAN;AAAA,GAAR,EAA+B,EAA/B,CAApB;;AACA,kBAA6B,sBAA7B;AAAA,MAAQC,MAAR,aAAQA,MAAR;AAAA,MAAgBC,QAAhB,aAAgBA,QAAhB;;AAEA,sBACE,gCAAC,iBAAD,eAAuBA,QAAvB,EAAqCH,IAArC;AAA2C,IAAA,GAAG,EAAEN;AAAhD,mBACE,gCAAC,2BAAD;AACE,IAAA,KAAK,EAAEC,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEE,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IADF,CADF;AAaD,CAlBc,CAAjB;AAqBAT,QAAQ,CAACW,WAAT,GAAuB,UAAvB;eAEeX,Q","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'ref'\n>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  ({ title, description, left, right, actions = [], ...rest }, ref) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer {...handlers} {...rest} ref={ref}>\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["ListItemContainer","styled","div","p","theme","listItemColorBorder","ListItem","ref","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","touchDevice","opened","handlers","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAOO,IAAMA,iBAAiB,GAAGC,mBAAOC,GAAV,2hBAUC,UAACC,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,KAAF,CAAQC,mBAAZ,CAAP;AAAA,CAVD,EA4B1B,sCA5B0B,CAAvB;AA+BP;AACA;AACA;;;;AACA,IAAMC,QAAQ,gBAAG,uBACf,gBAYEC,GAZF,EAaK;AAAA,MAXDC,KAWC,QAXDA,KAWC;AAAA,MAVDC,WAUC,QAVDA,WAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,KAQC,QARDA,KAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,EAOT;AAAA,+BANDC,YAMC;AAAA,MANDA,aAMC,kCANc,YAAM,CAAE,CAMtB;AAAA,8BALDC,WAKC;AAAA,MALDA,YAKC,iCALa,YAAM,CAAE,CAKrB;AAAA,6BAJDC,UAIC;AAAA,MAJDA,WAIC,gCAJY,YAAM,CAAE,CAIpB;AAAA,MAHEC,IAGF;;AACH,MAAMC,WAAW,GAAG,oBAAQ;AAAA,WAAM,2BAAN;AAAA,GAAR,EAA+B,EAA/B,CAApB;;AACA,kBAA6B,sBAA7B;AAAA,MAAQC,MAAR,aAAQA,MAAR;AAAA,MAAgBC,QAAhB,aAAgBA,QAAhB;;AAEA,sBACE,gCAAC,iBAAD,eACMH,IADN;AAEE,IAAA,YAAY,EAAE,sBAACI,CAAD,EAAO;AACnBD,MAAAA,QAAQ,CAACN,YAAT,CAAsBO,CAAtB;;AACAP,MAAAA,aAAY,CAACO,CAAD,CAAZ;AACD,KALH;AAME,IAAA,WAAW,EAAE,qBAACA,CAAD,EAAO;AAClBD,MAAAA,QAAQ,CAACL,WAAT,CAAqBM,CAArB;;AACAN,MAAAA,YAAW,CAACM,CAAD,CAAX;AACD,KATH;AAUE,IAAA,UAAU,EAAE,oBAACA,CAAD,EAAO;AACjBD,MAAAA,QAAQ,CAACJ,UAAT,CAAoBK,CAApB;;AACAL,MAAAA,WAAU,CAACK,CAAD,CAAV;AACD,KAbH;AAcE,IAAA,GAAG,EAAEb;AAdP,mBAgBE,gCAAC,2BAAD;AACE,IAAA,KAAK,EAAEC,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEK,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IAhBF,CADF;AA4BD,CA9Cc,CAAjB;AAiDAZ,QAAQ,CAACe,WAAT,GAAuB,UAAvB;eAEef,Q","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer\n        {...rest}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"index.js"}

package/dist/cjs/ListItemLink/index.js

@@ -23,7 +23,7 @@ var _ListItem = require("../ListItem");
 
 var _ListItemContent = _interopRequireDefault(require("../ListItem/ListItemContent"));
 
-var _excluded = ["title", "description", "left", "right", "actions", "as", "onMouseDown"];
+var _excluded = ["title", "description", "left", "right", "actions", "as", "onMouseDown", "onTouchStart", "onTouchMove", "onTouchEnd"];
 
 var _templateObject, _templateObject2;
 
@@ -74,6 +74,12 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       as = _ref.as,
       _ref$onMouseDown = _ref.onMouseDown,
       _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+      _ref$onTouchStart = _ref.onTouchStart,
+      _onTouchStart = _ref$onTouchStart === void 0 ? function () {} : _ref$onTouchStart,
+      _ref$onTouchMove = _ref.onTouchMove,
+      _onTouchMove = _ref$onTouchMove === void 0 ? function () {} : _ref$onTouchMove,
+      _ref$onTouchEnd = _ref.onTouchEnd,
+      _onTouchEnd = _ref$onTouchEnd === void 0 ? function () {} : _ref$onTouchEnd,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var touchDevice = (0, _react.useMemo)(function () {
@@ -86,13 +92,28 @@ var ListItemLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   return /*#__PURE__*/_react["default"].createElement(StyledLink, _extends({
     touchDevice: touchDevice,
-    as: as,
+    as: as
+  }, rest, {
     onMouseDown: function onMouseDown(e) {
       _onMouseDown(e);
 
       e.preventDefault();
-    }
-  }, handlers, rest, {
+    },
+    onTouchStart: function onTouchStart(e) {
+      handlers.onTouchStart(e);
+
+      _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      handlers.onTouchMove(e);
+
+      _onTouchMove(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      handlers.onTouchEnd(e);
+
+      _onTouchEnd(e);
+    },
     ref: ref
   }), /*#__PURE__*/_react["default"].createElement(_ListItemContent["default"], {
     title: title,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["actionsBgStyles","p","touchDevice","css","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","ListItemContainer","withComponent","resetFocusStyles","ListItemLink","ref","title","description","left","right","actions","as","onMouseDown","rest","opened","handlers","e","preventDefault","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD;AAAA,SACtB,CAACA,CAAC,CAACC,WAAH,QACAC,WADA,iNAKQ,+CAAQF,CAAC,CAACG,KAAF,CAAQC,oBAAR,CAA6BC,KAA7B,CAAmC,CAAnC,EAAsC,CAAtC,CAAR,IAAkD,CAAlD,GALR,EAMQ,kBAAIL,CAAC,CAACG,KAAF,CAAQC,oBAAZ,CANR,EAOUJ,CAAC,CAACG,KAAF,CAAQG,0BAPlB,CADsB;AAAA,CAAxB;;AAgBA,IAAMC,UAAU,GAAG,wBACjBC,4BAAkBC,aAAlB,CAAgC,GAAhC,CADiB,EAEjB,6BAAiB,aAAjB,EAAgC,IAAhC,CAFiB,CAAH,wPAIZC,wBAJY,EAWU,UAACV,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACG,KAAF,CAAQC,oBAAZ,CAAP;AAAA,CAXV,EAeZL,eAfY,CAAhB;AAkBA;AACA;AACA;;AACA,IAAMY,YAAY,gBAAG,uBACnB,gBAWEC,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,WASC,QATDA,WASC;AAAA,MARDC,IAQC,QARDA,IAQC;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,0BANDC,OAMC;AAAA,MANDA,OAMC,6BANS,EAMT;AAAA,MALDC,EAKC,QALDA,EAKC;AAAA,8BAJDC,WAIC;AAAA,MAJDA,YAIC,iCAJa,YAAM,CAAE,CAIrB;AAAA,MAHEC,IAGF;;AACH,MAAMnB,WAAW,GAAG,oBAAQ;AAAA,WAAM,2BAAN;AAAA,GAAR,EAA+B,EAA/B,CAApB;;AACA,kBAA6B,sBAA7B;AAAA,MAAQoB,MAAR,aAAQA,MAAR;AAAA,MAAgBC,QAAhB,aAAgBA,QAAhB;;AAEA,sBACE,gCAAC,UAAD;AACE,IAAA,WAAW,EAAErB,WADf;AAEE,IAAA,EAAE,EAAEiB,EAFN;AAGE,IAAA,WAAW,EAAE,qBAACK,CAAD,EAAO;AAClBJ,MAAAA,YAAW,CAACI,CAAD,CAAX;;AACAA,MAAAA,CAAC,CAACC,cAAF;AACD;AANH,KAOMF,QAPN,EAQMF,IARN;AASE,IAAA,GAAG,EAAER;AATP,mBAWE,gCAAC,2BAAD;AACE,IAAA,KAAK,EAAEC,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEhB,WANZ;AAOE,IAAA,MAAM,EAAEoB;AAPV,IAXF,CADF;AAuBD,CAxCkB,CAArB;AA2CAV,YAAY,CAACc,WAAb,GAA2B,cAA3B;eAEed,Y","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...handlers}\n        {...rest}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["actionsBgStyles","p","touchDevice","css","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","ListItemContainer","withComponent","resetFocusStyles","ListItemLink","ref","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","opened","handlers","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        {...rest}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"file":"index.js"}

package/dist/cjs/PageHeader/index.js

@@ -84,7 +84,7 @@ var notHasSubtitleStyles = function notHasSubtitleStyles(p) {
   return !p.hasSubtitle && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: ", "em;\n  "])), p.theme.sizes.large);
 };
 
-var Title = (0, _styled["default"])('h1', (0, _utils.omitEmotionProps)('hasSubtitle'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5;\n  ", ";\n  ", ";\n"])), notHasSubtitleStyles, _styles.ellipsisStyles);
+var Title = (0, _styled["default"])('h1', (0, _utils.omitEmotionProps)('hasSubtitle'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ", ";\n  ", ";\n"])), notHasSubtitleStyles, _styles.ellipsisStyles);
 
 var Subtitle = _styled["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: ", "em;\n  color: ", ";\n  line-height: 1;\n  margin-top: 0.2em;\n  ", ";\n"])), function (p) {
   return p.theme.sizes.small;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","css","leftIsGhostButton","rightIsGhostButton","m","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Button","Content","styled","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","ellipsisStyles","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","ref","title","subtitle","left","right","onBack","locale","defaultLocale","rest","LayoutContext","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","css","leftIsGhostButton","rightIsGhostButton","m","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Button","Content","styled","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","ellipsisStyles","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","ref","title","subtitle","left","right","onBack","locale","defaultLocale","rest","LayoutContext","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"file":"index.js"}

package/dist/esm/InputSearch/index.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign || 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); }
 
 import React, { forwardRef } from 'react';
-import { Close, Search } from '@os-design/icons';
+import { Search, CloseCircle } from '@os-design/icons';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
 import { useForwardedRef, useForwardedState } from '@os-design/utils';
@@ -59,7 +59,7 @@ const InputSearch = /*#__PURE__*/forwardRef(({
         inputRef.current.focus();
       },
       "aria-label": locale.clearLabel
-    }, /*#__PURE__*/React.createElement(Close, null))), right),
+    }, /*#__PURE__*/React.createElement(CloseCircle, null))), right),
     value: forwardedValue,
     onChange: setForwardedValue,
     role: "searchbox",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputSearch/index.tsx"],"names":["React","forwardRef","Close","Search","styled","keyframes","useForwardedRef","useForwardedState","ThemeOverrider","Input","Button","defaultLocale","fadeIn","ClearButton","p","theme","transitionDelay","InputSearch","locale","value","defaultValue","onChange","disabled","left","leftHasPadding","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","buttonIconScaleFactor","current","focus","clearLabel","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,KAAT,EAAgBC,MAAhB,QAA8B,kBAA9B;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,eAAT,EAA0BC,iBAA1B,QAAmD,kBAAnD;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,OAAOC,KAAP,MAAkC,UAAlC;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,aAAP,MAAiD,uBAAjD;AA0BA,MAAMC,MAAM,GAAGP,SAAU;AACzB;AACA;AACA,CAHA;AAKA,MAAMQ,WAAW,GAAGT,MAAM,CAACM,MAAD,CAAS;AACnC,eAAeE,MAAO,IAAIE,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,eAAgB;AACxD,CAFA;AAIA;AACA;AACA;;AACA,MAAMC,WAAW,gBAAGhB,UAAU,CAC5B,CACE;AACEiB,EAAAA,MAAM,GAAGP,aADX;AAEEQ,EAAAA,KAFF;AAGEC,EAAAA,YAHF;AAIEC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CAJrB;AAKEC,EAAAA,QALF;AAMEC,EAAAA,IANF;AAOEC,EAAAA,cAAc,GAAG,IAPnB;AAQEC,EAAAA,KARF;AASE,KAAGC;AATL,CADF,EAYEC,GAZF,KAaK;AACH,QAAM,CAACC,QAAD,EAAWC,cAAX,IAA6BvB,eAAe,CAACqB,GAAD,CAAlD;AACA,QAAM,CAACG,cAAD,EAAiBC,iBAAjB,IAAsCxB,iBAAiB,CAAC;AAC5DY,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,oBAAC,KAAD;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,IAAI,eACF,uDACE,oBAAC,MAAD;AAAQ,MAAA,GAAG,EAAC;AAAZ,MADF,EAEGE,IAFH,CAHJ;AAQE,IAAA,cAAc,EAAEC,cARlB;AASE,IAAA,KAAK,eACH,0CACG,CAAC,CAACM,cAAF,iBACC,oBAAC,cAAD;AAAgB,MAAA,SAAS,EAAE;AAAEE,QAAAA,qBAAqB,EAAE;AAAzB;AAA3B,oBACE,oBAAC,WAAD;AACE,MAAA,GAAG,EAAC,cADN;AAEE,MAAA,IAAI,EAAC,OAFP;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,IAAI,EAAC,OAJP;AAKE,MAAA,QAAQ,EAAEV,QALZ;AAME,MAAA,OAAO,EAAE,MAAM;AACbS,QAAAA,iBAAiB,CAAC,EAAD,CAAjB;AACA,YAAI,CAACH,QAAQ,CAACK,OAAd,EAAuB;AACvBL,QAAAA,QAAQ,CAACK,OAAT,CAAiBC,KAAjB;AACD,OAVH;AAWE,oBAAYhB,MAAM,CAACiB;AAXrB,oBAaE,oBAAC,KAAD,OAbF,CADF,CAFJ,EAoBGV,KApBH,CAVJ;AAiCE,IAAA,KAAK,EAAEK,cAjCT;AAkCE,IAAA,QAAQ,EAAEC,iBAlCZ;AAmCE,IAAA,IAAI,EAAC,WAnCP;AAoCE,IAAA,QAAQ,EAAET;AApCZ,KAqCMI,IArCN;AAsCE,IAAA,GAAG,EAAEG;AAtCP,KADF;AA0CD,CAhE2B,CAA9B;AAmEAZ,WAAW,CAACmB,WAAZ,GAA0B,aAA1B;AAEA,eAAenB,WAAf","sourcesContent":["import React, { forwardRef } from 'react';\nimport { Close, Search } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport Input, { InputProps } from '../Input';\nimport Button from '../Button';\nimport defaultLocale, { InputSearchLocale } from './utils/defaultLocale';\n\nexport interface InputSearchProps\n  extends Omit<InputProps, 'type' | 'onChange'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputSearchLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst ClearButton = styled(Button)`\n  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n/**\n * The search input.\n */\nconst InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      disabled,\n      left,\n      leftHasPadding = true,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Input\n        type='text'\n        left={\n          <>\n            <Search key='search-icon' />\n            {left}\n          </>\n        }\n        leftHasPadding={leftHasPadding}\n        right={\n          <>\n            {!!forwardedValue && (\n              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>\n                <ClearButton\n                  key='clear-button'\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => {\n                    setForwardedValue('');\n                    if (!inputRef.current) return;\n                    inputRef.current.focus();\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <Close />\n                </ClearButton>\n              </ThemeOverrider>\n            )}\n            {right}\n          </>\n        }\n        value={forwardedValue}\n        onChange={setForwardedValue}\n        role='searchbox'\n        disabled={disabled}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputSearch.displayName = 'InputSearch';\n\nexport default InputSearch;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/InputSearch/index.tsx"],"names":["React","forwardRef","Search","CloseCircle","styled","keyframes","useForwardedRef","useForwardedState","ThemeOverrider","Input","Button","defaultLocale","fadeIn","ClearButton","p","theme","transitionDelay","InputSearch","locale","value","defaultValue","onChange","disabled","left","leftHasPadding","right","rest","ref","inputRef","mergedInputRef","forwardedValue","setForwardedValue","buttonIconScaleFactor","current","focus","clearLabel","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,MAAT,EAAiBC,WAAjB,QAAoC,kBAApC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,eAAT,EAA0BC,iBAA1B,QAAmD,kBAAnD;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,OAAOC,KAAP,MAAkC,UAAlC;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,aAAP,MAAiD,uBAAjD;AA0BA,MAAMC,MAAM,GAAGP,SAAU;AACzB;AACA;AACA,CAHA;AAKA,MAAMQ,WAAW,GAAGT,MAAM,CAACM,MAAD,CAAS;AACnC,eAAeE,MAAO,IAAIE,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,eAAgB;AACxD,CAFA;AAIA;AACA;AACA;;AACA,MAAMC,WAAW,gBAAGhB,UAAU,CAC5B,CACE;AACEiB,EAAAA,MAAM,GAAGP,aADX;AAEEQ,EAAAA,KAFF;AAGEC,EAAAA,YAHF;AAIEC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CAJrB;AAKEC,EAAAA,QALF;AAMEC,EAAAA,IANF;AAOEC,EAAAA,cAAc,GAAG,IAPnB;AAQEC,EAAAA,KARF;AASE,KAAGC;AATL,CADF,EAYEC,GAZF,KAaK;AACH,QAAM,CAACC,QAAD,EAAWC,cAAX,IAA6BvB,eAAe,CAACqB,GAAD,CAAlD;AACA,QAAM,CAACG,cAAD,EAAiBC,iBAAjB,IAAsCxB,iBAAiB,CAAC;AAC5DY,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,oBAAC,KAAD;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,IAAI,eACF,uDACE,oBAAC,MAAD;AAAQ,MAAA,GAAG,EAAC;AAAZ,MADF,EAEGE,IAFH,CAHJ;AAQE,IAAA,cAAc,EAAEC,cARlB;AASE,IAAA,KAAK,eACH,0CACG,CAAC,CAACM,cAAF,iBACC,oBAAC,cAAD;AAAgB,MAAA,SAAS,EAAE;AAAEE,QAAAA,qBAAqB,EAAE;AAAzB;AAA3B,oBACE,oBAAC,WAAD;AACE,MAAA,GAAG,EAAC,cADN;AAEE,MAAA,IAAI,EAAC,OAFP;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,IAAI,EAAC,OAJP;AAKE,MAAA,QAAQ,EAAEV,QALZ;AAME,MAAA,OAAO,EAAE,MAAM;AACbS,QAAAA,iBAAiB,CAAC,EAAD,CAAjB;AACA,YAAI,CAACH,QAAQ,CAACK,OAAd,EAAuB;AACvBL,QAAAA,QAAQ,CAACK,OAAT,CAAiBC,KAAjB;AACD,OAVH;AAWE,oBAAYhB,MAAM,CAACiB;AAXrB,oBAaE,oBAAC,WAAD,OAbF,CADF,CAFJ,EAoBGV,KApBH,CAVJ;AAiCE,IAAA,KAAK,EAAEK,cAjCT;AAkCE,IAAA,QAAQ,EAAEC,iBAlCZ;AAmCE,IAAA,IAAI,EAAC,WAnCP;AAoCE,IAAA,QAAQ,EAAET;AApCZ,KAqCMI,IArCN;AAsCE,IAAA,GAAG,EAAEG;AAtCP,KADF;AA0CD,CAhE2B,CAA9B;AAmEAZ,WAAW,CAACmB,WAAZ,GAA0B,aAA1B;AAEA,eAAenB,WAAf","sourcesContent":["import React, { forwardRef } from 'react';\nimport { Search, CloseCircle } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport Input, { InputProps } from '../Input';\nimport Button from '../Button';\nimport defaultLocale, { InputSearchLocale } from './utils/defaultLocale';\n\nexport interface InputSearchProps\n  extends Omit<InputProps, 'type' | 'onChange'> {\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: InputSearchLocale;\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string) => void;\n}\n\nconst fadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst ClearButton = styled(Button)`\n  animation: ${fadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n/**\n * The search input.\n */\nconst InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange = () => {},\n      disabled,\n      left,\n      leftHasPadding = true,\n      right,\n      ...rest\n    },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Input\n        type='text'\n        left={\n          <>\n            <Search key='search-icon' />\n            {left}\n          </>\n        }\n        leftHasPadding={leftHasPadding}\n        right={\n          <>\n            {!!forwardedValue && (\n              <ThemeOverrider overrides={{ buttonIconScaleFactor: 1.2 }}>\n                <ClearButton\n                  key='clear-button'\n                  type='ghost'\n                  wide='never'\n                  size='small'\n                  disabled={disabled}\n                  onClick={() => {\n                    setForwardedValue('');\n                    if (!inputRef.current) return;\n                    inputRef.current.focus();\n                  }}\n                  aria-label={locale.clearLabel}\n                >\n                  <CloseCircle />\n                </ClearButton>\n              </ThemeOverrider>\n            )}\n            {right}\n          </>\n        }\n        value={forwardedValue}\n        onChange={setForwardedValue}\n        role='searchbox'\n        disabled={disabled}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nInputSearch.displayName = 'InputSearch';\n\nexport default InputSearch;\n"],"file":"index.js"}

package/dist/esm/ListItem/index.js

@@ -46,6 +46,9 @@ const ListItem = /*#__PURE__*/forwardRef(({
   left,
   right,
   actions = [],
+  onTouchStart = () => {},
+  onTouchMove = () => {},
+  onTouchEnd = () => {},
   ...rest
 }, ref) => {
   const touchDevice = useMemo(() => isTouchDevice(), []);
@@ -53,7 +56,19 @@ const ListItem = /*#__PURE__*/forwardRef(({
     opened,
     handlers
   } = useSwipe();
-  return /*#__PURE__*/React.createElement(ListItemContainer, _extends({}, handlers, rest, {
+  return /*#__PURE__*/React.createElement(ListItemContainer, _extends({}, rest, {
+    onTouchStart: e => {
+      handlers.onTouchStart(e);
+      onTouchStart(e);
+    },
+    onTouchMove: e => {
+      handlers.onTouchMove(e);
+      onTouchMove(e);
+    },
+    onTouchEnd: e => {
+      handlers.onTouchEnd(e);
+      onTouchEnd(e);
+    },
     ref: ref
   }), /*#__PURE__*/React.createElement(ListItemContent, {
     title: title,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["React","forwardRef","useMemo","styled","horizontalPaddingStyles","isTouchDevice","useSwipe","clr","ListItemContent","ListItemContainer","div","p","theme","listItemColorBorder","ListItem","title","description","left","right","actions","rest","ref","touchDevice","opened","handlers","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,aAAT,EAAwBC,QAAxB,QAAwC,kBAAxC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,eAAP,MAAsD,mBAAtD;AAUA,OAAO,MAAMC,iBAAiB,GAAGN,MAAM,CAACO,GAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAD,IAAOJ,GAAG,CAACI,CAAC,CAACC,KAAF,CAAQC,mBAAT,CAA8B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIT,uBAAuB,EAAG;AAC9B,CA7BO;AA+BP;AACA;AACA;;AACA,MAAMU,QAAQ,gBAAGb,UAAU,CACzB,CAAC;AAAEc,EAAAA,KAAF;AAASC,EAAAA,WAAT;AAAsBC,EAAAA,IAAtB;AAA4BC,EAAAA,KAA5B;AAAmCC,EAAAA,OAAO,GAAG,EAA7C;AAAiD,KAAGC;AAApD,CAAD,EAA6DC,GAA7D,KAAqE;AACnE,QAAMC,WAAW,GAAGpB,OAAO,CAAC,MAAMG,aAAa,EAApB,EAAwB,EAAxB,CAA3B;AACA,QAAM;AAAEkB,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAuBlB,QAAQ,EAArC;AAEA,sBACE,oBAAC,iBAAD,eAAuBkB,QAAvB,EAAqCJ,IAArC;AAA2C,IAAA,GAAG,EAAEC;AAAhD,mBACE,oBAAC,eAAD;AACE,IAAA,KAAK,EAAEN,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEG,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IADF,CADF;AAaD,CAlBwB,CAA3B;AAqBAT,QAAQ,CAACW,WAAT,GAAuB,UAAvB;AAEA,eAAeX,QAAf","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'ref'\n>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  ({ title, description, left, right, actions = [], ...rest }, ref) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer {...handlers} {...rest} ref={ref}>\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/ListItem/index.tsx"],"names":["React","forwardRef","useMemo","styled","horizontalPaddingStyles","isTouchDevice","useSwipe","clr","ListItemContent","ListItemContainer","div","p","theme","listItemColorBorder","ListItem","title","description","left","right","actions","onTouchStart","onTouchMove","onTouchEnd","rest","ref","touchDevice","opened","handlers","e","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,uBAAT,QAAwC,mBAAxC;AACA,SAASC,aAAT,EAAwBC,QAAxB,QAAwC,kBAAxC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,eAAP,MAAsD,mBAAtD;AAOA,OAAO,MAAMC,iBAAiB,GAAGN,MAAM,CAACO,GAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCC,CAAD,IAAOJ,GAAG,CAACI,CAAC,CAACC,KAAF,CAAQC,mBAAT,CAA8B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIT,uBAAuB,EAAG;AAC9B,CA7BO;AA+BP;AACA;AACA;;AACA,MAAMU,QAAQ,gBAAGb,UAAU,CACzB,CACE;AACEc,EAAAA,KADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,IAHF;AAIEC,EAAAA,KAJF;AAKEC,EAAAA,OAAO,GAAG,EALZ;AAMEC,EAAAA,YAAY,GAAG,MAAM,CAAE,CANzB;AAOEC,EAAAA,WAAW,GAAG,MAAM,CAAE,CAPxB;AAQEC,EAAAA,UAAU,GAAG,MAAM,CAAE,CARvB;AASE,KAAGC;AATL,CADF,EAYEC,GAZF,KAaK;AACH,QAAMC,WAAW,GAAGvB,OAAO,CAAC,MAAMG,aAAa,EAApB,EAAwB,EAAxB,CAA3B;AACA,QAAM;AAAEqB,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAuBrB,QAAQ,EAArC;AAEA,sBACE,oBAAC,iBAAD,eACMiB,IADN;AAEE,IAAA,YAAY,EAAGK,CAAD,IAAO;AACnBD,MAAAA,QAAQ,CAACP,YAAT,CAAsBQ,CAAtB;AACAR,MAAAA,YAAY,CAACQ,CAAD,CAAZ;AACD,KALH;AAME,IAAA,WAAW,EAAGA,CAAD,IAAO;AAClBD,MAAAA,QAAQ,CAACN,WAAT,CAAqBO,CAArB;AACAP,MAAAA,WAAW,CAACO,CAAD,CAAX;AACD,KATH;AAUE,IAAA,UAAU,EAAGA,CAAD,IAAO;AACjBD,MAAAA,QAAQ,CAACL,UAAT,CAAoBM,CAApB;AACAN,MAAAA,UAAU,CAACM,CAAD,CAAV;AACD,KAbH;AAcE,IAAA,GAAG,EAAEJ;AAdP,mBAgBE,oBAAC,eAAD;AACE,IAAA,KAAK,EAAET,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEM,WANZ;AAOE,IAAA,MAAM,EAAEC;AAPV,IAhBF,CADF;AA4BD,CA9CwB,CAA3B;AAiDAZ,QAAQ,CAACe,WAAT,GAAuB,UAAvB;AAEA,eAAef,QAAf","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { horizontalPaddingStyles } from '@os-design/styles';\nimport { isTouchDevice, useSwipe } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport ListItemContent, { ListItemContentProps } from './ListItemContent';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\n\nexport type ListItemProps = JsxDivProps &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nexport const ListItemContainer = styled.div`\n  position: relative;\n  box-sizing: border-box;\n  min-height: 4em;\n  overflow: hidden;\n\n  display: flex;\n  align-items: center;\n\n  &:not(:last-of-type) {\n    border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n  }\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${horizontalPaddingStyles()};\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <ListItemContainer\n        {...rest}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </ListItemContainer>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"file":"index.js"}

package/dist/esm/ListItemLink/index.js

@@ -46,6 +46,9 @@ const ListItemLink = /*#__PURE__*/forwardRef(({
   actions = [],
   as,
   onMouseDown = () => {},
+  onTouchStart = () => {},
+  onTouchMove = () => {},
+  onTouchEnd = () => {},
   ...rest
 }, ref) => {
   const touchDevice = useMemo(() => isTouchDevice(), []);
@@ -55,12 +58,24 @@ const ListItemLink = /*#__PURE__*/forwardRef(({
   } = useSwipe();
   return /*#__PURE__*/React.createElement(StyledLink, _extends({
     touchDevice: touchDevice,
-    as: as,
+    as: as
+  }, rest, {
     onMouseDown: e => {
       onMouseDown(e);
       e.preventDefault();
-    }
-  }, handlers, rest, {
+    },
+    onTouchStart: e => {
+      handlers.onTouchStart(e);
+      onTouchStart(e);
+    },
+    onTouchMove: e => {
+      handlers.onTouchMove(e);
+      onTouchMove(e);
+    },
+    onTouchEnd: e => {
+      handlers.onTouchEnd(e);
+      onTouchEnd(e);
+    },
     ref: ref
   }), /*#__PURE__*/React.createElement(ListItemContent, {
     title: title,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["React","forwardRef","useMemo","styled","isTouchDevice","omitEmotionProps","useSwipe","clr","resetFocusStyles","css","ListItemContainer","ListItemContent","actionsBgStyles","p","touchDevice","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","withComponent","ListItemLink","title","description","left","right","actions","as","onMouseDown","rest","ref","opened","handlers","e","preventDefault","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,aAAT,EAAwBC,gBAAxB,EAA0CC,QAA1C,QAA0D,kBAA1D;AACA,SAASC,GAAT,QAA2B,oBAA3B;AACA,SAASC,gBAAT,QAAiC,mBAAjC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,iBAAT,QAAkC,aAAlC;AACA,OAAOC,eAAP,MAEO,6BAFP;;AAWA,MAAMC,eAAe,GAAIC,CAAD,IACtB,CAACA,CAAC,CAACC,WAAH,IACAL,GAAI;AACN;AACA;AACA;AACA,UAAUF,GAAG,CAAC,CAAC,GAAGM,CAAC,CAACE,KAAF,CAAQC,oBAAR,CAA6BC,KAA7B,CAAmC,CAAnC,EAAsC,CAAtC,CAAJ,EAA8C,CAA9C,CAAD,CAA4D;AACzE,UAAUV,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQC,oBAAT,CAA+B;AAC5C,YAAYH,CAAC,CAACE,KAAF,CAAQG,0BAA2B;AAC/C;AACA;AACA,GAXA;;AAgBA,MAAMC,UAAU,GAAGhB,MAAM,CACvBO,iBAAiB,CAACU,aAAlB,CAAgC,GAAhC,CADuB,EAEvBf,gBAAgB,CAAC,aAAD,EAAgB,IAAhB,CAFO,CAGN;AACnB,IAAIG,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,0BAA2BK,CAAD,IAAON,GAAG,CAACM,CAAC,CAACE,KAAF,CAAQC,oBAAT,CAA+B;AACnE;AACA;AACA;AACA,IAAIJ,eAAgB;AACpB,CAhBA;AAkBA;AACA;AACA;;AACA,MAAMS,YAAY,gBAAGpB,UAAU,CAC7B,CACE;AACEqB,EAAAA,KADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,IAHF;AAIEC,EAAAA,KAJF;AAKEC,EAAAA,OAAO,GAAG,EALZ;AAMEC,EAAAA,EANF;AAOEC,EAAAA,WAAW,GAAG,MAAM,CAAE,CAPxB;AAQE,KAAGC;AARL,CADF,EAWEC,GAXF,KAYK;AACH,QAAMhB,WAAW,GAAGZ,OAAO,CAAC,MAAME,aAAa,EAApB,EAAwB,EAAxB,CAA3B;AACA,QAAM;AAAE2B,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAuB1B,QAAQ,EAArC;AAEA,sBACE,oBAAC,UAAD;AACE,IAAA,WAAW,EAAEQ,WADf;AAEE,IAAA,EAAE,EAAEa,EAFN;AAGE,IAAA,WAAW,EAAGM,CAAD,IAAO;AAClBL,MAAAA,WAAW,CAACK,CAAD,CAAX;AACAA,MAAAA,CAAC,CAACC,cAAF;AACD;AANH,KAOMF,QAPN,EAQMH,IARN;AASE,IAAA,GAAG,EAAEC;AATP,mBAWE,oBAAC,eAAD;AACE,IAAA,KAAK,EAAER,KADT;AAEE,IAAA,WAAW,EAAEC,WAFf;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,OAAO,EAAEC,OALX;AAME,IAAA,QAAQ,EAAEZ,WANZ;AAOE,IAAA,MAAM,EAAEiB;AAPV,IAXF,CADF;AAuBD,CAxC4B,CAA/B;AA2CAV,YAAY,CAACc,WAAb,GAA2B,cAA3B;AAEA,eAAed,YAAf","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        {...handlers}\n        {...rest}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/ListItemLink/index.tsx"],"names":["React","forwardRef","useMemo","styled","isTouchDevice","omitEmotionProps","useSwipe","clr","resetFocusStyles","css","ListItemContainer","ListItemContent","actionsBgStyles","p","touchDevice","theme","listItemColorBgHover","slice","listItemActionsPaddingLeft","StyledLink","withComponent","ListItemLink","title","description","left","right","actions","as","onMouseDown","onTouchStart","onTouchMove","onTouchEnd","rest","ref","opened","handlers","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { isTouchDevice, omitEmotionProps, useSwipe } from '@os-design/utils';\nimport { clr, Color } from '@os-design/theming';\nimport { resetFocusStyles } from '@os-design/styles';\nimport { css } from '@emotion/react';\nimport { ListItemContainer } from '../ListItem';\nimport ListItemContent, {\n  ListItemContentProps,\n} from '../ListItem/ListItemContent';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport type ListItemLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;\n\nconst actionsBgStyles = (p) =>\n  !p.touchDevice &&\n  css`\n    & > nav {\n      background: linear-gradient(\n        to right,\n        ${clr([...p.theme.listItemColorBgHover.slice(0, 3), 0] as Color)},\n        ${clr(p.theme.listItemColorBgHover)}\n          ${p.theme.listItemActionsPaddingLeft}em\n      );\n    }\n  `;\n\ninterface StyledLinkProps {\n  touchDevice: boolean;\n}\nconst StyledLink = styled(\n  ListItemContainer.withComponent('a'),\n  omitEmotionProps('touchDevice', 'as')\n)<StyledLinkProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  text-decoration: none;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus-within {\n      background-color: ${(p) => clr(p.theme.listItemColorBgHover)};\n    }\n  }\n\n  ${actionsBgStyles};\n`;\n\n/**\n * The list item with a link.\n */\nconst ListItemLink = forwardRef<HTMLAnchorElement, ListItemLinkProps>(\n  (\n    {\n      title,\n      description,\n      left,\n      right,\n      actions = [],\n      as,\n      onMouseDown = () => {},\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const { opened, handlers } = useSwipe();\n\n    return (\n      <StyledLink\n        touchDevice={touchDevice}\n        as={as}\n        {...rest}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onTouchStart={(e) => {\n          handlers.onTouchStart(e);\n          onTouchStart(e);\n        }}\n        onTouchMove={(e) => {\n          handlers.onTouchMove(e);\n          onTouchMove(e);\n        }}\n        onTouchEnd={(e) => {\n          handlers.onTouchEnd(e);\n          onTouchEnd(e);\n        }}\n        ref={ref}\n      >\n        <ListItemContent\n          title={title}\n          description={description}\n          left={left}\n          right={right}\n          actions={actions}\n          hasSwipe={touchDevice}\n          opened={opened}\n        />\n      </StyledLink>\n    );\n  }\n);\n\nListItemLink.displayName = 'ListItemLink';\n\nexport default ListItemLink;\n"],"file":"index.js"}

package/dist/esm/PageHeader/index.js

@@ -78,7 +78,7 @@ const Title = styled('h1', omitEmotionProps('hasSubtitle'))`
   margin: 0;
   font-size: 1em;
   font-weight: 500;
-  line-height: 1.5;
+  line-height: 1.2;
   ${notHasSubtitleStyles};
   ${ellipsisStyles};
 `;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["React","forwardRef","useContext","ellipsisStyles","omitEmotionProps","styled","clr","ThemeOverrider","m","Left","css","Button","LayoutContext","defaultLocale","getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","leftIsGhostButton","rightIsGhostButton","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","title","subtitle","left","right","onBack","locale","rest","ref","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.5;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/PageHeader/index.tsx"],"names":["React","forwardRef","useContext","ellipsisStyles","omitEmotionProps","styled","clr","ThemeOverrider","m","Left","css","Button","LayoutContext","defaultLocale","getReducedPadding","p","isMinSm","i","padding","theme","horizontalPadding","buttonPaddingHorizontal","horizontalPaddingStyles","reducedPadding","reducedPaddingSm","leftIsGhostButton","rightIsGhostButton","min","sm","hasNavigationIndentStyles","hasNavigationIndent","md","navigationSideWidth","PageHeaderContainer","pageHeaderHeight","pageHeaderColorBg","pageHeaderColorText","pageHeaderColorBorder","BackButton","Content","div","notHasSubtitleStyles","hasSubtitle","sizes","large","Title","Subtitle","small","pageHeaderSubtitleColorText","Addon","LeftAddon","pageHeaderAddonPaddingHorizontal","RightAddon","PageHeader","title","subtitle","left","right","onBack","locale","rest","ref","hasNavigation","t","pageHeaderButtonPaddingHorizontal","backLabel","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,QAA8C,OAA9C;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,aAAP,MAA0B,yBAA1B;AACA,OAAOC,aAAP,MAAgD,uBAAhD;;AA8CA,MAAMC,iBAAiB,GAAG,CAACC,CAAD,EAAIC,OAAJ,KAAyB;AACjD,QAAMC,CAAC,GAAGD,OAAO,GAAG,CAAH,GAAO,CAAxB;AACA,MAAIE,OAAO,GAAGH,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0BH,CAA1B,IAA+BF,CAAC,CAACI,KAAF,CAAQE,uBAArD;AACA,MAAIH,OAAO,GAAG,CAAd,EAAiBA,OAAO,GAAG,CAAV;AACjB,SAAOA,OAAP;AACD,CALD;;AAOA,MAAMI,uBAAuB,GAAIP,CAAD,IAAO;AACrC,QAAMQ,cAAc,GAAGT,iBAAiB,CAACC,CAAD,EAAI,KAAJ,CAAxC;AACA,QAAMS,gBAAgB,GAAGV,iBAAiB,CAACC,CAAD,EAAI,IAAJ,CAA1C;AACA,SAAOL,GAAI;AACb,oBAAoBK,CAAC,CAACU,iBAAF,GACZF,cADY,GAEZR,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0B,CAA1B,CAA6B;AACrC,qBAAqBL,CAAC,CAACW,kBAAF,GACbH,cADa,GAEbR,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0B,CAA1B,CAA6B;AACrC;AACA,MAAMZ,CAAC,CAACmB,GAAF,CAAMC,EAAG;AACf,sBAAsBb,CAAC,CAACU,iBAAF,GACZD,gBADY,GAEZT,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0B,CAA1B,CAA6B;AACvC,uBAAuBL,CAAC,CAACW,kBAAF,GACbF,gBADa,GAEbT,CAAC,CAACI,KAAF,CAAQC,iBAAR,CAA0B,CAA1B,CAA6B;AACvC;AACA,GAhBE;AAiBD,CApBD;;AAsBA,MAAMS,yBAAyB,GAAId,CAAD,IAChCA,CAAC,CAACe,mBAAF,IACApB,GAAI;AACN,MAAMF,CAAC,CAACmB,GAAF,CAAMI,EAAG;AACf,cAAchB,CAAC,CAACI,KAAF,CAAQa,mBAAoB;AAC1C;AACA,GANA;;AAaA,OAAO,MAAMC,mBAAmB,GAAG5B,MAAM,CACvC,KADuC,EAEvCD,gBAAgB,CACd,mBADc,EAEd,oBAFc,EAGd,qBAHc,CAFuB,CAOvB;AAClB;AACA;AACA;AACA;AACA;AACA,YAAaW,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQe,gBAAR,CAAyB,CAAzB,CAA4B;AAC/C,IAAI1B,CAAC,CAACmB,GAAF,CAAMI,EAAG;AACb,cAAehB,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQe,gBAAR,CAAyB,CAAzB,CAA4B;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAuBnB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACI,KAAF,CAAQgB,iBAAT,CAA4B;AAC5D,WAAYpB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACI,KAAF,CAAQiB,mBAAT,CAA8B;AACnD,6BAA8BrB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACI,KAAF,CAAQkB,qBAAT,CAAgC;AACvE;AACA,IAAIf,uBAAwB;AAC5B,IAAIO,yBAA0B;AAC9B,CA7BO;AA+BP,MAAMS,UAAU,GAAGjC,MAAM,CAACM,MAAD,CAAS;AAClC;AACA;AACA,CAHA;AAKA,MAAM4B,OAAO,GAAGlC,MAAM,CAACmC,GAAI;AAC3B;AACA,CAFA;;AAIA,MAAMC,oBAAoB,GAAI1B,CAAD,IAC3B,CAACA,CAAC,CAAC2B,WAAH,IACAhC,GAAI;AACN,iBAAiBK,CAAC,CAACI,KAAF,CAAQwB,KAAR,CAAcC,KAAM;AACrC,GAJA;;AASA,MAAMC,KAAK,GAAGxC,MAAM,CAAC,IAAD,EAAOD,gBAAgB,CAAC,aAAD,CAAvB,CAAoD;AACxE;AACA;AACA;AACA;AACA,IAAIqC,oBAAqB;AACzB,IAAItC,cAAe;AACnB,CAPA;AASA,MAAM2C,QAAQ,GAAGzC,MAAM,CAACmC,GAAI;AAC5B,eAAgBzB,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQwB,KAAR,CAAcI,KAAM;AAC1C,WAAYhC,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACI,KAAF,CAAQ6B,2BAAT,CAAsC;AAC3D;AACA;AACA,IAAI7C,cAAe;AACnB,CANA;AAQA,MAAM8C,KAAK,GAAG5C,MAAM,CAACmC,GAAI;AACzB;AACA;AACA,CAHA;AAKA,MAAMU,SAAS,GAAG7C,MAAM,CAAC4C,KAAD,CAAQ;AAChC,mBAAoBlC,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQgC,gCAAiC;AACnE,CAFA;AAIA,MAAMC,UAAU,GAAG/C,MAAM,CAAC4C,KAAD,CAAQ;AACjC,kBAAmBlC,CAAD,IAAOA,CAAC,CAACI,KAAF,CAAQgC,gCAAiC;AAClE;AACA;AACA;AACA;AACA;AACA,CAPA;AASA;AACA;AACA;;AACA,MAAME,UAAU,gBAAGpD,UAAU,CAC3B,CACE;AACEqD,EAAAA,KADF;AAEEC,EAAAA,QAFF;AAGEC,EAAAA,IAHF;AAIE/B,EAAAA,iBAAiB,GAAG,KAJtB;AAKEgC,EAAAA,KALF;AAME/B,EAAAA,kBAAkB,GAAG,KANvB;AAOEgC,EAAAA,MAPF;AAQEC,EAAAA,MAAM,GAAG9C,aARX;AASE,KAAG+C;AATL,CADF,EAYEC,GAZF,KAaK;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAoB5D,UAAU,CAACU,aAAD,CAApC;AAEA,sBACE,oBAAC,cAAD;AACE,IAAA,SAAS,EAAGmD,CAAD,KAAQ;AACjB1C,MAAAA,uBAAuB,EAAE0C,CAAC,CAACC;AADV,KAAR;AADb,kBAKE,oBAAC,mBAAD;AACE,IAAA,iBAAiB,EAAEvC,iBAAiB,IAAI,CAAC,CAACiC,MAD5C;AAEE,IAAA,kBAAkB,EAAEhC,kBAFtB;AAGE,IAAA,mBAAmB,EAAEoC;AAHvB,KAIMF,IAJN;AAKE,IAAA,GAAG,EAAEC;AALP,MAOGH,MAAM,iBACL,oBAAC,UAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,OAAO,EAAEA,MAHX;AAIE,kBAAYC,MAAM,CAACM;AAJrB,kBAME,oBAAC,IAAD,OANF,CARJ,EAkBGT,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CAlBX,eAoBE,oBAAC,OAAD,qBACE,oBAAC,KAAD;AAAO,IAAA,WAAW,EAAE,CAAC,CAACD;AAAtB,KAAiCD,KAAjC,CADF,EAEGC,QAAQ,iBAAI,oBAAC,QAAD,QAAWA,QAAX,CAFf,CApBF,EAyBGE,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAzBZ,CALF,CADF;AAmCD,CApD0B,CAA7B;AAuDAJ,UAAU,CAACa,WAAX,GAAyB,YAAzB;AAEA,eAAeb,UAAf","sourcesContent":["import React, { forwardRef, useContext } from 'react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport { Left } from '@os-design/icons';\nimport { css } from '@emotion/react';\nimport Button from '../Button';\nimport LayoutContext from '../Layout/LayoutContext';\nimport defaultLocale, { PageHeaderLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface PageHeaderProps extends JsxDivProps {\n  /**\n   * The title of the page.\n   * @default undefined\n   */\n  title: string;\n  /**\n   * The subtitle of the page.\n   * @default undefined\n   */\n  subtitle?: string;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Reduces the left padding of the page header.\n   * @default false\n   */\n  leftIsGhostButton?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Reduces the right padding of the page header.\n   * @default false\n   */\n  rightIsGhostButton?: boolean;\n  /**\n   * The back event handler. If passed, the page header has the back button.\n   * @default undefined\n   */\n  onBack?: () => void;\n  /**\n   * The locale.\n   * @default undefined\n   */\n  locale?: PageHeaderLocale;\n}\n\nconst getReducedPadding = (p, isMinSm: boolean) => {\n  const i = isMinSm ? 1 : 0;\n  let padding = p.theme.horizontalPadding[i] - p.theme.buttonPaddingHorizontal;\n  if (padding < 0) padding = 0;\n  return padding;\n};\n\nconst horizontalPaddingStyles = (p) => {\n  const reducedPadding = getReducedPadding(p, false);\n  const reducedPaddingSm = getReducedPadding(p, true);\n  return css`\n    padding-left: ${p.leftIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n    padding-right: ${p.rightIsGhostButton\n      ? reducedPadding\n      : p.theme.horizontalPadding[0]}em;\n\n    ${m.min.sm} {\n      padding-left: ${p.leftIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n      padding-right: ${p.rightIsGhostButton\n        ? reducedPaddingSm\n        : p.theme.horizontalPadding[1]}em;\n    }\n  `;\n};\n\nconst hasNavigationIndentStyles = (p) =>\n  p.hasNavigationIndent &&\n  css`\n    ${m.min.md} {\n      left: ${p.theme.navigationSideWidth}em;\n    }\n  `;\n\ninterface ContainerProps {\n  leftIsGhostButton?: boolean;\n  rightIsGhostButton?: boolean;\n  hasNavigationIndent?: boolean;\n}\nexport const PageHeaderContainer = styled(\n  'div',\n  omitEmotionProps(\n    'leftIsGhostButton',\n    'rightIsGhostButton',\n    'hasNavigationIndent'\n  )\n)<ContainerProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n\n  height: ${(p) => p.theme.pageHeaderHeight[0]}em;\n  ${m.min.md} {\n    height: ${(p) => p.theme.pageHeaderHeight[1]}em;\n  }\n\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  z-index: 101;\n\n  background-color: ${(p) => clr(p.theme.pageHeaderColorBg)};\n  color: ${(p) => clr(p.theme.pageHeaderColorText)};\n  border-bottom: 1px solid ${(p) => clr(p.theme.pageHeaderColorBorder)};\n\n  ${horizontalPaddingStyles};\n  ${hasNavigationIndentStyles};\n`;\n\nconst BackButton = styled(Button)`\n  margin-right: 0.2em;\n  flex-shrink: 0;\n`;\n\nconst Content = styled.div`\n  overflow: hidden; // For ellipsis\n`;\n\nconst notHasSubtitleStyles = (p) =>\n  !p.hasSubtitle &&\n  css`\n    font-size: ${p.theme.sizes.large}em;\n  `;\n\ninterface TitleProps {\n  hasSubtitle: boolean;\n}\nconst Title = styled('h1', omitEmotionProps('hasSubtitle'))<TitleProps>`\n  margin: 0;\n  font-size: 1em;\n  font-weight: 500;\n  line-height: 1.2;\n  ${notHasSubtitleStyles};\n  ${ellipsisStyles};\n`;\n\nconst Subtitle = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.pageHeaderSubtitleColorText)};\n  line-height: 1;\n  margin-top: 0.2em;\n  ${ellipsisStyles};\n`;\n\nconst Addon = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst LeftAddon = styled(Addon)`\n  padding-right: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled(Addon)`\n  padding-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n  margin-left: auto;\n\n  display: grid;\n  grid-auto-flow: column;\n  grid-column-gap: 0.4em;\n`;\n\n/**\n * The header of the page.\n */\nconst PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      title,\n      subtitle,\n      left,\n      leftIsGhostButton = false,\n      right,\n      rightIsGhostButton = false,\n      onBack,\n      locale = defaultLocale,\n      ...rest\n    },\n    ref\n  ) => {\n    const { hasNavigation } = useContext(LayoutContext);\n\n    return (\n      <ThemeOverrider\n        overrides={(t) => ({\n          buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n        })}\n      >\n        <PageHeaderContainer\n          leftIsGhostButton={leftIsGhostButton || !!onBack}\n          rightIsGhostButton={rightIsGhostButton}\n          hasNavigationIndent={hasNavigation}\n          {...rest}\n          ref={ref}\n        >\n          {onBack && (\n            <BackButton\n              type='ghost'\n              wide='never'\n              onClick={onBack}\n              aria-label={locale.backLabel}\n            >\n              <Left />\n            </BackButton>\n          )}\n\n          {left && <LeftAddon>{left}</LeftAddon>}\n\n          <Content>\n            <Title hasSubtitle={!!subtitle}>{title}</Title>\n            {subtitle && <Subtitle>{subtitle}</Subtitle>}\n          </Content>\n\n          {right && <RightAddon>{right}</RightAddon>}\n        </PageHeaderContainer>\n      </ThemeOverrider>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n\nexport default PageHeader;\n"],"file":"index.js"}

package/dist/types/ListItem/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ListItemContentProps } from './ListItemContent';
-declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'ref'>;
+declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export declare type ListItemProps = JsxDivProps & Omit<ListItemContentProps, 'hasSwipe' | 'opened'>;
 export declare const ListItemContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: "symbol" | "object" | "div" | "slot" | "style" | "title" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare const ListItem: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<ListItemContentProps, "title" | "left" | "right" | "description" | "actions"> & React.RefAttributes<HTMLDivElement>>;
+declare const ListItem: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<ListItemContentProps, "title" | "left" | "right" | "description" | "actions"> & React.RefAttributes<HTMLDivElement>>;
 export default ListItem;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,KAAK,CACtD,CAAC;AAEF,oBAAY,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;;qFA6B7B,CAAC;AAKF,QAAA,MAAM,QAAQ,urJAmBb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAE7D,oBAAY,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;;qFA6B7B,CAAC;AAKF,QAAA,MAAM,QAAQ,uuJA+Cb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemLink/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAwB,EACtB,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE1D,aAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,oBAAY,iBAAiB,GAAG,SAAS,GACvC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAuCpD,QAAA,MAAM,YAAY,04JAyCjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemLink/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAwB,EACtB,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE1D,aAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,oBAAY,iBAAiB,GAAG,SAAS,GACvC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAC;AAuCpD,QAAA,MAAM,YAAY,04JAuDjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.112",
+  "version": "1.0.116",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -39,7 +39,7 @@
     "@os-design/utils": "^1.0.43",
     "@os-team/password-score": "^1.0.3",
     "facepaint": "^1.2.1",
-    "react-focus-lock": "^2.7.1",
+    "react-focus-lock": "^2.8.1",
     "react-window": "^1.8.6"
   },
   "devDependencies": {
@@ -53,8 +53,8 @@
     "@emotion/react": ">=11",
     "@emotion/serialize": "*",
     "@emotion/styled": ">=11",
-    "react": "0.0.0-experimental-aa8f2bdbc-20211215",
-    "react-dom": "0.0.0-experimental-aa8f2bdbc-20211215"
+    "react": "0.0.0-experimental-27b569969-20220211",
+    "react-dom": "0.0.0-experimental-27b569969-20220211"
   },
-  "gitHead": "b4fd6243979ee7878656fb4097aed92478dec9dc"
+  "gitHead": "39f12921c3709136b89222ea9b58c756a655b064"
 }