@os-design/website 1.0.136 → 1.0.139
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/PageContent/index.js.map +1 -1
- package/dist/cjs/Section/index.js.map +1 -1
- package/dist/cjs/SectionFeature/index.js.map +1 -1
- package/dist/cjs/emotion.d.js.map +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/PageContent/index.js.map +1 -1
- package/dist/esm/Section/index.js.map +1 -1
- package/dist/esm/SectionFeature/index.js.map +1 -1
- package/dist/esm/emotion.d.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"}
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/website",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.139",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"access": "public"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@os-design/core": "^1.0.
|
|
31
|
+
"@os-design/core": "^1.0.137",
|
|
32
32
|
"@os-design/media": "^1.0.11",
|
|
33
33
|
"@os-design/styles": "^1.0.32",
|
|
34
34
|
"@os-design/theming": "^1.0.30",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"react": ">=18",
|
|
46
46
|
"react-dom": ">=18"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "d739445b89862f1b3cdea6d1591a4b10bf17b078"
|
|
49
49
|
}
|