@os-design/core 1.0.156 → 1.0.157

package/dist/esm/Breadcrumb/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { enableScrollingStyles, sizeStyles } from '@os-design/styles';
@@ -18,12 +17,12 @@ const Container = styled('ol', omitEmotionProps('size'))`
   ${sizeStyles};
 `;
 let childIndex = 0;
+
 /**
  * Displays the current location within the hierarchical structure.
  * Implements the Schema.org markup for breadcrumbs.
  * See https://schema.org/BreadcrumbList
  */
-
 const Breadcrumb = /*#__PURE__*/forwardRef(({
   'aria-label': ariaLabel = 'Breadcrumb',
   children,
@@ -40,16 +39,15 @@ const Breadcrumb = /*#__PURE__*/forwardRef(({
         position: index + 1,
         hasRightArrow: index < childrenArray.length - 1
       };
-
       if (child.type === BreadcrumbItem) {
         element = /*#__PURE__*/React.cloneElement(child, breadcrumbItemProps);
       } else if ( /*#__PURE__*/React.isValidElement(child.props.children) && child.props.children.type === BreadcrumbItem) {
         const breadcrumbItem = /*#__PURE__*/React.cloneElement(child.props.children, breadcrumbItemProps);
-        element = /*#__PURE__*/React.cloneElement(child, { ...(child.props || {}),
+        element = /*#__PURE__*/React.cloneElement(child, {
+          ...(child.props || {}),
           key: childIndex
         }, breadcrumbItem);
       }
-
       if (!element) return;
       items.push(element);
       childIndex += 1;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","enableScrollingStyles","sizeStyles","omitEmotionProps","clr","BreadcrumbItem","Container","p","theme","colorText","childIndex","Breadcrumb","ariaLabel","children","rest","ref","breadcrumbItems","items","childrenArray","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","cloneElement","props","breadcrumbItem","push","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n  'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${enableScrollingStyles('x', false)};\n  ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n  ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n    const breadcrumbItems = useMemo(() => {\n      const items: ReactElement[] = [];\n      const childrenArray = React.Children.toArray(children);\n      childrenArray.forEach((child, index) => {\n        if (!React.isValidElement(child)) return;\n\n        let element;\n        const breadcrumbItemProps = {\n          key: childIndex,\n          position: index + 1,\n          hasRightArrow: index < childrenArray.length - 1,\n        };\n\n        if (child.type === BreadcrumbItem) {\n          element = React.cloneElement(child, breadcrumbItemProps);\n        } else if (\n          React.isValidElement(child.props.children) &&\n          child.props.children.type === BreadcrumbItem\n        ) {\n          const breadcrumbItem = React.cloneElement(\n            child.props.children,\n            breadcrumbItemProps\n          );\n          element = React.cloneElement(\n            child,\n            {\n              ...(child.props || {}),\n              key: childIndex,\n            },\n            breadcrumbItem\n          );\n        }\n        if (!element) return;\n\n        items.push(element);\n        childIndex += 1;\n      });\n      return items;\n    }, [children]);\n\n    if (breadcrumbItems.length === 0) return null;\n\n    return (\n      <nav aria-label={ariaLabel}>\n        <Container\n          itemScope\n          itemType='https://schema.org/BreadcrumbList'\n          {...rest}\n          ref={ref}\n        >\n          {breadcrumbItems}\n        </Container>\n      </nav>\n    );\n  }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA0CC,OAA1C,QAAyD,OAAzD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,qBAAT,EAAgCC,UAAhC,QAA4D,mBAA5D;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AAOA,MAAMC,SAAS,GAAGN,MAAM,CAAC,IAAD,EAAOG,gBAAgB,CAAC,MAAD,CAAvB,CAA2C;AACnE;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQC,SAAT,CAAoB;AACzC;AACA,IAAIR,qBAAqB,CAAC,GAAD,EAAM,KAAN,CAAa;AACtC,IAAIC,UAAW;AACf,CAVA;AAYA,IAAIQ,UAAU,GAAG,CAAjB;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,UAAU,gBAAGb,UAAU,CAC3B,CAAC;EAAE,cAAcc,SAAS,GAAG,YAA5B;EAA0CC,QAA1C;EAAoD,GAAGC;AAAvD,CAAD,EAAgEC,GAAhE,KAAwE;EACtE,MAAMC,eAAe,GAAGjB,OAAO,CAAC,MAAM;IACpC,MAAMkB,KAAqB,GAAG,EAA9B;IACA,MAAMC,aAAa,GAAGrB,KAAK,CAACsB,QAAN,CAAeC,OAAf,CAAuBP,QAAvB,CAAtB;IACAK,aAAa,CAACG,OAAd,CAAsB,CAACC,KAAD,EAAQC,KAAR,KAAkB;MACtC,IAAI,eAAC1B,KAAK,CAAC2B,cAAN,CAAqBF,KAArB,CAAL,EAAkC;MAElC,IAAIG,OAAJ;MACA,MAAMC,mBAAmB,GAAG;QAC1BC,GAAG,EAAEjB,UADqB;QAE1BkB,QAAQ,EAAEL,KAAK,GAAG,CAFQ;QAG1BM,aAAa,EAAEN,KAAK,GAAGL,aAAa,CAACY,MAAd,GAAuB;MAHpB,CAA5B;;MAMA,IAAIR,KAAK,CAACS,IAAN,KAAe1B,cAAnB,EAAmC;QACjCoB,OAAO,gBAAG5B,KAAK,CAACmC,YAAN,CAAmBV,KAAnB,EAA0BI,mBAA1B,CAAV;MACD,CAFD,MAEO,IACL,cAAA7B,KAAK,CAAC2B,cAAN,CAAqBF,KAAK,CAACW,KAAN,CAAYpB,QAAjC,KACAS,KAAK,CAACW,KAAN,CAAYpB,QAAZ,CAAqBkB,IAArB,KAA8B1B,cAFzB,EAGL;QACA,MAAM6B,cAAc,gBAAGrC,KAAK,CAACmC,YAAN,CACrBV,KAAK,CAACW,KAAN,CAAYpB,QADS,EAErBa,mBAFqB,CAAvB;QAIAD,OAAO,gBAAG5B,KAAK,CAACmC,YAAN,CACRV,KADQ,EAER,EACE,IAAIA,KAAK,CAACW,KAAN,IAAe,EAAnB,CADF;UAEEN,GAAG,EAAEjB;QAFP,CAFQ,EAMRwB,cANQ,CAAV;MAQD;;MACD,IAAI,CAACT,OAAL,EAAc;MAEdR,KAAK,CAACkB,IAAN,CAAWV,OAAX;MACAf,UAAU,IAAI,CAAd;IACD,CAjCD;IAkCA,OAAOO,KAAP;EACD,CAtC8B,EAsC5B,CAACJ,QAAD,CAtC4B,CAA/B;EAwCA,IAAIG,eAAe,CAACc,MAAhB,KAA2B,CAA/B,EAAkC,OAAO,IAAP;EAElC,oBACE;IAAK,cAAYlB;EAAjB,gBACE,oBAAC,SAAD;IACE,SAAS,MADX;IAEE,QAAQ,EAAC;EAFX,GAGME,IAHN;IAIE,GAAG,EAAEC;EAJP,IAMGC,eANH,CADF,CADF;AAYD,CAxD0B,CAA7B;AA2DAL,UAAU,CAACyB,WAAX,GAAyB,YAAzB;AAEA,eAAezB,UAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","enableScrollingStyles","sizeStyles","omitEmotionProps","clr","BreadcrumbItem","Container","p","theme","colorText","childIndex","Breadcrumb","ariaLabel","children","rest","ref","breadcrumbItems","items","childrenArray","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","cloneElement","props","breadcrumbItem","push","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n  'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${enableScrollingStyles('x', false)};\n  ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n  ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n    const breadcrumbItems = useMemo(() => {\n      const items: ReactElement[] = [];\n      const childrenArray = React.Children.toArray(children);\n      childrenArray.forEach((child, index) => {\n        if (!React.isValidElement(child)) return;\n\n        let element;\n        const breadcrumbItemProps = {\n          key: childIndex,\n          position: index + 1,\n          hasRightArrow: index < childrenArray.length - 1,\n        };\n\n        if (child.type === BreadcrumbItem) {\n          element = React.cloneElement(child, breadcrumbItemProps);\n        } else if (\n          React.isValidElement(child.props.children) &&\n          child.props.children.type === BreadcrumbItem\n        ) {\n          const breadcrumbItem = React.cloneElement(\n            child.props.children,\n            breadcrumbItemProps\n          );\n          element = React.cloneElement(\n            child,\n            {\n              ...(child.props || {}),\n              key: childIndex,\n            },\n            breadcrumbItem\n          );\n        }\n        if (!element) return;\n\n        items.push(element);\n        childIndex += 1;\n      });\n      return items;\n    }, [children]);\n\n    if (breadcrumbItems.length === 0) return null;\n\n    return (\n      <nav aria-label={ariaLabel}>\n        <Container\n          itemScope\n          itemType='https://schema.org/BreadcrumbList'\n          {...rest}\n          ref={ref}\n        >\n          {breadcrumbItems}\n        </Container>\n      </nav>\n    );\n  }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAgBC,OAAO,QAAQ,OAAO;AAChE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,qBAAqB,EAAEC,UAAU,QAAkB,mBAAmB;AAC/E,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,cAAc,MAAM,mBAAmB;AAO9C,MAAMC,SAAS,GAAGN,MAAM,CAAC,IAAI,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACnE;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AACzC;AACA,IAAIR,qBAAqB,CAAC,GAAG,EAAE,KAAK,CAAE;AACtC,IAAIC,UAAW;AACf,CAAC;AAED,IAAIQ,UAAU,GAAG,CAAC;;AAElB;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,gBAAGb,UAAU,CAC3B,CAAC;EAAE,YAAY,EAAEc,SAAS,GAAG,YAAY;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EACtE,MAAMC,eAAe,GAAGjB,OAAO,CAAC,MAAM;IACpC,MAAMkB,KAAqB,GAAG,EAAE;IAChC,MAAMC,aAAa,GAAGrB,KAAK,CAACsB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC;IACtDK,aAAa,CAACG,OAAO,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;MACtC,IAAI,eAAC1B,KAAK,CAAC2B,cAAc,CAACF,KAAK,CAAC,EAAE;MAElC,IAAIG,OAAO;MACX,MAAMC,mBAAmB,GAAG;QAC1BC,GAAG,EAAEjB,UAAU;QACfkB,QAAQ,EAAEL,KAAK,GAAG,CAAC;QACnBM,aAAa,EAAEN,KAAK,GAAGL,aAAa,CAACY,MAAM,GAAG;MAChD,CAAC;MAED,IAAIR,KAAK,CAACS,IAAI,KAAK1B,cAAc,EAAE;QACjCoB,OAAO,gBAAG5B,KAAK,CAACmC,YAAY,CAACV,KAAK,EAAEI,mBAAmB,CAAC;MAC1D,CAAC,MAAM,IACL,cAAA7B,KAAK,CAAC2B,cAAc,CAACF,KAAK,CAACW,KAAK,CAACpB,QAAQ,CAAC,IAC1CS,KAAK,CAACW,KAAK,CAACpB,QAAQ,CAACkB,IAAI,KAAK1B,cAAc,EAC5C;QACA,MAAM6B,cAAc,gBAAGrC,KAAK,CAACmC,YAAY,CACvCV,KAAK,CAACW,KAAK,CAACpB,QAAQ,EACpBa,mBAAmB,CACpB;QACDD,OAAO,gBAAG5B,KAAK,CAACmC,YAAY,CAC1BV,KAAK,EACL;UACE,IAAIA,KAAK,CAACW,KAAK,IAAI,CAAC,CAAC,CAAC;UACtBN,GAAG,EAAEjB;QACP,CAAC,EACDwB,cAAc,CACf;MACH;MACA,IAAI,CAACT,OAAO,EAAE;MAEdR,KAAK,CAACkB,IAAI,CAACV,OAAO,CAAC;MACnBf,UAAU,IAAI,CAAC;IACjB,CAAC,CAAC;IACF,OAAOO,KAAK;EACd,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,IAAIG,eAAe,CAACc,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAE7C,oBACE;IAAK,cAAYlB;EAAU,gBACzB,oBAAC,SAAS;IACR,SAAS;IACT,QAAQ,EAAC;EAAmC,GACxCE,IAAI;IACR,GAAG,EAAEC;EAAI,IAERC,eAAe,CACN,CACR;AAEV,CAAC,CACF;AAEDL,UAAU,CAACyB,WAAW,GAAG,YAAY;AAErC,eAAezB,UAAU"}

package/dist/esm/BreadcrumbItem/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { ellipsisStyles } from '@os-design/styles';
@@ -19,10 +18,10 @@ const RightIcon = styled(Right)`
   font-size: 0.6em;
   opacity: 0.8;
 `;
+
 /**
  * The item of the breadcrumb.
  */
-
 const BreadcrumbItem = /*#__PURE__*/forwardRef(({
   currentPage = false,
   hasRightArrow = false,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","ellipsisStyles","Right","clr","Link","Container","li","Name","span","RightIcon","p","theme","colorText","BreadcrumbItem","currentPage","hasRightArrow","position","href","children","rest","ref","underline","toString","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n  /**\n   * Whether the right arrow located to the right of the text is visible.\n   * @default false\n   */\n  hasRightArrow?: boolean;\n  /**\n   * The position of the breadcrumb item.\n   * @default undefined\n   */\n  position?: number;\n}\n\nconst Container = styled.li`\n  list-style: none;\n`;\n\nconst Name = styled.span`\n  max-width: 20em;\n  ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin: 0 0.6em;\n  font-size: 0.6em;\n  opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n  (\n    {\n      currentPage = false,\n      hasRightArrow = false,\n      position,\n      href,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <Container>\n      <Link\n        itemProp='itemListElement'\n        itemScope\n        itemType='https://schema.org/ListItem'\n        href={href}\n        {...(currentPage\n          ? {\n              underline: 'always',\n              'aria-current': 'page',\n            }\n          : {})}\n        {...rest}\n        ref={ref}\n      >\n        <link itemProp='item' href={href} />\n        {position && <meta itemProp='position' content={position.toString()} />}\n        <Name itemProp='name'>{children}</Name>\n      </Link>\n      {hasRightArrow && <RightIcon role='presentation' />}\n    </Container>\n  )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,IAAP,MAAgC,SAAhC;AAoBA,MAAMC,SAAS,GAAGL,MAAM,CAACM,EAAG;AAC5B;AACA,CAFA;AAIA,MAAMC,IAAI,GAAGP,MAAM,CAACQ,IAAK;AACzB;AACA,IAAIP,cAAe;AACnB,CAHA;AAKA,MAAMQ,SAAS,GAAGT,MAAM,CAACE,KAAD,CAAQ;AAChC,WAAYQ,CAAD,IAAOP,GAAG,CAACO,CAAC,CAACC,KAAF,CAAQC,SAAT,CAAoB;AACzC;AACA;AACA;AACA,CALA;AAOA;AACA;AACA;;AACA,MAAMC,cAAc,gBAAGd,UAAU,CAC/B,CACE;EACEe,WAAW,GAAG,KADhB;EAEEC,aAAa,GAAG,KAFlB;EAGEC,QAHF;EAIEC,IAJF;EAKEC,QALF;EAME,GAAGC;AANL,CADF,EASEC,GATF,kBAWE,oBAAC,SAAD,qBACE,oBAAC,IAAD;EACE,QAAQ,EAAC,iBADX;EAEE,SAAS,MAFX;EAGE,QAAQ,EAAC,6BAHX;EAIE,IAAI,EAAEH;AAJR,GAKOH,WAAW,GACZ;EACEO,SAAS,EAAE,QADb;EAEE,gBAAgB;AAFlB,CADY,GAKZ,EAVN,EAWMF,IAXN;EAYE,GAAG,EAAEC;AAZP,iBAcE;EAAM,QAAQ,EAAC,MAAf;EAAsB,IAAI,EAAEH;AAA5B,EAdF,EAeGD,QAAQ,iBAAI;EAAM,QAAQ,EAAC,UAAf;EAA0B,OAAO,EAAEA,QAAQ,CAACM,QAAT;AAAnC,EAff,eAgBE,oBAAC,IAAD;EAAM,QAAQ,EAAC;AAAf,GAAuBJ,QAAvB,CAhBF,CADF,EAmBGH,aAAa,iBAAI,oBAAC,SAAD;EAAW,IAAI,EAAC;AAAhB,EAnBpB,CAZ6B,CAAjC;AAoCAF,cAAc,CAACU,WAAf,GAA6B,gBAA7B;AAEA,eAAeV,cAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","ellipsisStyles","Right","clr","Link","Container","li","Name","span","RightIcon","p","theme","colorText","BreadcrumbItem","currentPage","hasRightArrow","position","href","children","rest","ref","underline","toString","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n  /**\n   * Whether the right arrow located to the right of the text is visible.\n   * @default false\n   */\n  hasRightArrow?: boolean;\n  /**\n   * The position of the breadcrumb item.\n   * @default undefined\n   */\n  position?: number;\n}\n\nconst Container = styled.li`\n  list-style: none;\n`;\n\nconst Name = styled.span`\n  max-width: 20em;\n  ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin: 0 0.6em;\n  font-size: 0.6em;\n  opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n  (\n    {\n      currentPage = false,\n      hasRightArrow = false,\n      position,\n      href,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <Container>\n      <Link\n        itemProp='itemListElement'\n        itemScope\n        itemType='https://schema.org/ListItem'\n        href={href}\n        {...(currentPage\n          ? {\n              underline: 'always',\n              'aria-current': 'page',\n            }\n          : {})}\n        {...rest}\n        ref={ref}\n      >\n        <link itemProp='item' href={href} />\n        {position && <meta itemProp='position' content={position.toString()} />}\n        <Name itemProp='name'>{children}</Name>\n      </Link>\n      {hasRightArrow && <RightIcon role='presentation' />}\n    </Container>\n  )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,IAAI,MAAqB,SAAS;AAoBzC,MAAMC,SAAS,GAAGL,MAAM,CAACM,EAAG;AAC5B;AACA,CAAC;AAED,MAAMC,IAAI,GAAGP,MAAM,CAACQ,IAAK;AACzB;AACA,IAAIP,cAAe;AACnB,CAAC;AAED,MAAMQ,SAAS,GAAGT,MAAM,CAACE,KAAK,CAAE;AAChC,WAAYQ,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AACzC;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,cAAc,gBAAGd,UAAU,CAC/B,CACE;EACEe,WAAW,GAAG,KAAK;EACnBC,aAAa,GAAG,KAAK;EACrBC,QAAQ;EACRC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,kBAEH,oBAAC,SAAS,qBACR,oBAAC,IAAI;EACH,QAAQ,EAAC,iBAAiB;EAC1B,SAAS;EACT,QAAQ,EAAC,6BAA6B;EACtC,IAAI,EAAEH;AAAK,GACNH,WAAW,GACZ;EACEO,SAAS,EAAE,QAAQ;EACnB,cAAc,EAAE;AAClB,CAAC,GACD,CAAC,CAAC,EACFF,IAAI;EACR,GAAG,EAAEC;AAAI,iBAET;EAAM,QAAQ,EAAC,MAAM;EAAC,IAAI,EAAEH;AAAK,EAAG,EACnCD,QAAQ,iBAAI;EAAM,QAAQ,EAAC,UAAU;EAAC,OAAO,EAAEA,QAAQ,CAACM,QAAQ;AAAG,EAAG,eACvE,oBAAC,IAAI;EAAC,QAAQ,EAAC;AAAM,GAAEJ,QAAQ,CAAQ,CAClC,EACNH,aAAa,iBAAI,oBAAC,SAAS;EAAC,IAAI,EAAC;AAAc,EAAG,CAEtD,CACF;AAEDF,cAAc,CAACU,WAAW,GAAG,gBAAgB;AAE7C,eAAeV,cAAc"}

package/dist/esm/Button/ButtonContent.js

@@ -42,8 +42,9 @@ const LoadingContainer = styled('div', omitEmotionProps('colors'))`
   color: ${p => clr(p.colors.text)};
   background-color: ${p => clr(p.colors.bg)};
   animation: ${loadingFadeIn} ${p => p.theme.transitionDelay}ms;
-`; // Used by Button, LinkButton
+`;
 
+// Used by Button, LinkButton
 const ButtonContent = ({
   left,
   right,
@@ -53,6 +54,5 @@ const ButtonContent = ({
 }) => /*#__PURE__*/React.createElement(React.Fragment, null, left && /*#__PURE__*/React.createElement(LeftAddon, null, left), /*#__PURE__*/React.createElement(Content, null, children), right && /*#__PURE__*/React.createElement(RightAddon, null, right), loading && /*#__PURE__*/React.createElement(LoadingContainer, {
   colors: loadingColors
 }, /*#__PURE__*/React.createElement(LoadingIcon, null)));
-
 export default ButtonContent;
 //# sourceMappingURL=ButtonContent.js.map

package/dist/esm/Button/ButtonContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.js","names":["React","Loading","styled","keyframes","omitEmotionProps","clr","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n  children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAWA,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,mBAAoBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC/D,CAHA;AAKA,MAAMC,UAAU,GAAGT,MAAM,CAACK,GAAI;AAC9B;AACA,kBAAmBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC9D,CAHA;AAKA,MAAME,OAAO,GAAGV,MAAM,CAACW,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAsB;AAC5D;AACA;AACA,CAPA;AASA,MAAMC,WAAW,GAAGb,MAAM,CAACD,OAAD,CAAU;AACpC;AACA,CAFA;AAIA,MAAMe,aAAa,GAAGb,SAAU;AAChC;AACA;AACA,CAHA;AAQA,MAAMc,gBAAgB,GAAGf,MAAM,CAC7B,KAD6B,EAE7BE,gBAAgB,CAAC,QAAD,CAFa,CAGN;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASC,IAAV,CAAgB;AACrC,sBAAuBX,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASE,EAAV,CAAc;AAC9C,eAAeJ,aAAc,IAAIR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQY,eAAgB;AAC/D,CAlBA,C,CAoBA;;AACA,MAAMC,aAA2C,GAAG,CAAC;EACnDC,IADmD;EAEnDC,KAFmD;EAGnDC,OAAO,GAAG,KAHyC;EAInDC,aAJmD;EAKnDC;AALmD,CAAD,kBAOlD,0CACGJ,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,oBAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,oBAAC,gBAAD;EAAkB,MAAM,EAAEC;AAA1B,gBACE,oBAAC,WAAD,OADF,CALJ,CAPF;;AAmBA,eAAeJ,aAAf"}
+{"version":3,"file":"ButtonContent.js","names":["React","Loading","styled","keyframes","omitEmotionProps","clr","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n  children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AAWxC,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,mBAAoBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC/D,CAAC;AAED,MAAMC,UAAU,GAAGT,MAAM,CAACK,GAAI;AAC9B;AACA,kBAAmBC,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,4BAA6B;AAC9D,CAAC;AAED,MAAME,OAAO,GAAGV,MAAM,CAACW,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,qBAAsB;AAC5D;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGb,MAAM,CAACD,OAAO,CAAE;AACpC;AACA,CAAC;AAED,MAAMe,aAAa,GAAGb,SAAU;AAChC;AACA;AACA,CAAC;AAKD,MAAMc,gBAAgB,GAAGf,MAAM,CAC7B,KAAK,EACLE,gBAAgB,CAAC,QAAQ,CAAC,CACH;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACU,MAAM,CAACC,IAAI,CAAE;AACrC,sBAAuBX,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACU,MAAM,CAACE,EAAE,CAAE;AAC9C,eAAeJ,aAAc,IAAIR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACY,eAAgB;AAC/D,CAAC;;AAED;AACA,MAAMC,aAA2C,GAAG,CAAC;EACnDC,IAAI;EACJC,KAAK;EACLC,OAAO,GAAG,KAAK;EACfC,aAAa;EACbC;AACF,CAAC,kBACC,0CACGJ,IAAI,iBAAI,oBAAC,SAAS,QAAEA,IAAI,CAAa,eACtC,oBAAC,OAAO,QAAEI,QAAQ,CAAW,EAC5BH,KAAK,iBAAI,oBAAC,UAAU,QAAEA,KAAK,CAAc,EACzCC,OAAO,iBACN,oBAAC,gBAAgB;EAAC,MAAM,EAAEC;AAAc,gBACtC,oBAAC,WAAW,OAAG,CAElB,CAEJ;AAED,eAAeJ,aAAa"}

package/dist/esm/Button/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { resetButtonStyles, sizeStyles, transitionStyles } from '@os-design/styles';
@@ -9,7 +8,6 @@ import { css } from '@emotion/react';
 import { m } from '@os-design/media';
 import useButtonColors from './utils/useButtonColors';
 import ButtonContent from './ButtonContent';
-
 const hoverStyles = p => !p.disabled && css`
     @media (hover: hover) {
       &:hover,
@@ -18,40 +16,33 @@ const hoverStyles = p => !p.disabled && css`
       }
     }
   `;
-
 const primaryStyles = p => p.btnType === 'primary' && css`
     color: ${clr(p.colors.text)};
     background-color: ${clr(p.colors.bg)};
     ${hoverStyles(p)};
   `;
-
 const ghostStyles = p => p.btnType === 'ghost' && css`
     color: ${clr(p.colors.text)};
     background-color: transparent;
     ${hoverStyles(p)};
   `;
-
 const outlineStyles = p => p.btnType === 'outline' && css`
     color: ${clr(p.colors.text)};
     background-color: transparent;
     border: 1px solid currentColor;
     ${hoverStyles(p)};
   `;
-
 const wideDefaultStyles = p => p.wide === 'default' && css`
     ${m.max.xxs} {
       width: 100%;
     }
   `;
-
 const wideAlwaysStyles = p => p.wide === 'always' && css`
     width: 100%;
   `;
-
 const disabledStyles = p => p.disabled && css`
     cursor: not-allowed;
   `;
-
 export const StyledButton = styled('button', omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size'))`
   ${resetButtonStyles};
   position: relative; // Because LoadingContainer has an absolute position
@@ -88,10 +79,10 @@ export const StyledButton = styled('button', omitEmotionProps('btnType', 'colors
   ${sizeStyles};
   ${transitionStyles('background-color', 'color')};
 `;
+
 /**
  * Used to trigger the corresponding business logic.
  */
-
 const Button = /*#__PURE__*/forwardRef(({
   type = 'primary',
   danger = false,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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"}

package/dist/esm/Button/utils/useButtonColors.js

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { useTheme } from '@os-design/theming';
-
 // Used by Button, LinkButton
 const useButtonColors = ({
   type,
@@ -25,7 +24,6 @@ const useButtonColors = ({
         bg: theme.buttonDisabledPrimaryColorBg
       };
     }
-
     return !disabled ? {
       text: theme[`button${prefix}GhostColorText`],
       bgHover: theme[`button${prefix}GhostColorBgHover`]
@@ -40,14 +38,12 @@ const useButtonColors = ({
         bg: theme.buttonDisabledPrimaryColorBg
       };
     }
-
     if (type === 'primary') {
       return {
         text: theme[`button${prefix}PrimaryColorLoadingText`],
         bg: theme[`button${prefix}PrimaryColorLoadingBg`]
       };
     }
-
     return {
       text: theme[`button${prefix}GhostColorLoadingText`],
       bg: theme[`button${prefix}GhostColorLoadingBg`]
@@ -58,6 +54,5 @@ const useButtonColors = ({
     loadingColors
   };
 };
-
 export default useButtonColors;
 //# sourceMappingURL=useButtonColors.js.map

package/dist/esm/Button/utils/useButtonColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonColors.js","names":["useMemo","useTheme","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Color, useTheme } from '@os-design/theming';\n\ninterface Props {\n  type: 'primary' | 'outline' | 'ghost';\n  danger: boolean;\n  disabled: boolean;\n}\n\nexport interface ButtonColors {\n  text: Color;\n  bg?: Color;\n  bgHover?: Color;\n}\n\nexport interface LoadingColors {\n  text: Color;\n  bg: Color;\n}\n\ninterface UseButtonColorsRes {\n  buttonColors: ButtonColors;\n  loadingColors: LoadingColors;\n}\n\n// Used by Button, LinkButton\nconst useButtonColors = ({\n  type,\n  danger,\n  disabled,\n}: Props): UseButtonColorsRes => {\n  const { theme } = useTheme();\n\n  const prefix = useMemo<string>(() => {\n    if (danger) return 'Danger';\n    return '';\n  }, [danger]);\n\n  const buttonColors = useMemo<ButtonColors>(() => {\n    if (type === 'primary') {\n      return !disabled\n        ? {\n            text: theme[`button${prefix}PrimaryColorText`],\n            bg: theme[`button${prefix}PrimaryColorBg`],\n            bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n          }\n        : {\n            text: theme.buttonDisabledPrimaryColorText,\n            bg: theme.buttonDisabledPrimaryColorBg,\n          };\n    }\n    return !disabled\n      ? {\n          text: theme[`button${prefix}GhostColorText`],\n          bgHover: theme[`button${prefix}GhostColorBgHover`],\n        }\n      : {\n          text: theme.buttonDisabledGhostColorText,\n        };\n  }, [type, disabled, theme, prefix]);\n\n  const loadingColors = useMemo<LoadingColors>(() => {\n    if (disabled) {\n      return {\n        text: theme.buttonDisabledPrimaryColorText,\n        bg: theme.buttonDisabledPrimaryColorBg,\n      };\n    }\n    if (type === 'primary') {\n      return {\n        text: theme[`button${prefix}PrimaryColorLoadingText`],\n        bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n      };\n    }\n    return {\n      text: theme[`button${prefix}GhostColorLoadingText`],\n      bg: theme[`button${prefix}GhostColorLoadingBg`],\n    };\n  }, [disabled, type, theme, prefix]);\n\n  return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAAgBC,QAAhB,QAAgC,oBAAhC;;AAwBA;AACA,MAAMC,eAAe,GAAG,CAAC;EACvBC,IADuB;EAEvBC,MAFuB;EAGvBC;AAHuB,CAAD,KAIS;EAC/B,MAAM;IAAEC;EAAF,IAAYL,QAAQ,EAA1B;EAEA,MAAMM,MAAM,GAAGP,OAAO,CAAS,MAAM;IACnC,IAAII,MAAJ,EAAY,OAAO,QAAP;IACZ,OAAO,EAAP;EACD,CAHqB,EAGnB,CAACA,MAAD,CAHmB,CAAtB;EAKA,MAAMI,YAAY,GAAGR,OAAO,CAAe,MAAM;IAC/C,IAAIG,IAAI,KAAK,SAAb,EAAwB;MACtB,OAAO,CAACE,QAAD,GACH;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAjB,CADb;QAEEG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAjB,CAFX;QAGEI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAjB;MAHhB,CADG,GAMH;QACEE,IAAI,EAAEH,KAAK,CAACM,8BADd;QAEEF,EAAE,EAAEJ,KAAK,CAACO;MAFZ,CANJ;IAUD;;IACD,OAAO,CAACR,QAAD,GACH;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAjB,CADb;MAEEI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAjB;IAFhB,CADG,GAKH;MACEE,IAAI,EAAEH,KAAK,CAACQ;IADd,CALJ;EAQD,CArB2B,EAqBzB,CAACX,IAAD,EAAOE,QAAP,EAAiBC,KAAjB,EAAwBC,MAAxB,CArByB,CAA5B;EAuBA,MAAMQ,aAAa,GAAGf,OAAO,CAAgB,MAAM;IACjD,IAAIK,QAAJ,EAAc;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BADP;QAELF,EAAE,EAAEJ,KAAK,CAACO;MAFL,CAAP;IAID;;IACD,IAAIV,IAAI,KAAK,SAAb,EAAwB;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAjB,CADN;QAELG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAjB;MAFJ,CAAP;IAID;;IACD,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAjB,CADN;MAELG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAjB;IAFJ,CAAP;EAID,CAjB4B,EAiB1B,CAACF,QAAD,EAAWF,IAAX,EAAiBG,KAAjB,EAAwBC,MAAxB,CAjB0B,CAA7B;EAmBA,OAAO;IAAEC,YAAF;IAAgBO;EAAhB,CAAP;AACD,CAvDD;;AAyDA,eAAeb,eAAf"}
+{"version":3,"file":"useButtonColors.js","names":["useMemo","useTheme","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Color, useTheme } from '@os-design/theming';\n\ninterface Props {\n  type: 'primary' | 'outline' | 'ghost';\n  danger: boolean;\n  disabled: boolean;\n}\n\nexport interface ButtonColors {\n  text: Color;\n  bg?: Color;\n  bgHover?: Color;\n}\n\nexport interface LoadingColors {\n  text: Color;\n  bg: Color;\n}\n\ninterface UseButtonColorsRes {\n  buttonColors: ButtonColors;\n  loadingColors: LoadingColors;\n}\n\n// Used by Button, LinkButton\nconst useButtonColors = ({\n  type,\n  danger,\n  disabled,\n}: Props): UseButtonColorsRes => {\n  const { theme } = useTheme();\n\n  const prefix = useMemo<string>(() => {\n    if (danger) return 'Danger';\n    return '';\n  }, [danger]);\n\n  const buttonColors = useMemo<ButtonColors>(() => {\n    if (type === 'primary') {\n      return !disabled\n        ? {\n            text: theme[`button${prefix}PrimaryColorText`],\n            bg: theme[`button${prefix}PrimaryColorBg`],\n            bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n          }\n        : {\n            text: theme.buttonDisabledPrimaryColorText,\n            bg: theme.buttonDisabledPrimaryColorBg,\n          };\n    }\n    return !disabled\n      ? {\n          text: theme[`button${prefix}GhostColorText`],\n          bgHover: theme[`button${prefix}GhostColorBgHover`],\n        }\n      : {\n          text: theme.buttonDisabledGhostColorText,\n        };\n  }, [type, disabled, theme, prefix]);\n\n  const loadingColors = useMemo<LoadingColors>(() => {\n    if (disabled) {\n      return {\n        text: theme.buttonDisabledPrimaryColorText,\n        bg: theme.buttonDisabledPrimaryColorBg,\n      };\n    }\n    if (type === 'primary') {\n      return {\n        text: theme[`button${prefix}PrimaryColorLoadingText`],\n        bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n      };\n    }\n    return {\n      text: theme[`button${prefix}GhostColorLoadingText`],\n      bg: theme[`button${prefix}GhostColorLoadingBg`],\n    };\n  }, [disabled, type, theme, prefix]);\n\n  return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAAgBC,QAAQ,QAAQ,oBAAoB;AAwBpD;AACA,MAAMC,eAAe,GAAG,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGL,QAAQ,EAAE;EAE5B,MAAMM,MAAM,GAAGP,OAAO,CAAS,MAAM;IACnC,IAAII,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGR,OAAO,CAAe,MAAM;IAC/C,IAAIG,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAiB,CAAC;QAC9CG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;QAC1CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAoB;MACrD,CAAC,GACD;QACEE,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACP;IACA,OAAO,CAACR,QAAQ,GACZ;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;MAC5CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAkB;IACnD,CAAC,GACD;MACEE,IAAI,EAAEH,KAAK,CAACQ;IACd,CAAC;EACP,CAAC,EAAE,CAACX,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,MAAMQ,aAAa,GAAGf,OAAO,CAAgB,MAAM;IACjD,IAAIK,QAAQ,EAAE;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACH;IACA,IAAIV,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAwB,CAAC;QACrDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAsB;MAClD,CAAC;IACH;IACA,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAsB,CAAC;MACnDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAoB;IAChD,CAAC;EACH,CAAC,EAAE,CAACF,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEC,YAAY;IAAEO;EAAc,CAAC;AACxC,CAAC;AAED,eAAeb,eAAe"}

package/dist/esm/Checkbox/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
@@ -7,23 +6,19 @@ import { Check } from '@os-design/icons';
 import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/styles';
 import { omitEmotionProps, useForwardedState } from '@os-design/utils';
 import { clr } from '@os-design/theming';
-
 const uncheckedIconStyles = p => !p.checked && css`
     background-color: ${clr(p.theme.checkboxUncheckedColorBg)};
     border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};
   `;
-
 const checkedIconStyles = p => p.checked && css`
     background-color: ${clr(p.theme.checkboxCheckedColorBg)};
     border-color: ${clr(p.theme.checkboxCheckedColorBg)};
   `;
-
 const disabledIconStyles = p => p.disabled && css`
     background-color: ${clr(p.theme.checkboxDisabledColorBg)};
     color: ${clr(p.theme.checkboxDisabledColorIcon)};
     border-color: ${clr(p.theme.checkboxDisabledColorBorder)};
   `;
-
 const IconContainer = styled('span', omitEmotionProps('disabled', 'checked'))`
   width: ${p => p.theme.checkboxSize}em;
   height: ${p => p.theme.checkboxSize}em;
@@ -47,16 +42,13 @@ const IconContainer = styled('span', omitEmotionProps('disabled', 'checked'))`
   ${disabledIconStyles};
   ${transitionStyles('background-color', 'color', 'border-color')};
 `;
-
 const hoverUncheckedIconStyles = p => !p.checked && css`
     background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};
   `;
-
 const hoverCheckedIconStyles = p => p.checked && css`
     background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};
     border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};
   `;
-
 const hoverStyles = p => !p.disabled && css`
     @media (hover: hover) {
       &:hover,
@@ -68,11 +60,9 @@ const hoverStyles = p => !p.disabled && css`
       }
     }
   `;
-
 const disabledContainerStyles = p => p.disabled && css`
     cursor: not-allowed;
   `;
-
 const Container = styled('label', omitEmotionProps('disabled', 'size', 'checked'))`
   ${resetFocusStyles};
   cursor: pointer;
@@ -86,20 +76,18 @@ const Container = styled('label', omitEmotionProps('disabled', 'size', 'checked'
   ${sizeStyles};
   ${transitionStyles('color')};
 `;
-
 const disabledTextStyles = p => p.disabled && css`
     color: ${clr(p.theme.checkboxDisabledColorText)};
   `;
-
 const Text = styled('div', omitEmotionProps('disabled'))`
   margin-left: 0.4em;
   color: ${p => clr(p.theme.colorText)};
   ${disabledTextStyles};
 `;
+
 /**
  * The checkbox that can be enabled or disabled.
  */
-
 const Checkbox = /*#__PURE__*/forwardRef(({
   disabled = false,
   value,
@@ -127,12 +115,10 @@ const Checkbox = /*#__PURE__*/forwardRef(({
     },
     onKeyDown: e => {
       if (disabled) return;
-
       if (['Enter', ' '].includes(e.key)) {
         setForwardedValue(!forwardedValue);
         e.preventDefault();
       }
-
       onKeyDown(e);
     },
     onMouseDown: e => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","css","Check","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxLabelProps = Omit<\n  JSX.IntrinsicElements['label'],\n  'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n  /**\n   * Whether the checkbox is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the checkbox is checked.\n   * @default false\n   */\n  value?: boolean;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: boolean;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n  `;\n\nconst checkedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n  `;\n\nconst disabledIconStyles = (p) =>\n  p.disabled &&\n  css`\n    background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n    color: ${clr(p.theme.checkboxDisabledColorIcon)};\n    border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n  `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n  'span',\n  omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n  ${uncheckedIconStyles};\n  ${checkedIconStyles};\n  ${disabledIconStyles};\n  ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n  `;\n\nconst hoverCheckedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n  `;\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        & > span {\n          ${hoverUncheckedIconStyles(p)};\n          ${hoverCheckedIconStyles(p)};\n        }\n      }\n    }\n  `;\n\nconst disabledContainerStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\ninterface ContainerProps\n  extends Required<Pick<CheckboxProps, 'disabled'>>,\n    Pick<CheckboxProps, 'size'> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n  'label',\n  omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n  ${hoverStyles};\n  ${disabledContainerStyles};\n  ${sizeStyles};\n  ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.checkboxDisabledColorText)};\n  `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n  ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (\n    {\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      onKeyDown = () => {},\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Container\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (disabled) return;\n          setForwardedValue(!forwardedValue);\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(e.key)) {\n            setForwardedValue(!forwardedValue);\n            e.preventDefault();\n          }\n          onKeyDown(e);\n        }}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        role='checkbox'\n        aria-checked={forwardedValue}\n        aria-disabled={disabled}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer disabled={disabled} checked={forwardedValue}>\n          {forwardedValue && <Check />}\n        </IconContainer>\n\n        {children && <Text disabled={disabled}>{children}</Text>}\n      </Container>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","css","Check","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxLabelProps = Omit<\n  JSX.IntrinsicElements['label'],\n  'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n  /**\n   * Whether the checkbox is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the checkbox is checked.\n   * @default false\n   */\n  value?: boolean;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: boolean;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n  `;\n\nconst checkedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n  `;\n\nconst disabledIconStyles = (p) =>\n  p.disabled &&\n  css`\n    background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n    color: ${clr(p.theme.checkboxDisabledColorIcon)};\n    border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n  `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n  'span',\n  omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  box-sizing: border-box;\n  line-height: 1;\n\n  border: 1px solid transparent;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n  ${uncheckedIconStyles};\n  ${checkedIconStyles};\n  ${disabledIconStyles};\n  ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n  !p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n  `;\n\nconst hoverCheckedIconStyles = (p) =>\n  p.checked &&\n  css`\n    background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n    border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n  `;\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        & > span {\n          ${hoverUncheckedIconStyles(p)};\n          ${hoverCheckedIconStyles(p)};\n        }\n      }\n    }\n  `;\n\nconst disabledContainerStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\ninterface ContainerProps\n  extends Required<Pick<CheckboxProps, 'disabled'>>,\n    Pick<CheckboxProps, 'size'> {\n  checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n  'label',\n  omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n  ${resetFocusStyles};\n  cursor: pointer;\n  user-select: none;\n\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n  ${hoverStyles};\n  ${disabledContainerStyles};\n  ${sizeStyles};\n  ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n  p.disabled &&\n  css`\n    color: ${clr(p.theme.checkboxDisabledColorText)};\n  `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n  ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (\n    {\n      disabled = false,\n      value,\n      defaultValue,\n      onChange = () => {},\n      size,\n      onKeyDown = () => {},\n      onMouseDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    return (\n      <Container\n        disabled={disabled}\n        checked={forwardedValue}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onClick={() => {\n          if (disabled) return;\n          setForwardedValue(!forwardedValue);\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(e.key)) {\n            setForwardedValue(!forwardedValue);\n            e.preventDefault();\n          }\n          onKeyDown(e);\n        }}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        role='checkbox'\n        aria-checked={forwardedValue}\n        aria-disabled={disabled}\n        {...rest}\n        ref={ref}\n      >\n        <IconContainer disabled={disabled} checked={forwardedValue}>\n          {forwardedValue && <Check />}\n        </IconContainer>\n\n        {children && <Text disabled={disabled}>{children}</Text>}\n      </Container>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/esm/CheckboxSkeleton/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import styled from '@emotion/styled';
 import React, { forwardRef } from 'react';
 import { sizeStyles } from '@os-design/styles';
@@ -25,10 +24,10 @@ const Text = styled.div`
   margin-left: 0.4em;
   color: ${p => clr(p.theme.colorText)};
 `;
+
 /**
  * Provides a checkbox placeholder while a user waits for the content to load.
  */
-
 const CheckboxSkeleton = /*#__PURE__*/forwardRef(({
   children,
   ...rest

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","clr","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,QAAP,MAAqB,aAArB;AAKA,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA,YAAaI,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,sBAAuB;AAClD,IAAIP,UAAW;AACf,CALA;AAOA,MAAMQ,aAAa,GAAGX,MAAM,CAACM,QAAD,CAAW;AACvC,WAAYE,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AACvC,YAAaJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AACxC,eAAgBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC3C,gBAAiBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC5C;AACA,mBAAoBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,YAAa;AAC/C,gBAAiBL,CAAD,IAAO,CAACA,CAAC,CAACC,KAAF,CAAQK,UAAR,GAAqBN,CAAC,CAACC,KAAF,CAAQG,YAA9B,IAA8C,CAAE;AACvE,CARA;AAUA,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQQ,SAAT,CAAoB;AACzC,CAHA;AAKA;AACA;AACA;;AACA,MAAMC,gBAAgB,gBAAGhB,UAAU,CACjC,CAAC;EAAEiB,QAAF;EAAY,GAAGC;AAAf,CAAD,EAAwBC,GAAxB,kBACE,oBAAC,SAAD;EAAW,IAAI,EAAC,UAAhB;EAA2B;AAA3B,GAAyCD,IAAzC;EAA+C,GAAG,EAAEC;AAApD,iBACE,oBAAC,aAAD,OADF,EAEGF,QAAQ,iBAAI,oBAAC,IAAD,QAAOA,QAAP,CAFf,CAF+B,CAAnC;AASAD,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;AAEA,eAAeJ,gBAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","clr","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  user-select: none;\n  display: flex;\n  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n  ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n  width: ${(p) => p.theme.checkboxSize}em;\n  height: ${(p) => p.theme.checkboxSize}em;\n  min-width: ${(p) => p.theme.checkboxSize}em;\n  min-height: ${(p) => p.theme.checkboxSize}em;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n  margin-left: 0.4em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n  ({ children, ...rest }, ref) => (\n    <Container role='checkbox' aria-busy {...rest} ref={ref}>\n      <ImageSkeleton />\n      {children && <Text>{children}</Text>}\n    </Container>\n  )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAK,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA,YAAaI,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,sBAAuB;AAClD,IAAIP,UAAW;AACf,CAAC;AAED,MAAMQ,aAAa,GAAGX,MAAM,CAACM,QAAQ,CAAE;AACvC,WAAYE,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACvC,YAAaJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AACxC,eAAgBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC3C,gBAAiBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACG,YAAa;AAC5C;AACA,mBAAoBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACI,YAAa;AAC/C,gBAAiBL,CAAC,IAAK,CAACA,CAAC,CAACC,KAAK,CAACK,UAAU,GAAGN,CAAC,CAACC,KAAK,CAACG,YAAY,IAAI,CAAE;AACvE,CAAC;AAED,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACC,KAAK,CAACQ,SAAS,CAAE;AACzC,CAAC;;AAED;AACA;AACA;AACA,MAAMC,gBAAgB,gBAAGhB,UAAU,CACjC,CAAC;EAAEiB,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACzB,oBAAC,SAAS;EAAC,IAAI,EAAC,UAAU;EAAC;AAAS,GAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,iBACtD,oBAAC,aAAa,OAAG,EAChBF,QAAQ,iBAAI,oBAAC,IAAI,QAAEA,QAAQ,CAAQ,CAEvC,CACF;AAEDD,gBAAgB,CAACI,WAAW,GAAG,kBAAkB;AAEjD,eAAeJ,gBAAgB"}

package/dist/esm/DatePicker/DatePickerCalendar.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useCallback, useRef } from 'react';
 import styled from '@emotion/styled';
 import { ellipsisStyles, resetFocusStyles, transitionStyles } from '@os-design/styles';
@@ -77,7 +76,6 @@ const SelectedDay = styled(Day)`
   background-color: ${p => clr(p.theme.datePickerSelectedDayColorBg)};
   color: ${p => clr(p.theme.datePickerSelectedDayColorText)};
 `;
-
 const DatePickerCalendar = ({
   firstDayOfWeek,
   locale,
@@ -106,7 +104,6 @@ const DatePickerCalendar = ({
     },
     onKeyDown: e => {
       if (!onChangeRef.current) return;
-
       if (['Enter', ' '].includes(e.key)) {
         onChangeRef.current(date.getTime() / 1000);
         e.preventDefault();
@@ -137,24 +134,20 @@ const DatePickerCalendar = ({
         key: date.toISOString()
       }, getDayProps(date)), date.getDate());
     }
-
     if (type === 'selectedDay') {
       return /*#__PURE__*/React.createElement(SelectedDay, _extends({
         key: date.toISOString()
       }, getDayProps(date)), date.getDate());
     }
-
     if (type === 'today') {
       return /*#__PURE__*/React.createElement(Today, _extends({
         key: date.toISOString()
       }, getDayProps(date)), date.getDate());
     }
-
     return /*#__PURE__*/React.createElement(Day, _extends({
       key: date.toISOString()
     }, getDayProps(date)), date.getDate());
   })));
 };
-
 export default DatePickerCalendar;
 //# sourceMappingURL=DatePickerCalendar.js.map