@os-design/website 1.0.158 → 1.0.160

package/dist/cjs/PageContent/index.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _core = require("@os-design/core");
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 /**
  * The page content of the website page.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PageContent","styled","BasePageContent"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  PageContent as BasePageContent,\n  PageContentProps as BasePageContentProps,\n} from '@os-design/core';\n\nexport type PageContentProps = BasePageContentProps;\n\n/**\n * The page content of the website page.\n */\nconst PageContent = styled(BasePageContent)`\n  padding: 0 !important;\n`;\n\nexport default PageContent;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAOA;AACA;AACA;AACA,IAAMA,WAAW,GAAG,IAAAC,kBAAA,EAAOC,iBAAP,CAAH,iGAAjB;eAIeF,W"}
+{"version":3,"file":"index.js","names":["PageContent","styled","BasePageContent"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  PageContent as BasePageContent,\n  PageContentProps as BasePageContentProps,\n} from '@os-design/core';\n\nexport type PageContentProps = BasePageContentProps;\n\n/**\n * The page content of the website page.\n */\nconst PageContent = styled(BasePageContent)`\n  padding: 0 !important;\n`;\n\nexport default PageContent;\n"],"mappings":";;;;;;AAAA;AACA;AAGyB;AAAA;AAAA;AAIzB;AACA;AACA;AACA,IAAMA,WAAW,GAAG,IAAAC,kBAAM,EAACC,iBAAe,CAAC,iGAE1C;AAAC,eAEaF,WAAW;AAAA"}

package/dist/cjs/Section/index.js

@@ -1,53 +1,32 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _theming = require("@os-design/theming");
-
 var _core = require("@os-design/core");
-
 var _react2 = require("@emotion/react");
-
 var _media = require("@os-design/media");
-
 var _excluded = ["bgUrl", "bgProps", "limitedWidth", "centered", "size", "children"],
-    _excluded2 = ["className"];
-
+  _excluded2 = ["className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var BG_IMAGE_CLASS_NAME = 'section-bg-image';
-
 var hasBgStyles = function hasBgStyles(p) {
   return p.hasBg && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    & > *:not(.", ") {\n      z-index: 1;\n    }\n  "])), BG_IMAGE_CLASS_NAME);
 };
-
 var Container = (0, _styled["default"])('section', (0, _utils.omitEmotionProps)('hasBg', 'size'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  padding: ", "em\n    ", "em;\n  ", " {\n    padding: ", "em\n      ", "em;\n  }\n\n  color: ", ";\n\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.sectionPaddingVertical;
 }, function (p) {
@@ -62,38 +41,33 @@ var Container = (0, _styled["default"])('section', (0, _utils.omitEmotionProps)(
 var BackgroundImage = (0, _styled["default"])(_core.Image)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  // Reset image styles\n  border-radius: 0;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  filter: brightness(", "%);\n"])), function (p) {
   return p.theme.sectionBgImageBrightness;
 });
-
 var centeredStyles = function centeredStyles(p) {
   return p.centered && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  "])));
 };
-
 var LimitedWidth = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('centered'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  max-width: ", "em;\n  ", ";\n"])), function (p) {
   return p.theme.sectionMaxWidth;
 }, centeredStyles);
+
 /**
  * The base section for the content.
  */
-
 var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var bgUrl = _ref.bgUrl,
-      _ref$bgProps = _ref.bgProps,
-      bgProps = _ref$bgProps === void 0 ? {
-    defaultSize: 1024
-  } : _ref$bgProps,
-      _ref$limitedWidth = _ref.limitedWidth,
-      limitedWidth = _ref$limitedWidth === void 0 ? false : _ref$limitedWidth,
-      _ref$centered = _ref.centered,
-      centered = _ref$centered === void 0 ? false : _ref$centered,
-      size = _ref.size,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$bgProps = _ref.bgProps,
+    bgProps = _ref$bgProps === void 0 ? {
+      defaultSize: 1024
+    } : _ref$bgProps,
+    _ref$limitedWidth = _ref.limitedWidth,
+    limitedWidth = _ref$limitedWidth === void 0 ? false : _ref$limitedWidth,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered,
+    size = _ref.size,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var bgClassName = bgProps.className,
-      restBgProps = _objectWithoutProperties(bgProps, _excluded2);
-
+    restBgProps = _objectWithoutProperties(bgProps, _excluded2);
   var _useTheme = (0, _theming.useTheme)(),
-      overrides = _useTheme.overrides;
-
+    overrides = _useTheme.overrides;
   var section = /*#__PURE__*/_react["default"].createElement(Container, _extends({
     hasBg: !!bgUrl,
     size: size
@@ -108,7 +82,6 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       return i;
     }).join(' ')
   }, restBgProps)));
-
   if (!bgUrl) return section;
   return /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
     activeTheme: "dark",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["BG_IMAGE_CLASS_NAME","hasBgStyles","p","hasBg","css","Container","styled","omitEmotionProps","theme","sectionPaddingVertical","sectionPaddingHorizontal","m","min","sm","clr","colorText","sizeStyles","BackgroundImage","Image","sectionBgImageBrightness","centeredStyles","centered","LimitedWidth","sectionMaxWidth","Section","forwardRef","ref","bgUrl","bgProps","defaultSize","limitedWidth","size","children","rest","bgClassName","className","restBgProps","useTheme","overrides","section","filter","i","join","displayName"],"sources":["../../../src/Section/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { Image, ImageProps } from '@os-design/core';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\n\ntype JsxSectionProps = Omit<JSX.IntrinsicElements['section'], 'ref'>;\nexport interface SectionProps extends JsxSectionProps, WithSize {\n  /**\n   * The URL of the background image.\n   * @default undefined\n   */\n  bgUrl?: string;\n  /**\n   * Props of the background image.\n   * @default undefined\n   */\n  bgProps?: Omit<ImageProps, 'url' | 'cover'>;\n  /**\n   * Whether the content has a limited width.\n   * @default false\n   */\n  limitedWidth?: boolean;\n  /**\n   * Whether the content is centered.\n   * @default false\n   */\n  centered?: boolean;\n}\n\nconst BG_IMAGE_CLASS_NAME = 'section-bg-image';\n\nconst hasBgStyles = (p) =>\n  p.hasBg &&\n  css`\n    & > *:not(.${BG_IMAGE_CLASS_NAME}) {\n      z-index: 1;\n    }\n  `;\n\ninterface ContainerProps extends WithSize {\n  hasBg: boolean;\n}\nconst Container = styled(\n  'section',\n  omitEmotionProps('hasBg', 'size')\n)<ContainerProps>`\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  padding: ${(p) => p.theme.sectionPaddingVertical}em\n    ${(p) => p.theme.sectionPaddingHorizontal[0]}em;\n  ${m.min.sm} {\n    padding: ${(p) => p.theme.sectionPaddingVertical}em\n      ${(p) => p.theme.sectionPaddingHorizontal[1]}em;\n  }\n\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${hasBgStyles};\n  ${sizeStyles};\n`;\n\nconst BackgroundImage = styled(Image)`\n  // Reset image styles\n  border-radius: 0;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  filter: brightness(${(p) => p.theme.sectionBgImageBrightness}%);\n`;\n\nconst centeredStyles = (p) =>\n  p.centered &&\n  css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  `;\n\ninterface LimitedWidthProps {\n  centered: boolean;\n}\nconst LimitedWidth = styled(\n  'div',\n  omitEmotionProps('centered')\n)<LimitedWidthProps>`\n  width: 100%;\n  max-width: ${(p) => p.theme.sectionMaxWidth}em;\n  ${centeredStyles};\n`;\n\n/**\n * The base section for the content.\n */\nconst Section = forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      bgUrl,\n      bgProps = { defaultSize: 1024 },\n      limitedWidth = false,\n      centered = false,\n      size,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { className: bgClassName, ...restBgProps } = bgProps;\n    const { overrides } = useTheme();\n\n    const section = (\n      <Container hasBg={!!bgUrl} size={size} {...rest} ref={ref}>\n        {limitedWidth ? (\n          <LimitedWidth centered={centered}>{children}</LimitedWidth>\n        ) : (\n          children\n        )}\n        {bgUrl && (\n          <BackgroundImage\n            url={bgUrl}\n            cover\n            className={[bgClassName, BG_IMAGE_CLASS_NAME]\n              .filter((i) => i)\n              .join(' ')}\n            {...restBgProps}\n          />\n        )}\n      </Container>\n    );\n\n    if (!bgUrl) return section;\n    return (\n      <ThemeOverrider activeTheme='dark' overrides={overrides}>\n        {section}\n      </ThemeOverrider>\n    );\n  }\n);\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["BG_IMAGE_CLASS_NAME","hasBgStyles","p","hasBg","css","Container","styled","omitEmotionProps","theme","sectionPaddingVertical","sectionPaddingHorizontal","m","min","sm","clr","colorText","sizeStyles","BackgroundImage","Image","sectionBgImageBrightness","centeredStyles","centered","LimitedWidth","sectionMaxWidth","Section","forwardRef","ref","bgUrl","bgProps","defaultSize","limitedWidth","size","children","rest","bgClassName","className","restBgProps","useTheme","overrides","section","filter","i","join","displayName"],"sources":["../../../src/Section/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { Image, ImageProps } from '@os-design/core';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\n\ntype JsxSectionProps = Omit<JSX.IntrinsicElements['section'], 'ref'>;\nexport interface SectionProps extends JsxSectionProps, WithSize {\n  /**\n   * The URL of the background image.\n   * @default undefined\n   */\n  bgUrl?: string;\n  /**\n   * Props of the background image.\n   * @default undefined\n   */\n  bgProps?: Omit<ImageProps, 'url' | 'cover'>;\n  /**\n   * Whether the content has a limited width.\n   * @default false\n   */\n  limitedWidth?: boolean;\n  /**\n   * Whether the content is centered.\n   * @default false\n   */\n  centered?: boolean;\n}\n\nconst BG_IMAGE_CLASS_NAME = 'section-bg-image';\n\nconst hasBgStyles = (p) =>\n  p.hasBg &&\n  css`\n    & > *:not(.${BG_IMAGE_CLASS_NAME}) {\n      z-index: 1;\n    }\n  `;\n\ninterface ContainerProps extends WithSize {\n  hasBg: boolean;\n}\nconst Container = styled(\n  'section',\n  omitEmotionProps('hasBg', 'size')\n)<ContainerProps>`\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  padding: ${(p) => p.theme.sectionPaddingVertical}em\n    ${(p) => p.theme.sectionPaddingHorizontal[0]}em;\n  ${m.min.sm} {\n    padding: ${(p) => p.theme.sectionPaddingVertical}em\n      ${(p) => p.theme.sectionPaddingHorizontal[1]}em;\n  }\n\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${hasBgStyles};\n  ${sizeStyles};\n`;\n\nconst BackgroundImage = styled(Image)`\n  // Reset image styles\n  border-radius: 0;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  filter: brightness(${(p) => p.theme.sectionBgImageBrightness}%);\n`;\n\nconst centeredStyles = (p) =>\n  p.centered &&\n  css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  `;\n\ninterface LimitedWidthProps {\n  centered: boolean;\n}\nconst LimitedWidth = styled(\n  'div',\n  omitEmotionProps('centered')\n)<LimitedWidthProps>`\n  width: 100%;\n  max-width: ${(p) => p.theme.sectionMaxWidth}em;\n  ${centeredStyles};\n`;\n\n/**\n * The base section for the content.\n */\nconst Section = forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      bgUrl,\n      bgProps = { defaultSize: 1024 },\n      limitedWidth = false,\n      centered = false,\n      size,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { className: bgClassName, ...restBgProps } = bgProps;\n    const { overrides } = useTheme();\n\n    const section = (\n      <Container hasBg={!!bgUrl} size={size} {...rest} ref={ref}>\n        {limitedWidth ? (\n          <LimitedWidth centered={centered}>{children}</LimitedWidth>\n        ) : (\n          children\n        )}\n        {bgUrl && (\n          <BackgroundImage\n            url={bgUrl}\n            cover\n            className={[bgClassName, BG_IMAGE_CLASS_NAME]\n              .filter((i) => i)\n              .join(' ')}\n            {...restBgProps}\n          />\n        )}\n      </Container>\n    );\n\n    if (!bgUrl) return section;\n    return (\n      <ThemeOverrider activeTheme='dark' overrides={overrides}>\n        {section}\n      </ThemeOverrider>\n    );\n  }\n);\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAqC;EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BrC,IAAMA,mBAAmB,GAAG,kBAAkB;AAE9C,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAC;EAAA,OACpBA,CAAC,CAACC,KAAK,QACPC,WAAG,6HACYJ,mBAAmB,CAGjC;AAAA;AAKH,IAAMK,SAAS,GAAG,IAAAC,kBAAM,EACtB,SAAS,EACT,IAAAC,uBAAgB,EAAC,OAAO,EAAE,MAAM,CAAC,CAClC,mSAOY,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACC,sBAAsB;AAAA,GAC5C,UAACP,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACE,wBAAwB,CAAC,CAAC,CAAC;AAAA,GAC5CC,QAAC,CAACC,GAAG,CAACC,EAAE,EACG,UAACX,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACC,sBAAsB;AAAA,GAC5C,UAACP,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACE,wBAAwB,CAAC,CAAC,CAAC;AAAA,GAGvC,UAACR,CAAC;EAAA,OAAK,IAAAY,YAAG,EAACZ,CAAC,CAACM,KAAK,CAACO,SAAS,CAAC;AAAA,GAEpCd,WAAW,EACXe,kBAAU,CACb;AAED,IAAMC,eAAe,GAAG,IAAAX,kBAAM,EAACY,WAAK,CAAC,uOASd,UAAChB,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACW,wBAAwB;AAAA,EAC7D;AAED,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIlB,CAAC;EAAA,OACvBA,CAAC,CAACmB,QAAQ,QACVjB,WAAG,gLAKF;AAAA;AAKH,IAAMkB,YAAY,GAAG,IAAAhB,kBAAM,EACzB,KAAK,EACL,IAAAC,uBAAgB,EAAC,UAAU,CAAC,CAC7B,yHAEc,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACe,eAAe;AAAA,GACzCH,cAAc,CACjB;;AAED;AACA;AACA;AACA,IAAMI,OAAO,gBAAG,IAAAC,iBAAU,EACxB,gBAUEC,GAAG,EACA;EAAA,IATDC,KAAK,QAALA,KAAK;IAAA,oBACLC,OAAO;IAAPA,OAAO,6BAAG;MAAEC,WAAW,EAAE;IAAK,CAAC;IAAA,yBAC/BC,YAAY;IAAZA,YAAY,kCAAG,KAAK;IAAA,qBACpBT,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBU,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAIT,IAAmBC,WAAW,GAAqBN,OAAO,CAAlDO,SAAS;IAAkBC,WAAW,4BAAKR,OAAO;EAC1D,gBAAsB,IAAAS,iBAAQ,GAAE;IAAxBC,SAAS,aAATA,SAAS;EAEjB,IAAMC,OAAO,gBACX,gCAAC,SAAS;IAAC,KAAK,EAAE,CAAC,CAACZ,KAAM;IAAC,IAAI,EAAEI;EAAK,GAAKE,IAAI;IAAE,GAAG,EAAEP;EAAI,IACvDI,YAAY,gBACX,gCAAC,YAAY;IAAC,QAAQ,EAAET;EAAS,GAAEW,QAAQ,CAAgB,GAE3DA,QACD,EACAL,KAAK,iBACJ,gCAAC,eAAe;IACd,GAAG,EAAEA,KAAM;IACX,KAAK;IACL,SAAS,EAAE,CAACO,WAAW,EAAElC,mBAAmB,CAAC,CAC1CwC,MAAM,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC;IAAA,EAAC,CAChBC,IAAI,CAAC,GAAG;EAAE,GACTN,WAAW,EAElB,CAEJ;EAED,IAAI,CAACT,KAAK,EAAE,OAAOY,OAAO;EAC1B,oBACE,gCAAC,uBAAc;IAAC,WAAW,EAAC,MAAM;IAAC,SAAS,EAAED;EAAU,GACrDC,OAAO,CACO;AAErB,CAAC,CACF;AAEDf,OAAO,CAACmB,WAAW,GAAG,SAAS;AAAC,eAEjBnB,OAAO;AAAA"}

package/dist/cjs/SectionFeature/index.js

@@ -1,74 +1,49 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react2 = require("@emotion/react");
-
 var _utils = require("@os-design/utils");
-
 var _media = require("@os-design/media");
-
 var _theming = require("@os-design/theming");
-
 var _Section = _interopRequireDefault(require("../Section"));
-
 var _excluded = ["media", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var containerHasMediaStyles = function containerHasMediaStyles(p) {
   return p.hasMedia && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: grid;\n\n    grid-template-columns: 1fr;\n    grid-template-rows: auto auto;\n    grid-template-areas: 'content' 'media';\n    grid-row-gap: ", "em;\n\n    ", " {\n      grid-template-columns:\n        minmax(\n          ", "%,\n          ", "em\n        )\n        ", "%;\n      grid-template-rows: 1fr;\n      grid-template-areas: 'content media';\n      grid-column-gap: ", "%;\n      padding-right: ", "%;\n    }\n  "])), p.theme.sectionFeatureRowGap, _media.m.min.md, 100 - p.theme.sectionFeatureMediaWidthPercent, p.theme.sectionFeatureContentMaxWidth, p.theme.sectionFeatureMediaWidthPercent, p.theme.sectionFeatureColumnGapPercent, p.theme.sectionFeatureColumnGapPercent * 2);
 };
-
 var containerNotHasMediaStyles = function containerNotHasMediaStyles(p) {
   return !p.hasMedia && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: ", "em;\n  "])), p.theme.sectionFeatureContentMaxWidth);
 };
-
 var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('hasMedia'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 }, containerHasMediaStyles, containerNotHasMediaStyles);
-
 var Content = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  grid-area: content;\n  align-self: center;\n"])));
-
 var Media = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  grid-area: media;\n  align-self: center;\n"])));
-
 var sectionHasMediaStyles = function sectionHasMediaStyles(p) {
   return p.hasMedia && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", " {\n      &:nth-of-type(even) {\n        & > div {\n          grid-template-areas: 'media content';\n          grid-template-columns: ", "% minmax(\n              ", "%,\n              ", "em\n            );\n        }\n      }\n    }\n  "])), _media.m.min.md, p.theme.sectionFeatureMediaWidthPercent, 100 - p.theme.sectionFeatureMediaWidthPercent, p.theme.sectionFeatureContentMaxWidth);
 };
-
 var StyledSection = (0, _styled["default"])(_Section["default"], (0, _utils.omitEmotionProps)('hasMedia'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", ";\n"])), sectionHasMediaStyles);
+
 /**
  * The section for describing an app feature.
  */
-
 var SectionFeature = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var media = _ref.media,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(StyledSection, _extends({
     hasMedia: !!media
   }, rest, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["containerHasMediaStyles","p","hasMedia","css","theme","sectionFeatureRowGap","m","min","md","sectionFeatureMediaWidthPercent","sectionFeatureContentMaxWidth","sectionFeatureColumnGapPercent","containerNotHasMediaStyles","Container","styled","omitEmotionProps","clr","colorText","Content","div","Media","sectionHasMediaStyles","StyledSection","Section","SectionFeature","forwardRef","ref","media","children","rest","displayName"],"sources":["../../../src/SectionFeature/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Section, { SectionProps } from '../Section';\n\nexport interface SectionFeatureProps extends SectionProps {\n  /**\n   * The media component. For example, an image.\n   * @default undefined\n   */\n  media?: React.ReactElement;\n}\n\nconst containerHasMediaStyles = (p) =>\n  p.hasMedia &&\n  css`\n    display: grid;\n\n    grid-template-columns: 1fr;\n    grid-template-rows: auto auto;\n    grid-template-areas: 'content' 'media';\n    grid-row-gap: ${p.theme.sectionFeatureRowGap}em;\n\n    ${m.min.md} {\n      grid-template-columns:\n        minmax(\n          ${100 - p.theme.sectionFeatureMediaWidthPercent}%,\n          ${p.theme.sectionFeatureContentMaxWidth}em\n        )\n        ${p.theme.sectionFeatureMediaWidthPercent}%;\n      grid-template-rows: 1fr;\n      grid-template-areas: 'content media';\n      grid-column-gap: ${p.theme.sectionFeatureColumnGapPercent}%;\n      padding-right: ${p.theme.sectionFeatureColumnGapPercent * 2}%;\n    }\n  `;\n\nconst containerNotHasMediaStyles = (p) =>\n  !p.hasMedia &&\n  css`\n    max-width: ${p.theme.sectionFeatureContentMaxWidth}em;\n  `;\n\ninterface ContainerProps {\n  hasMedia: boolean;\n}\nconst Container = styled('div', omitEmotionProps('hasMedia'))<ContainerProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${containerHasMediaStyles};\n  ${containerNotHasMediaStyles};\n`;\n\nconst Content = styled.div`\n  grid-area: content;\n  align-self: center;\n`;\n\nconst Media = styled.div`\n  grid-area: media;\n  align-self: center;\n`;\n\nconst sectionHasMediaStyles = (p) =>\n  p.hasMedia &&\n  css`\n    ${m.min.md} {\n      &:nth-of-type(even) {\n        & > div {\n          grid-template-areas: 'media content';\n          grid-template-columns: ${p.theme.sectionFeatureMediaWidthPercent}% minmax(\n              ${100 - p.theme.sectionFeatureMediaWidthPercent}%,\n              ${p.theme.sectionFeatureContentMaxWidth}em\n            );\n        }\n      }\n    }\n  `;\n\ninterface StyledSectionProps {\n  hasMedia: boolean;\n}\nconst StyledSection = styled(\n  Section,\n  omitEmotionProps('hasMedia')\n)<StyledSectionProps>`\n  ${sectionHasMediaStyles};\n`;\n\n/**\n * The section for describing an app feature.\n */\nconst SectionFeature = forwardRef<HTMLElement, SectionFeatureProps>(\n  ({ media, children, ...rest }, ref) => (\n    <StyledSection hasMedia={!!media} {...rest} ref={ref}>\n      <Container hasMedia={!!media}>\n        <Content>{children}</Content>\n        {media && <Media>{media}</Media>}\n      </Container>\n    </StyledSection>\n  )\n);\n\nSectionFeature.displayName = 'SectionFeature';\n\nexport default SectionFeature;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,CAAD;EAAA,OAC9BA,CAAC,CAACC,QAAF,QACAC,WADA,0fAOkBF,CAAC,CAACG,KAAF,CAAQC,oBAP1B,EASIC,QAAA,CAAEC,GAAF,CAAMC,EATV,EAYU,MAAMP,CAAC,CAACG,KAAF,CAAQK,+BAZxB,EAaUR,CAAC,CAACG,KAAF,CAAQM,6BAblB,EAeQT,CAAC,CAACG,KAAF,CAAQK,+BAfhB,EAkBuBR,CAAC,CAACG,KAAF,CAAQO,8BAlB/B,EAmBqBV,CAAC,CAACG,KAAF,CAAQO,8BAAR,GAAyC,CAnB9D,CAD8B;AAAA,CAAhC;;AAwBA,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,CAACX,CAAD;EAAA,OACjC,CAACA,CAAC,CAACC,QAAH,QACAC,WADA,qGAEeF,CAAC,CAACG,KAAF,CAAQM,6BAFvB,CADiC;AAAA,CAAnC;;AASA,IAAMG,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,UAAjB,CAAd,CAAH,4GACJ,UAACd,CAAD;EAAA,OAAO,IAAAe,YAAA,EAAIf,CAAC,CAACG,KAAF,CAAQa,SAAZ,CAAP;AAAA,CADI,EAEXjB,uBAFW,EAGXY,0BAHW,CAAf;;AAMA,IAAMM,OAAO,GAAGJ,kBAAA,CAAOK,GAAV,uHAAb;;AAKA,IAAMC,KAAK,GAAGN,kBAAA,CAAOK,GAAV,qHAAX;;AAKA,IAAME,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACpB,CAAD;EAAA,OAC5BA,CAAC,CAACC,QAAF,QACAC,WADA,iUAEIG,QAAA,CAAEC,GAAF,CAAMC,EAFV,EAMiCP,CAAC,CAACG,KAAF,CAAQK,+BANzC,EAOc,MAAMR,CAAC,CAACG,KAAF,CAAQK,+BAP5B,EAQcR,CAAC,CAACG,KAAF,CAAQM,6BARtB,CAD4B;AAAA,CAA9B;;AAmBA,IAAMY,aAAa,GAAG,IAAAR,kBAAA,EACpBS,mBADoB,EAEpB,IAAAR,uBAAA,EAAiB,UAAjB,CAFoB,CAAH,mFAIfM,qBAJe,CAAnB;AAOA;AACA;AACA;;AACA,IAAMG,cAAc,gBAAG,IAAAC,iBAAA,EACrB,gBAA+BC,GAA/B;EAAA,IAAGC,KAAH,QAAGA,KAAH;EAAA,IAAUC,QAAV,QAAUA,QAAV;EAAA,IAAuBC,IAAvB;;EAAA,oBACE,gCAAC,aAAD;IAAe,QAAQ,EAAE,CAAC,CAACF;EAA3B,GAAsCE,IAAtC;IAA4C,GAAG,EAAEH;EAAjD,iBACE,gCAAC,SAAD;IAAW,QAAQ,EAAE,CAAC,CAACC;EAAvB,gBACE,gCAAC,OAAD,QAAUC,QAAV,CADF,EAEGD,KAAK,iBAAI,gCAAC,KAAD,QAAQA,KAAR,CAFZ,CADF,CADF;AAAA,CADqB,CAAvB;AAWAH,cAAc,CAACM,WAAf,GAA6B,gBAA7B;eAEeN,c"}
+{"version":3,"file":"index.js","names":["containerHasMediaStyles","p","hasMedia","css","theme","sectionFeatureRowGap","m","min","md","sectionFeatureMediaWidthPercent","sectionFeatureContentMaxWidth","sectionFeatureColumnGapPercent","containerNotHasMediaStyles","Container","styled","omitEmotionProps","clr","colorText","Content","div","Media","sectionHasMediaStyles","StyledSection","Section","SectionFeature","forwardRef","ref","media","children","rest","displayName"],"sources":["../../../src/SectionFeature/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Section, { SectionProps } from '../Section';\n\nexport interface SectionFeatureProps extends SectionProps {\n  /**\n   * The media component. For example, an image.\n   * @default undefined\n   */\n  media?: React.ReactElement;\n}\n\nconst containerHasMediaStyles = (p) =>\n  p.hasMedia &&\n  css`\n    display: grid;\n\n    grid-template-columns: 1fr;\n    grid-template-rows: auto auto;\n    grid-template-areas: 'content' 'media';\n    grid-row-gap: ${p.theme.sectionFeatureRowGap}em;\n\n    ${m.min.md} {\n      grid-template-columns:\n        minmax(\n          ${100 - p.theme.sectionFeatureMediaWidthPercent}%,\n          ${p.theme.sectionFeatureContentMaxWidth}em\n        )\n        ${p.theme.sectionFeatureMediaWidthPercent}%;\n      grid-template-rows: 1fr;\n      grid-template-areas: 'content media';\n      grid-column-gap: ${p.theme.sectionFeatureColumnGapPercent}%;\n      padding-right: ${p.theme.sectionFeatureColumnGapPercent * 2}%;\n    }\n  `;\n\nconst containerNotHasMediaStyles = (p) =>\n  !p.hasMedia &&\n  css`\n    max-width: ${p.theme.sectionFeatureContentMaxWidth}em;\n  `;\n\ninterface ContainerProps {\n  hasMedia: boolean;\n}\nconst Container = styled('div', omitEmotionProps('hasMedia'))<ContainerProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${containerHasMediaStyles};\n  ${containerNotHasMediaStyles};\n`;\n\nconst Content = styled.div`\n  grid-area: content;\n  align-self: center;\n`;\n\nconst Media = styled.div`\n  grid-area: media;\n  align-self: center;\n`;\n\nconst sectionHasMediaStyles = (p) =>\n  p.hasMedia &&\n  css`\n    ${m.min.md} {\n      &:nth-of-type(even) {\n        & > div {\n          grid-template-areas: 'media content';\n          grid-template-columns: ${p.theme.sectionFeatureMediaWidthPercent}% minmax(\n              ${100 - p.theme.sectionFeatureMediaWidthPercent}%,\n              ${p.theme.sectionFeatureContentMaxWidth}em\n            );\n        }\n      }\n    }\n  `;\n\ninterface StyledSectionProps {\n  hasMedia: boolean;\n}\nconst StyledSection = styled(\n  Section,\n  omitEmotionProps('hasMedia')\n)<StyledSectionProps>`\n  ${sectionHasMediaStyles};\n`;\n\n/**\n * The section for describing an app feature.\n */\nconst SectionFeature = forwardRef<HTMLElement, SectionFeatureProps>(\n  ({ media, children, ...rest }, ref) => (\n    <StyledSection hasMedia={!!media} {...rest} ref={ref}>\n      <Container hasMedia={!!media}>\n        <Content>{children}</Content>\n        {media && <Media>{media}</Media>}\n      </Container>\n    </StyledSection>\n  )\n);\n\nSectionFeature.displayName = 'SectionFeature';\n\nexport default SectionFeature;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAmD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUnD,IAAMA,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIC,CAAC;EAAA,OAChCA,CAAC,CAACC,QAAQ,QACVC,WAAG,0fAMeF,CAAC,CAACG,KAAK,CAACC,oBAAoB,EAE1CC,QAAC,CAACC,GAAG,CAACC,EAAE,EAGF,GAAG,GAAGP,CAAC,CAACG,KAAK,CAACK,+BAA+B,EAC7CR,CAAC,CAACG,KAAK,CAACM,6BAA6B,EAEvCT,CAAC,CAACG,KAAK,CAACK,+BAA+B,EAGxBR,CAAC,CAACG,KAAK,CAACO,8BAA8B,EACxCV,CAAC,CAACG,KAAK,CAACO,8BAA8B,GAAG,CAAC,CAE9D;AAAA;AAEH,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA0B,CAAIX,CAAC;EAAA,OACnC,CAACA,CAAC,CAACC,QAAQ,QACXC,WAAG,qGACYF,CAAC,CAACG,KAAK,CAACM,6BAA6B,CACnD;AAAA;AAKH,IAAMG,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,UAAU,CAAC,CAAC,4GAClD,UAACd,CAAC;EAAA,OAAK,IAAAe,YAAG,EAACf,CAAC,CAACG,KAAK,CAACa,SAAS,CAAC;AAAA,GACpCjB,uBAAuB,EACvBY,0BAA0B,CAC7B;AAED,IAAMM,OAAO,GAAGJ,kBAAM,CAACK,GAAG,uHAGzB;AAED,IAAMC,KAAK,GAAGN,kBAAM,CAACK,GAAG,qHAGvB;AAED,IAAME,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIpB,CAAC;EAAA,OAC9BA,CAAC,CAACC,QAAQ,QACVC,WAAG,iUACCG,QAAC,CAACC,GAAG,CAACC,EAAE,EAIqBP,CAAC,CAACG,KAAK,CAACK,+BAA+B,EAC1D,GAAG,GAAGR,CAAC,CAACG,KAAK,CAACK,+BAA+B,EAC7CR,CAAC,CAACG,KAAK,CAACM,6BAA6B,CAKlD;AAAA;AAKH,IAAMY,aAAa,GAAG,IAAAR,kBAAM,EAC1BS,mBAAO,EACP,IAAAR,uBAAgB,EAAC,UAAU,CAAC,CAC7B,mFACGM,qBAAqB,CACxB;;AAED;AACA;AACA;AACA,IAAMG,cAAc,gBAAG,IAAAC,iBAAU,EAC/B,gBAA+BC,GAAG;EAAA,IAA/BC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,IAAI;EAAA,oBACzB,gCAAC,aAAa;IAAC,QAAQ,EAAE,CAAC,CAACF;EAAM,GAAKE,IAAI;IAAE,GAAG,EAAEH;EAAI,iBACnD,gCAAC,SAAS;IAAC,QAAQ,EAAE,CAAC,CAACC;EAAM,gBAC3B,gCAAC,OAAO,QAAEC,QAAQ,CAAW,EAC5BD,KAAK,iBAAI,gCAAC,KAAK,QAAEA,KAAK,CAAS,CACtB,CACE;AAAA,CACjB,CACF;AAEDH,cAAc,CAACM,WAAW,GAAG,gBAAgB;AAAC,eAE/BN,cAAc;AAAA"}

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -28,9 +27,7 @@ Object.defineProperty(exports, "SectionFeature", {
     return _SectionFeature["default"];
   }
 });
-
 var _PageContent = _interopRequireWildcard(require("./PageContent"));
-
 Object.keys(_PageContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -42,9 +39,7 @@ Object.keys(_PageContent).forEach(function (key) {
     }
   });
 });
-
 var _Section = _interopRequireWildcard(require("./Section"));
-
 Object.keys(_Section).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -56,9 +51,7 @@ Object.keys(_Section).forEach(function (key) {
     }
   });
 });
-
 var _SectionFeature = _interopRequireWildcard(require("./SectionFeature"));
-
 Object.keys(_SectionFeature).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -70,8 +63,6 @@ Object.keys(_SectionFeature).forEach(function (key) {
     }
   });
 });
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default as PageContent } from './PageContent';\nexport { default as Section } from './Section';\nexport { default as SectionFeature } from './SectionFeature';\n\nexport * from './PageContent';\nexport * from './Section';\nexport * from './SectionFeature';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAHA;;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAHA;;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default as PageContent } from './PageContent';\nexport { default as Section } from './Section';\nexport { default as SectionFeature } from './SectionFeature';\n\nexport * from './PageContent';\nexport * from './Section';\nexport * from './SectionFeature';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAHA;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAHA;AAIA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAAiC;AAAA"}

package/dist/esm/PageContent/index.js

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { PageContent as BasePageContent } from '@os-design/core';
-
 /**
  * The page content of the website page.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","PageContent","BasePageContent"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  PageContent as BasePageContent,\n  PageContentProps as BasePageContentProps,\n} from '@os-design/core';\n\nexport type PageContentProps = BasePageContentProps;\n\n/**\n * The page content of the website page.\n */\nconst PageContent = styled(BasePageContent)`\n  padding: 0 !important;\n`;\n\nexport default PageContent;\n"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,SACEC,WAAW,IAAIC,eADjB,QAGO,iBAHP;;AAOA;AACA;AACA;AACA,MAAMD,WAAW,GAAGD,MAAM,CAACE,eAAD,CAAkB;AAC5C;AACA,CAFA;AAIA,eAAeD,WAAf"}
+{"version":3,"file":"index.js","names":["styled","PageContent","BasePageContent"],"sources":["../../../src/PageContent/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  PageContent as BasePageContent,\n  PageContentProps as BasePageContentProps,\n} from '@os-design/core';\n\nexport type PageContentProps = BasePageContentProps;\n\n/**\n * The page content of the website page.\n */\nconst PageContent = styled(BasePageContent)`\n  padding: 0 !important;\n`;\n\nexport default PageContent;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SACEC,WAAW,IAAIC,eAAe,QAEzB,iBAAiB;AAIxB;AACA;AACA;AACA,MAAMD,WAAW,GAAGD,MAAM,CAACE,eAAe,CAAE;AAC5C;AACA,CAAC;AAED,eAAeD,WAAW"}

package/dist/esm/Section/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 { sizeStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
@@ -9,13 +8,11 @@ import { Image } from '@os-design/core';
 import { css } from '@emotion/react';
 import { m } from '@os-design/media';
 const BG_IMAGE_CLASS_NAME = 'section-bg-image';
-
 const hasBgStyles = p => p.hasBg && css`
     & > *:not(.${BG_IMAGE_CLASS_NAME}) {
       z-index: 1;
     }
   `;
-
 const Container = styled('section', omitEmotionProps('hasBg', 'size'))`
   position: relative;
 
@@ -46,23 +43,21 @@ const BackgroundImage = styled(Image)`
   height: 100%;
   filter: brightness(${p => p.theme.sectionBgImageBrightness}%);
 `;
-
 const centeredStyles = p => p.centered && css`
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   `;
-
 const LimitedWidth = styled('div', omitEmotionProps('centered'))`
   width: 100%;
   max-width: ${p => p.theme.sectionMaxWidth}em;
   ${centeredStyles};
 `;
+
 /**
  * The base section for the content.
  */
-
 const Section = /*#__PURE__*/forwardRef(({
   bgUrl,
   bgProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","sizeStyles","omitEmotionProps","styled","clr","ThemeOverrider","useTheme","Image","css","m","BG_IMAGE_CLASS_NAME","hasBgStyles","p","hasBg","Container","theme","sectionPaddingVertical","sectionPaddingHorizontal","min","sm","colorText","BackgroundImage","sectionBgImageBrightness","centeredStyles","centered","LimitedWidth","sectionMaxWidth","Section","bgUrl","bgProps","defaultSize","limitedWidth","size","children","rest","ref","className","bgClassName","restBgProps","overrides","section","filter","i","join","displayName"],"sources":["../../../src/Section/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { Image, ImageProps } from '@os-design/core';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\n\ntype JsxSectionProps = Omit<JSX.IntrinsicElements['section'], 'ref'>;\nexport interface SectionProps extends JsxSectionProps, WithSize {\n  /**\n   * The URL of the background image.\n   * @default undefined\n   */\n  bgUrl?: string;\n  /**\n   * Props of the background image.\n   * @default undefined\n   */\n  bgProps?: Omit<ImageProps, 'url' | 'cover'>;\n  /**\n   * Whether the content has a limited width.\n   * @default false\n   */\n  limitedWidth?: boolean;\n  /**\n   * Whether the content is centered.\n   * @default false\n   */\n  centered?: boolean;\n}\n\nconst BG_IMAGE_CLASS_NAME = 'section-bg-image';\n\nconst hasBgStyles = (p) =>\n  p.hasBg &&\n  css`\n    & > *:not(.${BG_IMAGE_CLASS_NAME}) {\n      z-index: 1;\n    }\n  `;\n\ninterface ContainerProps extends WithSize {\n  hasBg: boolean;\n}\nconst Container = styled(\n  'section',\n  omitEmotionProps('hasBg', 'size')\n)<ContainerProps>`\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  padding: ${(p) => p.theme.sectionPaddingVertical}em\n    ${(p) => p.theme.sectionPaddingHorizontal[0]}em;\n  ${m.min.sm} {\n    padding: ${(p) => p.theme.sectionPaddingVertical}em\n      ${(p) => p.theme.sectionPaddingHorizontal[1]}em;\n  }\n\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${hasBgStyles};\n  ${sizeStyles};\n`;\n\nconst BackgroundImage = styled(Image)`\n  // Reset image styles\n  border-radius: 0;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  filter: brightness(${(p) => p.theme.sectionBgImageBrightness}%);\n`;\n\nconst centeredStyles = (p) =>\n  p.centered &&\n  css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  `;\n\ninterface LimitedWidthProps {\n  centered: boolean;\n}\nconst LimitedWidth = styled(\n  'div',\n  omitEmotionProps('centered')\n)<LimitedWidthProps>`\n  width: 100%;\n  max-width: ${(p) => p.theme.sectionMaxWidth}em;\n  ${centeredStyles};\n`;\n\n/**\n * The base section for the content.\n */\nconst Section = forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      bgUrl,\n      bgProps = { defaultSize: 1024 },\n      limitedWidth = false,\n      centered = false,\n      size,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { className: bgClassName, ...restBgProps } = bgProps;\n    const { overrides } = useTheme();\n\n    const section = (\n      <Container hasBg={!!bgUrl} size={size} {...rest} ref={ref}>\n        {limitedWidth ? (\n          <LimitedWidth centered={centered}>{children}</LimitedWidth>\n        ) : (\n          children\n        )}\n        {bgUrl && (\n          <BackgroundImage\n            url={bgUrl}\n            cover\n            className={[bgClassName, BG_IMAGE_CLASS_NAME]\n              .filter((i) => i)\n              .join(' ')}\n            {...restBgProps}\n          />\n        )}\n      </Container>\n    );\n\n    if (!bgUrl) return section;\n    return (\n      <ThemeOverrider activeTheme='dark' overrides={overrides}>\n        {section}\n      </ThemeOverrider>\n    );\n  }\n);\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","sizeStyles","omitEmotionProps","styled","clr","ThemeOverrider","useTheme","Image","css","m","BG_IMAGE_CLASS_NAME","hasBgStyles","p","hasBg","Container","theme","sectionPaddingVertical","sectionPaddingHorizontal","min","sm","colorText","BackgroundImage","sectionBgImageBrightness","centeredStyles","centered","LimitedWidth","sectionMaxWidth","Section","bgUrl","bgProps","defaultSize","limitedWidth","size","children","rest","ref","className","bgClassName","restBgProps","overrides","section","filter","i","join","displayName"],"sources":["../../../src/Section/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { Image, ImageProps } from '@os-design/core';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\n\ntype JsxSectionProps = Omit<JSX.IntrinsicElements['section'], 'ref'>;\nexport interface SectionProps extends JsxSectionProps, WithSize {\n  /**\n   * The URL of the background image.\n   * @default undefined\n   */\n  bgUrl?: string;\n  /**\n   * Props of the background image.\n   * @default undefined\n   */\n  bgProps?: Omit<ImageProps, 'url' | 'cover'>;\n  /**\n   * Whether the content has a limited width.\n   * @default false\n   */\n  limitedWidth?: boolean;\n  /**\n   * Whether the content is centered.\n   * @default false\n   */\n  centered?: boolean;\n}\n\nconst BG_IMAGE_CLASS_NAME = 'section-bg-image';\n\nconst hasBgStyles = (p) =>\n  p.hasBg &&\n  css`\n    & > *:not(.${BG_IMAGE_CLASS_NAME}) {\n      z-index: 1;\n    }\n  `;\n\ninterface ContainerProps extends WithSize {\n  hasBg: boolean;\n}\nconst Container = styled(\n  'section',\n  omitEmotionProps('hasBg', 'size')\n)<ContainerProps>`\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  padding: ${(p) => p.theme.sectionPaddingVertical}em\n    ${(p) => p.theme.sectionPaddingHorizontal[0]}em;\n  ${m.min.sm} {\n    padding: ${(p) => p.theme.sectionPaddingVertical}em\n      ${(p) => p.theme.sectionPaddingHorizontal[1]}em;\n  }\n\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${hasBgStyles};\n  ${sizeStyles};\n`;\n\nconst BackgroundImage = styled(Image)`\n  // Reset image styles\n  border-radius: 0;\n\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  filter: brightness(${(p) => p.theme.sectionBgImageBrightness}%);\n`;\n\nconst centeredStyles = (p) =>\n  p.centered &&\n  css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  `;\n\ninterface LimitedWidthProps {\n  centered: boolean;\n}\nconst LimitedWidth = styled(\n  'div',\n  omitEmotionProps('centered')\n)<LimitedWidthProps>`\n  width: 100%;\n  max-width: ${(p) => p.theme.sectionMaxWidth}em;\n  ${centeredStyles};\n`;\n\n/**\n * The base section for the content.\n */\nconst Section = forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      bgUrl,\n      bgProps = { defaultSize: 1024 },\n      limitedWidth = false,\n      centered = false,\n      size,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { className: bgClassName, ...restBgProps } = bgProps;\n    const { overrides } = useTheme();\n\n    const section = (\n      <Container hasBg={!!bgUrl} size={size} {...rest} ref={ref}>\n        {limitedWidth ? (\n          <LimitedWidth centered={centered}>{children}</LimitedWidth>\n        ) : (\n          children\n        )}\n        {bgUrl && (\n          <BackgroundImage\n            url={bgUrl}\n            cover\n            className={[bgClassName, BG_IMAGE_CLASS_NAME]\n              .filter((i) => i)\n              .join(' ')}\n            {...restBgProps}\n          />\n        )}\n      </Container>\n    );\n\n    if (!bgUrl) return section;\n    return (\n      <ThemeOverrider activeTheme='dark' overrides={overrides}>\n        {section}\n      </ThemeOverrider>\n    );\n  }\n);\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":"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"}

package/dist/esm/SectionFeature/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,7 +6,6 @@ import { omitEmotionProps } from '@os-design/utils';
 import { m } from '@os-design/media';
 import { clr } from '@os-design/theming';
 import Section from '../Section';
-
 const containerHasMediaStyles = p => p.hasMedia && css`
     display: grid;
 
@@ -29,11 +27,9 @@ const containerHasMediaStyles = p => p.hasMedia && css`
       padding-right: ${p.theme.sectionFeatureColumnGapPercent * 2}%;
     }
   `;
-
 const containerNotHasMediaStyles = p => !p.hasMedia && css`
     max-width: ${p.theme.sectionFeatureContentMaxWidth}em;
   `;
-
 const Container = styled('div', omitEmotionProps('hasMedia'))`
   color: ${p => clr(p.theme.colorText)};
   ${containerHasMediaStyles};
@@ -47,7 +43,6 @@ const Media = styled.div`
   grid-area: media;
   align-self: center;
 `;
-
 const sectionHasMediaStyles = p => p.hasMedia && css`
     ${m.min.md} {
       &:nth-of-type(even) {
@@ -61,14 +56,13 @@ const sectionHasMediaStyles = p => p.hasMedia && css`
       }
     }
   `;
-
 const StyledSection = styled(Section, omitEmotionProps('hasMedia'))`
   ${sectionHasMediaStyles};
 `;
+
 /**
  * The section for describing an app feature.
  */
-
 const SectionFeature = /*#__PURE__*/forwardRef(({
   media,
   children,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","css","omitEmotionProps","m","clr","Section","containerHasMediaStyles","p","hasMedia","theme","sectionFeatureRowGap","min","md","sectionFeatureMediaWidthPercent","sectionFeatureContentMaxWidth","sectionFeatureColumnGapPercent","containerNotHasMediaStyles","Container","colorText","Content","div","Media","sectionHasMediaStyles","StyledSection","SectionFeature","media","children","rest","ref","displayName"],"sources":["../../../src/SectionFeature/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Section, { SectionProps } from '../Section';\n\nexport interface SectionFeatureProps extends SectionProps {\n  /**\n   * The media component. For example, an image.\n   * @default undefined\n   */\n  media?: React.ReactElement;\n}\n\nconst containerHasMediaStyles = (p) =>\n  p.hasMedia &&\n  css`\n    display: grid;\n\n    grid-template-columns: 1fr;\n    grid-template-rows: auto auto;\n    grid-template-areas: 'content' 'media';\n    grid-row-gap: ${p.theme.sectionFeatureRowGap}em;\n\n    ${m.min.md} {\n      grid-template-columns:\n        minmax(\n          ${100 - p.theme.sectionFeatureMediaWidthPercent}%,\n          ${p.theme.sectionFeatureContentMaxWidth}em\n        )\n        ${p.theme.sectionFeatureMediaWidthPercent}%;\n      grid-template-rows: 1fr;\n      grid-template-areas: 'content media';\n      grid-column-gap: ${p.theme.sectionFeatureColumnGapPercent}%;\n      padding-right: ${p.theme.sectionFeatureColumnGapPercent * 2}%;\n    }\n  `;\n\nconst containerNotHasMediaStyles = (p) =>\n  !p.hasMedia &&\n  css`\n    max-width: ${p.theme.sectionFeatureContentMaxWidth}em;\n  `;\n\ninterface ContainerProps {\n  hasMedia: boolean;\n}\nconst Container = styled('div', omitEmotionProps('hasMedia'))<ContainerProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${containerHasMediaStyles};\n  ${containerNotHasMediaStyles};\n`;\n\nconst Content = styled.div`\n  grid-area: content;\n  align-self: center;\n`;\n\nconst Media = styled.div`\n  grid-area: media;\n  align-self: center;\n`;\n\nconst sectionHasMediaStyles = (p) =>\n  p.hasMedia &&\n  css`\n    ${m.min.md} {\n      &:nth-of-type(even) {\n        & > div {\n          grid-template-areas: 'media content';\n          grid-template-columns: ${p.theme.sectionFeatureMediaWidthPercent}% minmax(\n              ${100 - p.theme.sectionFeatureMediaWidthPercent}%,\n              ${p.theme.sectionFeatureContentMaxWidth}em\n            );\n        }\n      }\n    }\n  `;\n\ninterface StyledSectionProps {\n  hasMedia: boolean;\n}\nconst StyledSection = styled(\n  Section,\n  omitEmotionProps('hasMedia')\n)<StyledSectionProps>`\n  ${sectionHasMediaStyles};\n`;\n\n/**\n * The section for describing an app feature.\n */\nconst SectionFeature = forwardRef<HTMLElement, SectionFeatureProps>(\n  ({ media, children, ...rest }, ref) => (\n    <StyledSection hasMedia={!!media} {...rest} ref={ref}>\n      <Container hasMedia={!!media}>\n        <Content>{children}</Content>\n        {media && <Media>{media}</Media>}\n      </Container>\n    </StyledSection>\n  )\n);\n\nSectionFeature.displayName = 'SectionFeature';\n\nexport default SectionFeature;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,OAAP,MAAsC,YAAtC;;AAUA,MAAMC,uBAAuB,GAAIC,CAAD,IAC9BA,CAAC,CAACC,QAAF,IACAP,GAAI;AACN;AACA;AACA;AACA;AACA;AACA,oBAAoBM,CAAC,CAACE,KAAF,CAAQC,oBAAqB;AACjD;AACA,MAAMP,CAAC,CAACQ,GAAF,CAAMC,EAAG;AACf;AACA;AACA,YAAY,MAAML,CAAC,CAACE,KAAF,CAAQI,+BAAgC;AAC1D,YAAYN,CAAC,CAACE,KAAF,CAAQK,6BAA8B;AAClD;AACA,UAAUP,CAAC,CAACE,KAAF,CAAQI,+BAAgC;AAClD;AACA;AACA,yBAAyBN,CAAC,CAACE,KAAF,CAAQM,8BAA+B;AAChE,uBAAuBR,CAAC,CAACE,KAAF,CAAQM,8BAAR,GAAyC,CAAE;AAClE;AACA,GAtBA;;AAwBA,MAAMC,0BAA0B,GAAIT,CAAD,IACjC,CAACA,CAAC,CAACC,QAAH,IACAP,GAAI;AACN,iBAAiBM,CAAC,CAACE,KAAF,CAAQK,6BAA8B;AACvD,GAJA;;AASA,MAAMG,SAAS,GAAGjB,MAAM,CAAC,KAAD,EAAQE,gBAAgB,CAAC,UAAD,CAAxB,CAAsD;AAC9E,WAAYK,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACE,KAAF,CAAQS,SAAT,CAAoB;AACzC,IAAIZ,uBAAwB;AAC5B,IAAIU,0BAA2B;AAC/B,CAJA;AAMA,MAAMG,OAAO,GAAGnB,MAAM,CAACoB,GAAI;AAC3B;AACA;AACA,CAHA;AAKA,MAAMC,KAAK,GAAGrB,MAAM,CAACoB,GAAI;AACzB;AACA;AACA,CAHA;;AAKA,MAAME,qBAAqB,GAAIf,CAAD,IAC5BA,CAAC,CAACC,QAAF,IACAP,GAAI;AACN,MAAME,CAAC,CAACQ,GAAF,CAAMC,EAAG;AACf;AACA;AACA;AACA,mCAAmCL,CAAC,CAACE,KAAF,CAAQI,+BAAgC;AAC3E,gBAAgB,MAAMN,CAAC,CAACE,KAAF,CAAQI,+BAAgC;AAC9D,gBAAgBN,CAAC,CAACE,KAAF,CAAQK,6BAA8B;AACtD;AACA;AACA;AACA;AACA,GAdA;;AAmBA,MAAMS,aAAa,GAAGvB,MAAM,CAC1BK,OAD0B,EAE1BH,gBAAgB,CAAC,UAAD,CAFU,CAGN;AACtB,IAAIoB,qBAAsB;AAC1B,CALA;AAOA;AACA;AACA;;AACA,MAAME,cAAc,gBAAGzB,UAAU,CAC/B,CAAC;EAAE0B,KAAF;EAASC,QAAT;EAAmB,GAAGC;AAAtB,CAAD,EAA+BC,GAA/B,kBACE,oBAAC,aAAD;EAAe,QAAQ,EAAE,CAAC,CAACH;AAA3B,GAAsCE,IAAtC;EAA4C,GAAG,EAAEC;AAAjD,iBACE,oBAAC,SAAD;EAAW,QAAQ,EAAE,CAAC,CAACH;AAAvB,gBACE,oBAAC,OAAD,QAAUC,QAAV,CADF,EAEGD,KAAK,iBAAI,oBAAC,KAAD,QAAQA,KAAR,CAFZ,CADF,CAF6B,CAAjC;AAWAD,cAAc,CAACK,WAAf,GAA6B,gBAA7B;AAEA,eAAeL,cAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","css","omitEmotionProps","m","clr","Section","containerHasMediaStyles","p","hasMedia","theme","sectionFeatureRowGap","min","md","sectionFeatureMediaWidthPercent","sectionFeatureContentMaxWidth","sectionFeatureColumnGapPercent","containerNotHasMediaStyles","Container","colorText","Content","div","Media","sectionHasMediaStyles","StyledSection","SectionFeature","media","children","rest","ref","displayName"],"sources":["../../../src/SectionFeature/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport Section, { SectionProps } from '../Section';\n\nexport interface SectionFeatureProps extends SectionProps {\n  /**\n   * The media component. For example, an image.\n   * @default undefined\n   */\n  media?: React.ReactElement;\n}\n\nconst containerHasMediaStyles = (p) =>\n  p.hasMedia &&\n  css`\n    display: grid;\n\n    grid-template-columns: 1fr;\n    grid-template-rows: auto auto;\n    grid-template-areas: 'content' 'media';\n    grid-row-gap: ${p.theme.sectionFeatureRowGap}em;\n\n    ${m.min.md} {\n      grid-template-columns:\n        minmax(\n          ${100 - p.theme.sectionFeatureMediaWidthPercent}%,\n          ${p.theme.sectionFeatureContentMaxWidth}em\n        )\n        ${p.theme.sectionFeatureMediaWidthPercent}%;\n      grid-template-rows: 1fr;\n      grid-template-areas: 'content media';\n      grid-column-gap: ${p.theme.sectionFeatureColumnGapPercent}%;\n      padding-right: ${p.theme.sectionFeatureColumnGapPercent * 2}%;\n    }\n  `;\n\nconst containerNotHasMediaStyles = (p) =>\n  !p.hasMedia &&\n  css`\n    max-width: ${p.theme.sectionFeatureContentMaxWidth}em;\n  `;\n\ninterface ContainerProps {\n  hasMedia: boolean;\n}\nconst Container = styled('div', omitEmotionProps('hasMedia'))<ContainerProps>`\n  color: ${(p) => clr(p.theme.colorText)};\n  ${containerHasMediaStyles};\n  ${containerNotHasMediaStyles};\n`;\n\nconst Content = styled.div`\n  grid-area: content;\n  align-self: center;\n`;\n\nconst Media = styled.div`\n  grid-area: media;\n  align-self: center;\n`;\n\nconst sectionHasMediaStyles = (p) =>\n  p.hasMedia &&\n  css`\n    ${m.min.md} {\n      &:nth-of-type(even) {\n        & > div {\n          grid-template-areas: 'media content';\n          grid-template-columns: ${p.theme.sectionFeatureMediaWidthPercent}% minmax(\n              ${100 - p.theme.sectionFeatureMediaWidthPercent}%,\n              ${p.theme.sectionFeatureContentMaxWidth}em\n            );\n        }\n      }\n    }\n  `;\n\ninterface StyledSectionProps {\n  hasMedia: boolean;\n}\nconst StyledSection = styled(\n  Section,\n  omitEmotionProps('hasMedia')\n)<StyledSectionProps>`\n  ${sectionHasMediaStyles};\n`;\n\n/**\n * The section for describing an app feature.\n */\nconst SectionFeature = forwardRef<HTMLElement, SectionFeatureProps>(\n  ({ media, children, ...rest }, ref) => (\n    <StyledSection hasMedia={!!media} {...rest} ref={ref}>\n      <Container hasMedia={!!media}>\n        <Content>{children}</Content>\n        {media && <Media>{media}</Media>}\n      </Container>\n    </StyledSection>\n  )\n);\n\nSectionFeature.displayName = 'SectionFeature';\n\nexport default SectionFeature;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,OAAO,MAAwB,YAAY;AAUlD,MAAMC,uBAAuB,GAAIC,CAAC,IAChCA,CAAC,CAACC,QAAQ,IACVP,GAAI;AACN;AACA;AACA;AACA;AACA;AACA,oBAAoBM,CAAC,CAACE,KAAK,CAACC,oBAAqB;AACjD;AACA,MAAMP,CAAC,CAACQ,GAAG,CAACC,EAAG;AACf;AACA;AACA,YAAY,GAAG,GAAGL,CAAC,CAACE,KAAK,CAACI,+BAAgC;AAC1D,YAAYN,CAAC,CAACE,KAAK,CAACK,6BAA8B;AAClD;AACA,UAAUP,CAAC,CAACE,KAAK,CAACI,+BAAgC;AAClD;AACA;AACA,yBAAyBN,CAAC,CAACE,KAAK,CAACM,8BAA+B;AAChE,uBAAuBR,CAAC,CAACE,KAAK,CAACM,8BAA8B,GAAG,CAAE;AAClE;AACA,GAAG;AAEH,MAAMC,0BAA0B,GAAIT,CAAC,IACnC,CAACA,CAAC,CAACC,QAAQ,IACXP,GAAI;AACN,iBAAiBM,CAAC,CAACE,KAAK,CAACK,6BAA8B;AACvD,GAAG;AAKH,MAAMG,SAAS,GAAGjB,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,UAAU,CAAC,CAAkB;AAC9E,WAAYK,CAAC,IAAKH,GAAG,CAACG,CAAC,CAACE,KAAK,CAACS,SAAS,CAAE;AACzC,IAAIZ,uBAAwB;AAC5B,IAAIU,0BAA2B;AAC/B,CAAC;AAED,MAAMG,OAAO,GAAGnB,MAAM,CAACoB,GAAI;AAC3B;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGrB,MAAM,CAACoB,GAAI;AACzB;AACA;AACA,CAAC;AAED,MAAME,qBAAqB,GAAIf,CAAC,IAC9BA,CAAC,CAACC,QAAQ,IACVP,GAAI;AACN,MAAME,CAAC,CAACQ,GAAG,CAACC,EAAG;AACf;AACA;AACA;AACA,mCAAmCL,CAAC,CAACE,KAAK,CAACI,+BAAgC;AAC3E,gBAAgB,GAAG,GAAGN,CAAC,CAACE,KAAK,CAACI,+BAAgC;AAC9D,gBAAgBN,CAAC,CAACE,KAAK,CAACK,6BAA8B;AACtD;AACA;AACA;AACA;AACA,GAAG;AAKH,MAAMS,aAAa,GAAGvB,MAAM,CAC1BK,OAAO,EACPH,gBAAgB,CAAC,UAAU,CAAC,CACR;AACtB,IAAIoB,qBAAsB;AAC1B,CAAC;;AAED;AACA;AACA;AACA,MAAME,cAAc,gBAAGzB,UAAU,CAC/B,CAAC;EAAE0B,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChC,oBAAC,aAAa;EAAC,QAAQ,EAAE,CAAC,CAACH;AAAM,GAAKE,IAAI;EAAE,GAAG,EAAEC;AAAI,iBACnD,oBAAC,SAAS;EAAC,QAAQ,EAAE,CAAC,CAACH;AAAM,gBAC3B,oBAAC,OAAO,QAAEC,QAAQ,CAAW,EAC5BD,KAAK,iBAAI,oBAAC,KAAK,QAAEA,KAAK,CAAS,CACtB,CAEf,CACF;AAEDD,cAAc,CAACK,WAAW,GAAG,gBAAgB;AAE7C,eAAeL,cAAc"}

package/dist/esm/emotion.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n  // eslint-disable-next-line @typescript-eslint/no-empty-interface\n  export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAP"}
+{"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n  // eslint-disable-next-line @typescript-eslint/no-empty-interface\n  export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB"}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","PageContent","Section","SectionFeature"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as PageContent } from './PageContent';\nexport { default as Section } from './Section';\nexport { default as SectionFeature } from './SectionFeature';\n\nexport * from './PageContent';\nexport * from './Section';\nexport * from './SectionFeature';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASD,OAAO,IAAIE,OAApB,QAAmC,WAAnC;AACA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AAEA,cAAc,eAAd;AACA,cAAc,WAAd;AACA,cAAc,kBAAd"}
+{"version":3,"file":"index.js","names":["default","PageContent","Section","SectionFeature"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as PageContent } from './PageContent';\nexport { default as Section } from './Section';\nexport { default as SectionFeature } from './SectionFeature';\n\nexport * from './PageContent';\nexport * from './Section';\nexport * from './SectionFeature';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,cAAc,QAAQ,kBAAkB;AAE5D,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,kBAAkB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/website",
-  "version": "1.0.158",
+  "version": "1.0.160",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.156",
+    "@os-design/core": "^1.0.158",
     "@os-design/media": "^1.0.15",
     "@os-design/styles": "^1.0.39",
     "@os-design/theming": "^1.0.37",
@@ -46,5 +46,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "5a2a0d8ca15882259f4f84a52faca3e43f79841b"
+  "gitHead": "1f7502d2714949d3dabaa8e103a4e315fda8e2f8"
 }