@os-design/website 1.0.261 → 1.0.263
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/@types/emotion.d.js +1 -0
- package/dist/{types/PageContent → PageContent}/index.d.ts +5 -3
- package/dist/PageContent/index.d.ts.map +1 -0
- package/dist/{esm/PageContent → PageContent}/index.js +1 -2
- package/dist/Section/index.d.ts +31 -0
- package/dist/Section/index.d.ts.map +1 -0
- package/dist/{esm/Section → Section}/index.js +21 -18
- package/dist/{types/SectionFeature → SectionFeature}/index.d.ts +8 -1
- package/dist/SectionFeature/index.d.ts.map +1 -0
- package/dist/{esm/SectionFeature → SectionFeature}/index.js +15 -10
- package/dist/index.d.ts.map +1 -0
- package/dist/{esm/index.js → index.js} +1 -2
- package/package.json +13 -14
- package/src/@types/emotion.d.ts +1 -1
- package/src/PageContent/index.tsx +1 -1
- package/src/Section/index.tsx +3 -3
- package/src/SectionFeature/index.tsx +1 -1
- package/dist/cjs/@types/emotion.d.js +0 -4
- package/dist/cjs/@types/emotion.d.js.map +0 -1
- package/dist/cjs/PageContent/index.js +0 -17
- package/dist/cjs/PageContent/index.js.map +0 -1
- package/dist/cjs/Section/index.js +0 -93
- package/dist/cjs/Section/index.js.map +0 -1
- package/dist/cjs/SectionFeature/index.js +0 -57
- package/dist/cjs/SectionFeature/index.js.map +0 -1
- package/dist/cjs/index.js +0 -68
- package/dist/cjs/index.js.map +0 -1
- package/dist/esm/@types/emotion.d.js +0 -2
- package/dist/esm/@types/emotion.d.js.map +0 -1
- package/dist/esm/PageContent/index.js.map +0 -1
- package/dist/esm/Section/index.js.map +0 -1
- package/dist/esm/SectionFeature/index.js.map +0 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/types/PageContent/index.d.ts.map +0 -1
- package/dist/types/Section/index.d.ts +0 -13
- package/dist/types/Section/index.d.ts.map +0 -1
- package/dist/types/SectionFeature/index.d.ts.map +0 -1
- package/dist/types/index.d.ts.map +0 -1
- /package/dist/{types/index.d.ts → index.d.ts} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@emotion/react';
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
import { PageContentProps as BasePageContentProps } from '@os-design/core';
|
|
1
|
+
import { type PageContentProps as BasePageContentProps } from '@os-design/core';
|
|
3
2
|
export type PageContentProps = BasePageContentProps;
|
|
3
|
+
/**
|
|
4
|
+
* The page content of the website page.
|
|
5
|
+
*/
|
|
4
6
|
declare const PageContent: import("@emotion/styled").StyledComponent<BasePageContentProps & import("react").RefAttributes<HTMLElement> & {
|
|
5
|
-
theme?: import("@emotion/react").Theme
|
|
7
|
+
theme?: import("@emotion/react").Theme;
|
|
6
8
|
}, {}, {}>;
|
|
7
9
|
export default PageContent;
|
|
8
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageContent/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,gBAAgB,IAAI,oBAAoB,EAC9C,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAEpD;;GAEG;AACH,QAAA,MAAM,WAAW;;UAEhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type ImageProps } from '@os-design/core';
|
|
2
|
+
import { type WithSize } from '@os-design/styles';
|
|
3
|
+
type JsxSectionProps = Omit<JSX.IntrinsicElements['section'], 'ref'>;
|
|
4
|
+
export interface SectionProps extends JsxSectionProps, WithSize {
|
|
5
|
+
/**
|
|
6
|
+
* The URL of the background image.
|
|
7
|
+
* @default undefined
|
|
8
|
+
*/
|
|
9
|
+
bgUrl?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Props of the background image.
|
|
12
|
+
* @default undefined
|
|
13
|
+
*/
|
|
14
|
+
bgProps?: Omit<ImageProps, 'url' | 'cover'>;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the content has a limited width.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
limitedWidth?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Whether the content is centered.
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
centered?: boolean;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* The base section for the content.
|
|
28
|
+
*/
|
|
29
|
+
declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
|
|
30
|
+
export default Section;
|
|
31
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK9D,KAAK,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,CAAC;AACrE,MAAM,WAAW,YAAa,SAAQ,eAAe,EAAE,QAAQ;IAC7D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC;IAC5C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuED;;GAEG;AACH,QAAA,MAAM,OAAO,sGA2CZ,CAAC;AAIF,eAAe,OAAO,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
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); }
|
|
2
1
|
import { css } from '@emotion/react';
|
|
3
2
|
import styled from '@emotion/styled';
|
|
4
3
|
import { Image } from '@os-design/core';
|
|
@@ -6,7 +5,8 @@ import { m } from '@os-design/media';
|
|
|
6
5
|
import { sizeStyles } from '@os-design/styles';
|
|
7
6
|
import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
|
|
8
7
|
import { omitEmotionProps } from '@os-design/utils';
|
|
9
|
-
import
|
|
8
|
+
import { forwardRef } from 'react';
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
10
|
const BG_IMAGE_CLASS_NAME = 'section-bg-image';
|
|
11
11
|
const hasBgStyles = p => p.hasBg && css`
|
|
12
12
|
& > *:not(.${BG_IMAGE_CLASS_NAME}) {
|
|
@@ -76,24 +76,27 @@ const Section = /*#__PURE__*/forwardRef(({
|
|
|
76
76
|
const {
|
|
77
77
|
overrides
|
|
78
78
|
} = useTheme();
|
|
79
|
-
const section = /*#__PURE__*/
|
|
79
|
+
const section = /*#__PURE__*/_jsxs(Container, {
|
|
80
80
|
hasBg: !!bgUrl,
|
|
81
|
-
size: size
|
|
82
|
-
|
|
83
|
-
ref: ref
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
81
|
+
size: size,
|
|
82
|
+
...rest,
|
|
83
|
+
ref: ref,
|
|
84
|
+
children: [limitedWidth ? /*#__PURE__*/_jsx(LimitedWidth, {
|
|
85
|
+
centered: centered,
|
|
86
|
+
children: children
|
|
87
|
+
}) : children, bgUrl && /*#__PURE__*/_jsx(BackgroundImage, {
|
|
88
|
+
url: bgUrl,
|
|
89
|
+
cover: true,
|
|
90
|
+
className: [bgClassName, BG_IMAGE_CLASS_NAME].filter(i => i).join(' '),
|
|
91
|
+
...restBgProps
|
|
92
|
+
})]
|
|
93
|
+
});
|
|
91
94
|
if (!bgUrl) return section;
|
|
92
|
-
return /*#__PURE__*/
|
|
95
|
+
return /*#__PURE__*/_jsx(ThemeOverrider, {
|
|
93
96
|
activeTheme: "dark",
|
|
94
|
-
overrides: overrides
|
|
95
|
-
|
|
97
|
+
overrides: overrides,
|
|
98
|
+
children: section
|
|
99
|
+
});
|
|
96
100
|
});
|
|
97
101
|
Section.displayName = 'Section';
|
|
98
|
-
export default Section;
|
|
99
|
-
//# sourceMappingURL=index.js.map
|
|
102
|
+
export default Section;
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SectionProps } from '../Section';
|
|
2
|
+
import { type SectionProps } from '../Section';
|
|
3
3
|
export interface SectionFeatureProps extends SectionProps {
|
|
4
|
+
/**
|
|
5
|
+
* The media component. For example, an image.
|
|
6
|
+
* @default undefined
|
|
7
|
+
*/
|
|
4
8
|
media?: React.ReactElement;
|
|
5
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* The section for describing an app feature.
|
|
12
|
+
*/
|
|
6
13
|
declare const SectionFeature: React.ForwardRefExoticComponent<SectionFeatureProps & React.RefAttributes<HTMLElement>>;
|
|
7
14
|
export default SectionFeature;
|
|
8
15
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SectionFeature/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAExD,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC5B;AA6ED;;GAEG;AACH,QAAA,MAAM,cAAc,yFASnB,CAAC;AAIF,eAAe,cAAc,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
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); }
|
|
2
1
|
import { css } from '@emotion/react';
|
|
3
2
|
import styled from '@emotion/styled';
|
|
4
3
|
import { m } from '@os-design/media';
|
|
@@ -6,6 +5,7 @@ import { clr } from '@os-design/theming';
|
|
|
6
5
|
import { omitEmotionProps } from '@os-design/utils';
|
|
7
6
|
import React, { forwardRef } from 'react';
|
|
8
7
|
import Section from '../Section';
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
9
|
const containerHasMediaStyles = p => p.hasMedia && css`
|
|
10
10
|
display: grid;
|
|
11
11
|
|
|
@@ -67,13 +67,18 @@ const SectionFeature = /*#__PURE__*/forwardRef(({
|
|
|
67
67
|
media,
|
|
68
68
|
children,
|
|
69
69
|
...rest
|
|
70
|
-
}, ref) => /*#__PURE__*/
|
|
71
|
-
hasMedia: !!media
|
|
72
|
-
|
|
73
|
-
ref: ref
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
}, ref) => /*#__PURE__*/_jsx(StyledSection, {
|
|
71
|
+
hasMedia: !!media,
|
|
72
|
+
...rest,
|
|
73
|
+
ref: ref,
|
|
74
|
+
children: /*#__PURE__*/_jsxs(Container, {
|
|
75
|
+
hasMedia: !!media,
|
|
76
|
+
children: [/*#__PURE__*/_jsx(Content, {
|
|
77
|
+
children: children
|
|
78
|
+
}), media && /*#__PURE__*/_jsx(Media, {
|
|
79
|
+
children: media
|
|
80
|
+
})]
|
|
81
|
+
})
|
|
82
|
+
}));
|
|
77
83
|
SectionFeature.displayName = 'SectionFeature';
|
|
78
|
-
export default SectionFeature;
|
|
79
|
-
//# sourceMappingURL=index.js.map
|
|
84
|
+
export default SectionFeature;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}
|
|
@@ -3,5 +3,4 @@ export { default as Section } from './Section';
|
|
|
3
3
|
export { default as SectionFeature } from './SectionFeature';
|
|
4
4
|
export * from './PageContent';
|
|
5
5
|
export * from './Section';
|
|
6
|
-
export * from './SectionFeature';
|
|
7
|
-
//# sourceMappingURL=index.js.map
|
|
6
|
+
export * from './SectionFeature';
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/website",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.263",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"types": "dist/
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"src",
|
|
@@ -20,9 +20,8 @@
|
|
|
20
20
|
"sideEffects": false,
|
|
21
21
|
"scripts": {
|
|
22
22
|
"clean": "rimraf dist",
|
|
23
|
-
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist
|
|
24
|
-
"build:
|
|
25
|
-
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
|
|
23
|
+
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist",
|
|
24
|
+
"build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
|
|
26
25
|
"build": "yarn clean && npm-run-all 'build:*'",
|
|
27
26
|
"ncu": "ncu -u"
|
|
28
27
|
},
|
|
@@ -30,16 +29,16 @@
|
|
|
30
29
|
"access": "public"
|
|
31
30
|
},
|
|
32
31
|
"dependencies": {
|
|
33
|
-
"@os-design/core": "^1.0.
|
|
34
|
-
"@os-design/media": "^1.0.
|
|
35
|
-
"@os-design/styles": "^1.0.
|
|
36
|
-
"@os-design/theming": "^1.0.
|
|
37
|
-
"@os-design/utils": "^1.0.
|
|
32
|
+
"@os-design/core": "^1.0.256",
|
|
33
|
+
"@os-design/media": "^1.0.26",
|
|
34
|
+
"@os-design/styles": "^1.0.57",
|
|
35
|
+
"@os-design/theming": "^1.0.53",
|
|
36
|
+
"@os-design/utils": "^1.0.77"
|
|
38
37
|
},
|
|
39
38
|
"devDependencies": {
|
|
40
39
|
"@emotion/react": ">=11",
|
|
41
40
|
"@emotion/styled": ">=11",
|
|
42
|
-
"@os-design/icons": "^1.0.
|
|
41
|
+
"@os-design/icons": "^1.0.60"
|
|
43
42
|
},
|
|
44
43
|
"peerDependencies": {
|
|
45
44
|
"@emotion/react": ">=11",
|
|
@@ -47,5 +46,5 @@
|
|
|
47
46
|
"react": ">=18",
|
|
48
47
|
"react-dom": ">=18"
|
|
49
48
|
},
|
|
50
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "86a83e87297a07afe132782ca2c95023b7139276"
|
|
51
50
|
}
|
package/src/@types/emotion.d.ts
CHANGED
|
@@ -2,6 +2,6 @@ import '@emotion/react';
|
|
|
2
2
|
import { Theme as BaseTheme } from '@os-design/theming';
|
|
3
3
|
|
|
4
4
|
declare module '@emotion/react' {
|
|
5
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
6
6
|
export interface Theme extends BaseTheme {}
|
|
7
7
|
}
|
package/src/Section/index.tsx
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
|
-
import { Image, ImageProps } from '@os-design/core';
|
|
3
|
+
import { Image, type ImageProps } from '@os-design/core';
|
|
4
4
|
import { m } from '@os-design/media';
|
|
5
|
-
import { sizeStyles, WithSize } from '@os-design/styles';
|
|
5
|
+
import { sizeStyles, type WithSize } from '@os-design/styles';
|
|
6
6
|
import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
|
|
7
7
|
import { omitEmotionProps } from '@os-design/utils';
|
|
8
|
-
import
|
|
8
|
+
import { forwardRef } from 'react';
|
|
9
9
|
|
|
10
10
|
type JsxSectionProps = Omit<JSX.IntrinsicElements['section'], 'ref'>;
|
|
11
11
|
export interface SectionProps extends JsxSectionProps, WithSize {
|
|
@@ -4,7 +4,7 @@ import { m } from '@os-design/media';
|
|
|
4
4
|
import { clr } from '@os-design/theming';
|
|
5
5
|
import { omitEmotionProps } from '@os-design/utils';
|
|
6
6
|
import React, { forwardRef } from 'react';
|
|
7
|
-
import Section, { SectionProps } from '../Section';
|
|
7
|
+
import Section, { type SectionProps } from '../Section';
|
|
8
8
|
|
|
9
9
|
export interface SectionFeatureProps extends SectionProps {
|
|
10
10
|
/**
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"emotion.d.js","names":["require"],"sources":["../../../src/@types/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":";;AAAAA,OAAA","ignoreList":[]}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = void 0;
|
|
7
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
8
|
-
var _core = require("@os-design/core");
|
|
9
|
-
var _templateObject;
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
12
|
-
/**
|
|
13
|
-
* The page content of the website page.
|
|
14
|
-
*/
|
|
15
|
-
var PageContent = (0, _styled["default"])(_core.PageContent)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0 !important;\n"])));
|
|
16
|
-
var _default = exports["default"] = PageContent;
|
|
17
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_core","_templateObject","obj","__esModule","_taggedTemplateLiteral","strings","raw","slice","Object","freeze","defineProperties","value","PageContent","styled","BasePageContent","_default","exports"],"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,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAGyB,IAAAE,eAAA;AAAA,SAAAH,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAAC,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAE,gBAAA,CAAAL,OAAA,IAAAC,GAAA,IAAAK,KAAA,EAAAH,MAAA,CAAAC,MAAA,CAAAH,GAAA;AAIzB;AACA;AACA;AACA,IAAMM,WAAW,GAAG,IAAAC,kBAAM,EAACC,iBAAe,CAAC,CAAAb,eAAA,KAAAA,eAAA,GAAAG,sBAAA,oCAE1C;AAAC,IAAAW,QAAA,GAAAC,OAAA,cAEaJ,WAAW","ignoreList":[]}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _react = require("@emotion/react");
|
|
9
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
10
|
-
var _core = require("@os-design/core");
|
|
11
|
-
var _media = require("@os-design/media");
|
|
12
|
-
var _styles = require("@os-design/styles");
|
|
13
|
-
var _theming = require("@os-design/theming");
|
|
14
|
-
var _utils = require("@os-design/utils");
|
|
15
|
-
var _react2 = _interopRequireWildcard(require("react"));
|
|
16
|
-
var _excluded = ["bgUrl", "bgProps", "limitedWidth", "centered", "size", "children"],
|
|
17
|
-
_excluded2 = ["className"];
|
|
18
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
19
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
20
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
21
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
22
|
-
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); }
|
|
23
|
-
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; }
|
|
24
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
|
|
25
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
26
|
-
var BG_IMAGE_CLASS_NAME = 'section-bg-image';
|
|
27
|
-
var hasBgStyles = function hasBgStyles(p) {
|
|
28
|
-
return p.hasBg && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n & > *:not(.", ") {\n z-index: 1;\n }\n "])), BG_IMAGE_CLASS_NAME);
|
|
29
|
-
};
|
|
30
|
-
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) {
|
|
31
|
-
return p.theme.sectionPaddingVertical;
|
|
32
|
-
}, function (p) {
|
|
33
|
-
return p.theme.sectionPaddingHorizontal[0];
|
|
34
|
-
}, _media.m.min.sm, function (p) {
|
|
35
|
-
return p.theme.sectionPaddingVertical;
|
|
36
|
-
}, function (p) {
|
|
37
|
-
return p.theme.sectionPaddingHorizontal[1];
|
|
38
|
-
}, function (p) {
|
|
39
|
-
return (0, _theming.clr)(p.theme.colorText);
|
|
40
|
-
}, hasBgStyles, _styles.sizeStyles);
|
|
41
|
-
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) {
|
|
42
|
-
return p.theme.sectionBgImageBrightness;
|
|
43
|
-
});
|
|
44
|
-
var centeredStyles = function centeredStyles(p) {
|
|
45
|
-
return p.centered && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n "])));
|
|
46
|
-
};
|
|
47
|
-
var LimitedWidth = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('centered'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n max-width: ", "em;\n ", ";\n"])), function (p) {
|
|
48
|
-
return p.theme.sectionMaxWidth;
|
|
49
|
-
}, centeredStyles);
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* The base section for the content.
|
|
53
|
-
*/
|
|
54
|
-
var Section = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
|
|
55
|
-
var bgUrl = _ref.bgUrl,
|
|
56
|
-
_ref$bgProps = _ref.bgProps,
|
|
57
|
-
bgProps = _ref$bgProps === void 0 ? {
|
|
58
|
-
defaultSize: 1024
|
|
59
|
-
} : _ref$bgProps,
|
|
60
|
-
_ref$limitedWidth = _ref.limitedWidth,
|
|
61
|
-
limitedWidth = _ref$limitedWidth === void 0 ? false : _ref$limitedWidth,
|
|
62
|
-
_ref$centered = _ref.centered,
|
|
63
|
-
centered = _ref$centered === void 0 ? false : _ref$centered,
|
|
64
|
-
size = _ref.size,
|
|
65
|
-
children = _ref.children,
|
|
66
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
67
|
-
var bgClassName = bgProps.className,
|
|
68
|
-
restBgProps = _objectWithoutProperties(bgProps, _excluded2);
|
|
69
|
-
var _useTheme = (0, _theming.useTheme)(),
|
|
70
|
-
overrides = _useTheme.overrides;
|
|
71
|
-
var section = /*#__PURE__*/_react2["default"].createElement(Container, _extends({
|
|
72
|
-
hasBg: !!bgUrl,
|
|
73
|
-
size: size
|
|
74
|
-
}, rest, {
|
|
75
|
-
ref: ref
|
|
76
|
-
}), limitedWidth ? /*#__PURE__*/_react2["default"].createElement(LimitedWidth, {
|
|
77
|
-
centered: centered
|
|
78
|
-
}, children) : children, bgUrl && /*#__PURE__*/_react2["default"].createElement(BackgroundImage, _extends({
|
|
79
|
-
url: bgUrl,
|
|
80
|
-
cover: true,
|
|
81
|
-
className: [bgClassName, BG_IMAGE_CLASS_NAME].filter(function (i) {
|
|
82
|
-
return i;
|
|
83
|
-
}).join(' ')
|
|
84
|
-
}, restBgProps)));
|
|
85
|
-
if (!bgUrl) return section;
|
|
86
|
-
return /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
|
|
87
|
-
activeTheme: "dark",
|
|
88
|
-
overrides: overrides
|
|
89
|
-
}, section);
|
|
90
|
-
});
|
|
91
|
-
Section.displayName = 'Section';
|
|
92
|
-
var _default = exports["default"] = Section;
|
|
93
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_core","_media","_styles","_theming","_utils","_react2","_interopRequireWildcard","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","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","ref","bgUrl","_ref$bgProps","bgProps","defaultSize","_ref$limitedWidth","limitedWidth","_ref$centered","size","children","rest","bgClassName","className","restBgProps","_useTheme","useTheme","overrides","section","createElement","url","cover","filter","join","ThemeOverrider","activeTheme","displayName","_default","exports"],"sources":["../../../src/Section/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Image, ImageProps } from '@os-design/core';\nimport { m } from '@os-design/media';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAC,uBAAA,CAAAT,OAAA;AAA0C,IAAAU,SAAA;EAAAC,UAAA;AAAA,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAxB,uBAAAmC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAf,UAAA,GAAAe,GAAA,gBAAAA,GAAA;AAAA,SAAAC,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAN,CAAA,MAAAA,CAAA,GAAAO,SAAA,CAAAC,MAAA,EAAAR,CAAA,UAAAS,MAAA,GAAAF,SAAA,CAAAP,CAAA,YAAAU,GAAA,IAAAD,MAAA,QAAAf,MAAA,CAAAiB,SAAA,CAAAb,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAC,GAAA,KAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAJ,MAAA,YAAAH,QAAA,CAAAS,KAAA,OAAAL,SAAA;AAAA,SAAAM,yBAAAJ,MAAA,EAAAK,QAAA,QAAAL,MAAA,yBAAAH,MAAA,GAAAS,6BAAA,CAAAN,MAAA,EAAAK,QAAA,OAAAJ,GAAA,EAAAV,CAAA,MAAAN,MAAA,CAAAsB,qBAAA,QAAAC,gBAAA,GAAAvB,MAAA,CAAAsB,qBAAA,CAAAP,MAAA,QAAAT,CAAA,MAAAA,CAAA,GAAAiB,gBAAA,CAAAT,MAAA,EAAAR,CAAA,MAAAU,GAAA,GAAAO,gBAAA,CAAAjB,CAAA,OAAAc,QAAA,CAAAI,OAAA,CAAAR,GAAA,uBAAAhB,MAAA,CAAAiB,SAAA,CAAAQ,oBAAA,CAAApB,IAAA,CAAAU,MAAA,EAAAC,GAAA,aAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAJ,MAAA;AAAA,SAAAS,8BAAAN,MAAA,EAAAK,QAAA,QAAAL,MAAA,yBAAAH,MAAA,gBAAAI,GAAA,IAAAD,MAAA,QAAAf,MAAA,CAAAiB,SAAA,CAAAb,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAC,GAAA,SAAAI,QAAA,CAAAI,OAAA,CAAAR,GAAA,kBAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAJ,MAAA;AAAA,SAAAc,uBAAAC,OAAA,EAAAC,GAAA,SAAAA,GAAA,IAAAA,GAAA,GAAAD,OAAA,CAAAE,KAAA,cAAA7B,MAAA,CAAA8B,MAAA,CAAA9B,MAAA,CAAA+B,gBAAA,CAAAJ,OAAA,IAAAC,GAAA,IAAAI,KAAA,EAAAhC,MAAA,CAAA8B,MAAA,CAAAF,GAAA;AA0B1C,IAAMK,mBAAmB,GAAG,kBAAkB;AAE9C,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,CAAC;EAAA,OACpBA,CAAC,CAACC,KAAK,QACPC,UAAG,EAAAtD,eAAA,KAAAA,eAAA,GAAA2C,sBAAA,+DACYO,mBAAmB,CAGjC;AAAA;AAKH,IAAMK,SAAS,GAAG,IAAAC,kBAAM,EACtB,SAAS,EACT,IAAAC,uBAAgB,EAAC,OAAO,EAAE,MAAM,CAClC,CAAC,CAAAxD,gBAAA,KAAAA,gBAAA,GAAA0C,sBAAA,oOAOY,UAACS,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,CAAAlE,gBAAA,KAAAA,gBAAA,GAAAyC,sBAAA,wKASd,UAACS,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACW,wBAAwB;AAAA,EAC7D;AAED,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAIlB,CAAC;EAAA,OACvBA,CAAC,CAACmB,QAAQ,QACVjB,UAAG,EAAAnD,gBAAA,KAAAA,gBAAA,GAAAwC,sBAAA,gHAKF;AAAA;AAKH,IAAM6B,YAAY,GAAG,IAAAhB,kBAAM,EACzB,KAAK,EACL,IAAAC,uBAAgB,EAAC,UAAU,CAC7B,CAAC,CAAArD,gBAAA,KAAAA,gBAAA,GAAAuC,sBAAA,0DAEc,UAACS,CAAC;EAAA,OAAKA,CAAC,CAACM,KAAK,CAACe,eAAe;AAAA,GACzCH,cAAc,CACjB;;AAED;AACA;AACA;AACA,IAAMI,OAAO,gBAAG,IAAAC,kBAAU,EACxB,UAAAC,IAAA,EAUEC,GAAG,EACA;EAAA,IATDC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,YAAA,GAAAH,IAAA,CACLI,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG;MAAEE,WAAW,EAAE;IAAK,CAAC,GAAAF,YAAA;IAAAG,iBAAA,GAAAN,IAAA,CAC/BO,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAG,KAAK,GAAAA,iBAAA;IAAAE,aAAA,GAAAR,IAAA,CACpBL,QAAQ;IAARA,QAAQ,GAAAa,aAAA,cAAG,KAAK,GAAAA,aAAA;IAChBC,IAAI,GAAAT,IAAA,CAAJS,IAAI;IACJC,QAAQ,GAAAV,IAAA,CAARU,QAAQ;IACLC,IAAI,GAAAnD,wBAAA,CAAAwC,IAAA,EAAA9E,SAAA;EAIT,IAAmB0F,WAAW,GAAqBR,OAAO,CAAlDS,SAAS;IAAkBC,WAAW,GAAAtD,wBAAA,CAAK4C,OAAO,EAAAjF,UAAA;EAC1D,IAAA4F,SAAA,GAAsB,IAAAC,iBAAQ,EAAC,CAAC;IAAxBC,SAAS,GAAAF,SAAA,CAATE,SAAS;EAEjB,IAAMC,OAAO,gBACXlG,OAAA,YAAAmG,aAAA,CAACxC,SAAS,EAAA7B,QAAA;IAAC2B,KAAK,EAAE,CAAC,CAACyB,KAAM;IAACO,IAAI,EAAEA;EAAK,GAAKE,IAAI;IAAEV,GAAG,EAAEA;EAAI,IACvDM,YAAY,gBACXvF,OAAA,YAAAmG,aAAA,CAACvB,YAAY;IAACD,QAAQ,EAAEA;EAAS,GAAEe,QAAuB,CAAC,GAE3DA,QACD,EACAR,KAAK,iBACJlF,OAAA,YAAAmG,aAAA,CAAC5B,eAAe,EAAAzC,QAAA;IACdsE,GAAG,EAAElB,KAAM;IACXmB,KAAK;IACLR,SAAS,EAAE,CAACD,WAAW,EAAEtC,mBAAmB,CAAC,CAC1CgD,MAAM,CAAC,UAAC3E,CAAC;MAAA,OAAKA,CAAC;IAAA,EAAC,CAChB4E,IAAI,CAAC,GAAG;EAAE,GACTT,WAAW,CAChB,CAEM,CACZ;EAED,IAAI,CAACZ,KAAK,EAAE,OAAOgB,OAAO;EAC1B,oBACElG,OAAA,YAAAmG,aAAA,CAACrG,QAAA,CAAA0G,cAAc;IAACC,WAAW,EAAC,MAAM;IAACR,SAAS,EAAEA;EAAU,GACrDC,OACa,CAAC;AAErB,CACF,CAAC;AAEDpB,OAAO,CAAC4B,WAAW,GAAG,SAAS;AAAC,IAAAC,QAAA,GAAAC,OAAA,cAEjB9B,OAAO","ignoreList":[]}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _react = require("@emotion/react");
|
|
9
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
10
|
-
var _media = require("@os-design/media");
|
|
11
|
-
var _theming = require("@os-design/theming");
|
|
12
|
-
var _utils = require("@os-design/utils");
|
|
13
|
-
var _react2 = _interopRequireWildcard(require("react"));
|
|
14
|
-
var _Section = _interopRequireDefault(require("../Section"));
|
|
15
|
-
var _excluded = ["media", "children"];
|
|
16
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
17
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
19
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
20
|
-
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); }
|
|
21
|
-
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; }
|
|
22
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
|
|
23
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
24
|
-
var containerHasMediaStyles = function containerHasMediaStyles(p) {
|
|
25
|
-
return p.hasMedia && (0, _react.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);
|
|
26
|
-
};
|
|
27
|
-
var containerNotHasMediaStyles = function containerNotHasMediaStyles(p) {
|
|
28
|
-
return !p.hasMedia && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n max-width: ", "em;\n "])), p.theme.sectionFeatureContentMaxWidth);
|
|
29
|
-
};
|
|
30
|
-
var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('hasMedia'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n ", ";\n ", ";\n"])), function (p) {
|
|
31
|
-
return (0, _theming.clr)(p.theme.colorText);
|
|
32
|
-
}, containerHasMediaStyles, containerNotHasMediaStyles);
|
|
33
|
-
var Content = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n grid-area: content;\n align-self: center;\n"])));
|
|
34
|
-
var Media = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n grid-area: media;\n align-self: center;\n"])));
|
|
35
|
-
var sectionHasMediaStyles = function sectionHasMediaStyles(p) {
|
|
36
|
-
return p.hasMedia && (0, _react.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);
|
|
37
|
-
};
|
|
38
|
-
var StyledSection = (0, _styled["default"])(_Section["default"], (0, _utils.omitEmotionProps)('hasMedia'))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", ";\n"])), sectionHasMediaStyles);
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* The section for describing an app feature.
|
|
42
|
-
*/
|
|
43
|
-
var SectionFeature = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
|
|
44
|
-
var media = _ref.media,
|
|
45
|
-
children = _ref.children,
|
|
46
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
47
|
-
return /*#__PURE__*/_react2["default"].createElement(StyledSection, _extends({
|
|
48
|
-
hasMedia: !!media
|
|
49
|
-
}, rest, {
|
|
50
|
-
ref: ref
|
|
51
|
-
}), /*#__PURE__*/_react2["default"].createElement(Container, {
|
|
52
|
-
hasMedia: !!media
|
|
53
|
-
}, /*#__PURE__*/_react2["default"].createElement(Content, null, children), media && /*#__PURE__*/_react2["default"].createElement(Media, null, media)));
|
|
54
|
-
});
|
|
55
|
-
SectionFeature.displayName = 'SectionFeature';
|
|
56
|
-
var _default = exports["default"] = SectionFeature;
|
|
57
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_media","_theming","_utils","_react2","_interopRequireWildcard","_Section","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","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","ref","media","children","rest","createElement","displayName","_default","exports"],"sources":["../../../src/SectionFeature/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\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":"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","ignoreList":[]}
|
package/dist/cjs/index.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
var _exportNames = {
|
|
8
|
-
PageContent: true,
|
|
9
|
-
Section: true,
|
|
10
|
-
SectionFeature: true
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "PageContent", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function get() {
|
|
15
|
-
return _PageContent["default"];
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
Object.defineProperty(exports, "Section", {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function get() {
|
|
21
|
-
return _Section["default"];
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
Object.defineProperty(exports, "SectionFeature", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function get() {
|
|
27
|
-
return _SectionFeature["default"];
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
var _PageContent = _interopRequireWildcard(require("./PageContent"));
|
|
31
|
-
Object.keys(_PageContent).forEach(function (key) {
|
|
32
|
-
if (key === "default" || key === "__esModule") return;
|
|
33
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
34
|
-
if (key in exports && exports[key] === _PageContent[key]) return;
|
|
35
|
-
Object.defineProperty(exports, key, {
|
|
36
|
-
enumerable: true,
|
|
37
|
-
get: function get() {
|
|
38
|
-
return _PageContent[key];
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
});
|
|
42
|
-
var _Section = _interopRequireWildcard(require("./Section"));
|
|
43
|
-
Object.keys(_Section).forEach(function (key) {
|
|
44
|
-
if (key === "default" || key === "__esModule") return;
|
|
45
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
46
|
-
if (key in exports && exports[key] === _Section[key]) return;
|
|
47
|
-
Object.defineProperty(exports, key, {
|
|
48
|
-
enumerable: true,
|
|
49
|
-
get: function get() {
|
|
50
|
-
return _Section[key];
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
});
|
|
54
|
-
var _SectionFeature = _interopRequireWildcard(require("./SectionFeature"));
|
|
55
|
-
Object.keys(_SectionFeature).forEach(function (key) {
|
|
56
|
-
if (key === "default" || key === "__esModule") return;
|
|
57
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
58
|
-
if (key in exports && exports[key] === _SectionFeature[key]) return;
|
|
59
|
-
Object.defineProperty(exports, key, {
|
|
60
|
-
enumerable: true,
|
|
61
|
-
get: function get() {
|
|
62
|
-
return _SectionFeature[key];
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
});
|
|
66
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
67
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
68
|
-
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_PageContent","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_Section","_SectionFeature","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"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":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../../src/@types/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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
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,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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","styled","Image","m","sizeStyles","clr","ThemeOverrider","useTheme","omitEmotionProps","React","forwardRef","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","createElement","_extends","url","cover","filter","i","join","activeTheme","displayName"],"sources":["../../../src/Section/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Image, ImageProps } from '@os-design/core';\nimport { m } from '@os-design/media';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\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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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["css","styled","m","clr","omitEmotionProps","React","forwardRef","Section","containerHasMediaStyles","p","hasMedia","theme","sectionFeatureRowGap","min","md","sectionFeatureMediaWidthPercent","sectionFeatureContentMaxWidth","sectionFeatureColumnGapPercent","containerNotHasMediaStyles","Container","colorText","Content","div","Media","sectionHasMediaStyles","StyledSection","SectionFeature","media","children","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/SectionFeature/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\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,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,CAAC,QAAQ,kBAAkB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,OAAO,MAAwB,YAAY;AAUlD,MAAMC,uBAAuB,GAAIC,CAAC,IAChCA,CAAC,CAACC,QAAQ,IACVV,GAAI;AACN;AACA;AACA;AACA;AACA;AACA,oBAAoBS,CAAC,CAACE,KAAK,CAACC,oBAAqB;AACjD;AACA,MAAMV,CAAC,CAACW,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,IACXV,GAAI;AACN,iBAAiBS,CAAC,CAACE,KAAK,CAACK,6BAA8B;AACvD,GAAG;AAKH,MAAMG,SAAS,GAAGlB,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,UAAU,CAAC,CAAkB;AAC9E,WAAYK,CAAC,IAAKN,GAAG,CAACM,CAAC,CAACE,KAAK,CAACS,SAAS,CAAE;AACzC,IAAIZ,uBAAwB;AAC5B,IAAIU,0BAA2B;AAC/B,CAAC;AAED,MAAMG,OAAO,GAAGpB,MAAM,CAACqB,GAAI;AAC3B;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGtB,MAAM,CAACqB,GAAI;AACzB;AACA;AACA,CAAC;AAED,MAAME,qBAAqB,GAAIf,CAAC,IAC9BA,CAAC,CAACC,QAAQ,IACVV,GAAI;AACN,MAAME,CAAC,CAACW,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,GAAGxB,MAAM,CAC1BM,OAAO,EACPH,gBAAgB,CAAC,UAAU,CAC7B,CAAsB;AACtB,IAAIoB,qBAAsB;AAC1B,CAAC;;AAED;AACA;AACA;AACA,MAAME,cAAc,gBAAGpB,UAAU,CAC/B,CAAC;EAAEqB,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChCzB,KAAA,CAAA0B,aAAA,CAACN,aAAa,EAAAO,QAAA;EAACtB,QAAQ,EAAE,CAAC,CAACiB;AAAM,GAAKE,IAAI;EAAEC,GAAG,EAAEA;AAAI,iBACnDzB,KAAA,CAAA0B,aAAA,CAACZ,SAAS;EAACT,QAAQ,EAAE,CAAC,CAACiB;AAAM,gBAC3BtB,KAAA,CAAA0B,aAAA,CAACV,OAAO,QAAEO,QAAkB,CAAC,EAC5BD,KAAK,iBAAItB,KAAA,CAAA0B,aAAA,CAACR,KAAK,QAAEI,KAAa,CACtB,CACE,CAEnB,CAAC;AAEDD,cAAc,CAACO,WAAW,GAAG,gBAAgB;AAE7C,eAAeP,cAAc","ignoreList":[]}
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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,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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAEL,gBAAgB,IAAI,oBAAoB,EACzC,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAKpD,QAAA,MAAM,WAAW;;UAEhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ImageProps } from '@os-design/core';
|
|
2
|
-
import { WithSize } from '@os-design/styles';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
type JsxSectionProps = Omit<JSX.IntrinsicElements['section'], 'ref'>;
|
|
5
|
-
export interface SectionProps extends JsxSectionProps, WithSize {
|
|
6
|
-
bgUrl?: string;
|
|
7
|
-
bgProps?: Omit<ImageProps, 'url' | 'cover'>;
|
|
8
|
-
limitedWidth?: boolean;
|
|
9
|
-
centered?: boolean;
|
|
10
|
-
}
|
|
11
|
-
declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
|
|
12
|
-
export default Section;
|
|
13
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,KAAK,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,CAAC;AACrE,MAAM,WAAW,YAAa,SAAQ,eAAe,EAAE,QAAQ;IAK7D,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,OAAO,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC;IAK5C,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0ED,QAAA,MAAM,OAAO,kFA2CZ,CAAC;AAIF,eAAe,OAAO,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/SectionFeature/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IAKvD,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC5B;AAgFD,QAAA,MAAM,cAAc,yFASnB,CAAC;AAIF,eAAe,cAAc,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC"}
|
|
File without changes
|