@veeqo/ui 14.2.0 → 14.3.0-beta-1
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/components/Accordion/styled.cjs +19 -9
- package/dist/components/Accordion/styled.cjs.map +1 -1
- package/dist/components/Accordion/styled.d.ts +9 -23
- package/dist/components/Accordion/styled.js +19 -9
- package/dist/components/Accordion/styled.js.map +1 -1
- package/dist/components/Action/Action.d.ts +4 -4
- package/dist/components/AnimatedDropdown/components/styled.d.ts +2 -1
- package/dist/components/AnimatedDropdown/styled.d.ts +2 -2
- package/dist/components/Badge/styled.cjs +27 -4
- package/dist/components/Badge/styled.cjs.map +1 -1
- package/dist/components/Badge/styled.d.ts +4 -3
- package/dist/components/Badge/styled.js +27 -4
- package/dist/components/Badge/styled.js.map +1 -1
- package/dist/components/Banner/styled.cjs +27 -8
- package/dist/components/Banner/styled.cjs.map +1 -1
- package/dist/components/Banner/styled.d.ts +7 -7
- package/dist/components/Banner/styled.js +27 -8
- package/dist/components/Banner/styled.js.map +1 -1
- package/dist/components/BaseContainer/BaseContainer.cjs +7 -3
- package/dist/components/BaseContainer/BaseContainer.cjs.map +1 -1
- package/dist/components/BaseContainer/BaseContainer.d.ts +2 -1
- package/dist/components/BaseContainer/BaseContainer.js +6 -2
- package/dist/components/BaseContainer/BaseContainer.js.map +1 -1
- package/dist/components/BaseContainer/BaseContainer.module.scss.cjs +9 -0
- package/dist/components/BaseContainer/BaseContainer.module.scss.cjs.map +1 -0
- package/dist/components/BaseContainer/BaseContainer.module.scss.js +7 -0
- package/dist/components/BaseContainer/BaseContainer.module.scss.js.map +1 -0
- package/dist/components/DataTable/components/ColumnHeader.d.ts +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.cjs +8 -8
- package/dist/components/DimensionsInput/DimensionsInput.cjs.map +1 -1
- package/dist/components/DimensionsInput/DimensionsInput.d.ts +8 -8
- package/dist/components/DimensionsInput/DimensionsInput.js +1 -1
- package/dist/components/FilterTag/styled.d.ts +4 -4
- package/dist/components/Grid/index.cjs +7 -1
- package/dist/components/Grid/index.cjs.map +1 -1
- package/dist/components/Grid/index.d.ts +2 -1
- package/dist/components/Grid/index.js +7 -1
- package/dist/components/Grid/index.js.map +1 -1
- package/dist/components/InputAffix/InputAffix.cjs +3 -4
- package/dist/components/InputAffix/InputAffix.cjs.map +1 -1
- package/dist/components/InputAffix/InputAffix.js +1 -2
- package/dist/components/InputAffix/InputAffix.js.map +1 -1
- package/dist/components/InputGroup/InputGroup.cjs +21 -0
- package/dist/components/InputGroup/InputGroup.cjs.map +1 -0
- package/dist/components/InputGroup/InputGroup.d.ts +2 -0
- package/dist/components/InputGroup/InputGroup.js +15 -0
- package/dist/components/InputGroup/InputGroup.js.map +1 -0
- package/dist/components/InputGroup/InputGroup.module.scss.cjs +9 -0
- package/dist/components/InputGroup/InputGroup.module.scss.cjs.map +1 -0
- package/dist/components/InputGroup/InputGroup.module.scss.js +7 -0
- package/dist/components/InputGroup/InputGroup.module.scss.js.map +1 -0
- package/dist/components/InputGroup/index.d.ts +2 -4
- package/dist/components/InputGroup/types.d.ts +3 -0
- package/dist/components/LegacyDataTable/SpecificState/styled.d.ts +4 -4
- package/dist/components/Pagination/styled.d.ts +8 -8
- package/dist/components/PhoneInput/index.d.ts +8 -8
- package/dist/components/PriceInput/PriceInput.cjs +4 -4
- package/dist/components/PriceInput/PriceInput.cjs.map +1 -1
- package/dist/components/PriceInput/PriceInput.js +1 -1
- package/dist/components/Search/Search.d.ts +8 -8
- package/dist/components/Search/styled.cjs +12 -2
- package/dist/components/Search/styled.cjs.map +1 -1
- package/dist/components/Search/styled.d.ts +9 -9
- package/dist/components/Search/styled.js +12 -2
- package/dist/components/Search/styled.js.map +1 -1
- package/dist/components/SegmentedControl/styled.d.ts +2 -1
- package/dist/components/Stack/Stack.cjs +26 -45
- package/dist/components/Stack/Stack.cjs.map +1 -1
- package/dist/components/Stack/Stack.d.ts +9 -2
- package/dist/components/Stack/Stack.js +25 -44
- package/dist/components/Stack/Stack.js.map +1 -1
- package/dist/components/Stack/Stack.module.scss.cjs +9 -0
- package/dist/components/Stack/Stack.module.scss.cjs.map +1 -0
- package/dist/components/Stack/Stack.module.scss.js +7 -0
- package/dist/components/Stack/Stack.module.scss.js.map +1 -0
- package/dist/components/Stack/types.d.ts +6 -6
- package/dist/components/Stepper/styled.cjs +16 -3
- package/dist/components/Stepper/styled.cjs.map +1 -1
- package/dist/components/Stepper/styled.d.ts +9 -1
- package/dist/components/Stepper/styled.js +16 -3
- package/dist/components/Stepper/styled.js.map +1 -1
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/TextField/TextField.d.ts +8 -8
- package/dist/components/TextField/index.d.ts +8 -8
- package/dist/components/ToastsLayout/components/styled.cjs +37 -4
- package/dist/components/ToastsLayout/components/styled.cjs.map +1 -1
- package/dist/components/ToastsLayout/components/styled.d.ts +26 -5
- package/dist/components/ToastsLayout/components/styled.js +37 -4
- package/dist/components/ToastsLayout/components/styled.js.map +1 -1
- package/dist/components/Toggle/styled.d.ts +2 -1
- package/dist/components/VideoModal/components/styled.d.ts +4 -3
- package/dist/components/View/styled.d.ts +4 -4
- package/dist/components/ViewTab/ViewTab.d.ts +1 -1
- package/dist/components/WeightInput/WeightInput.cjs +8 -8
- package/dist/components/WeightInput/WeightInput.cjs.map +1 -1
- package/dist/components/WeightInput/WeightInput.js +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/hoc/withClassNames/withClassNames.d.ts +1 -1
- package/dist/hoc/withLabels/styled.d.ts +9 -1
- package/dist/index.cjs +10 -10
- package/dist/index.js +1 -1
- package/dist/utils/forms/inputStyles.cjs +1 -2
- package/dist/utils/forms/inputStyles.cjs.map +1 -1
- package/dist/utils/forms/inputStyles.js +1 -2
- package/dist/utils/forms/inputStyles.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/InputGroup/index.cjs +0 -13
- package/dist/components/InputGroup/index.cjs.map +0 -1
- package/dist/components/InputGroup/index.js +0 -7
- package/dist/components/InputGroup/index.js.map +0 -1
- package/dist/components/Stack/Alignments.cjs +0 -12
- package/dist/components/Stack/Alignments.cjs.map +0 -1
- package/dist/components/Stack/Alignments.js +0 -12
- package/dist/components/Stack/Alignments.js.map +0 -1
|
@@ -12,19 +12,29 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
13
13
|
|
|
14
14
|
const TapBarChild = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
|
|
15
|
-
const Left = styled__default.default(TapBarChild).withConfig({
|
|
16
|
-
|
|
15
|
+
const Left = styled__default.default(TapBarChild).withConfig({
|
|
16
|
+
shouldForwardProp: (prop) => !['glyphColor'].includes(prop),
|
|
17
|
+
}) `
|
|
18
|
+
svg {
|
|
19
|
+
margin-right: 12px;
|
|
20
|
+
height: ${sizes.sizes.base};
|
|
21
|
+
width: ${sizes.sizes.base};
|
|
22
|
+
|
|
23
|
+
color: ${({ glyphColor }) => glyphColor};
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
26
|
+
const Right = styled__default.default(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1az9xn4" }) `justify-content:flex-end;flex-grow:2;`;
|
|
17
27
|
/**
|
|
18
28
|
* Due to unique behaviour observed in Safari, we override the outline property when
|
|
19
29
|
* the accordion is focussed.
|
|
20
30
|
*/
|
|
21
|
-
const AccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--
|
|
22
|
-
const Top = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--
|
|
23
|
-
const Description = styled__default.default(Text.Text).withConfig({ displayName: "vui--Description", componentId: "vui--
|
|
24
|
-
const AccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--
|
|
25
|
-
const AccordionDetails = styled__default.default.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--
|
|
26
|
-
const UnstyledAccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--
|
|
27
|
-
const UnstyledAccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--
|
|
31
|
+
const AccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1cj5wqc" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${index.theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
|
|
32
|
+
const Top = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--mks526" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
|
|
33
|
+
const Description = styled__default.default(Text.Text).withConfig({ displayName: "vui--Description", componentId: "vui--z9vlxj" }) `margin-top:8px;`;
|
|
34
|
+
const AccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--a80u9i" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
|
|
35
|
+
const AccordionDetails = styled__default.default.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--pwcrkp" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
|
|
36
|
+
const UnstyledAccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--qyx6g0" }) ``;
|
|
37
|
+
const UnstyledAccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--mkwb1n" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
|
|
28
38
|
|
|
29
39
|
exports.Text = Text.Text;
|
|
30
40
|
exports.AccordionContent = AccordionContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst Left = styled(TapBarChild)<{ glyphColor: string }>`\n svg {\n margin-right: 12px;\n height: ${sizes.base};\n width: ${sizes.base};\n\n color: ${({ glyphColor }) => glyphColor};\n }\n`;\n\nconst Right = styled(TapBarChild as any)`\n justify-content: flex-end;\n flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n display: flex;\n flex-direction: column;\n padding: 12px;\n border-radius: 4px;\n user-select: none;\n cursor: pointer;\n\n border: 1px solid ${theme.colors.neutral.grey.dark};\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n\n :active {\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Top = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 16px;\n`;\n\nconst Description = styled(Text)`\n margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n margin-top: 4px;\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n summary {\n list-style-type: none;\n ::-webkit-details-marker {\n display: none;\n }\n }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nexport {\n AccordionSummary,\n Top,\n Text,\n Left,\n Right,\n Description,\n AccordionDetails,\n AccordionContent,\n UnstyledAccordionContent,\n UnstyledAccordionSummary,\n};\n"],"names":["styled","BaseContainer","sizes","theme","Text","motion"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,WAAW,GAAGA,uBAAM,CAACC,2BAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAGD,uBAAM,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst Left = styled(TapBarChild).withConfig({\n shouldForwardProp: (prop) => !['glyphColor'].includes(prop),\n})<{ glyphColor: string }>`\n svg {\n margin-right: 12px;\n height: ${sizes.base};\n width: ${sizes.base};\n\n color: ${({ glyphColor }) => glyphColor};\n }\n`;\n\nconst Right = styled(TapBarChild as any)`\n justify-content: flex-end;\n flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n display: flex;\n flex-direction: column;\n padding: 12px;\n border-radius: 4px;\n user-select: none;\n cursor: pointer;\n\n border: 1px solid ${theme.colors.neutral.grey.dark};\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n\n :active {\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Top = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 16px;\n`;\n\nconst Description = styled(Text)`\n margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n margin-top: 4px;\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n summary {\n list-style-type: none;\n ::-webkit-details-marker {\n display: none;\n }\n }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nexport {\n AccordionSummary,\n Top,\n Text,\n Left,\n Right,\n Description,\n AccordionDetails,\n AccordionContent,\n UnstyledAccordionContent,\n UnstyledAccordionSummary,\n};\n"],"names":["styled","BaseContainer","sizes","theme","Text","motion"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,WAAW,GAAGA,uBAAM,CAACC,2BAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAGD,uBAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC;AAC1C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAwB;;;AAGZ,YAAA,EAAAE,WAAK,CAAC,IAAI,CAAA;AACX,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAA;;AAEV,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA;;;AAI3C,MAAM,KAAK,GAAGF,uBAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAGA,uBAAM,CAAC,OAAO,yMAQjBG,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAGH,uBAAM,CAACC,2BAAa,CAAC;AAOjC,MAAM,WAAW,GAAGD,uBAAM,CAACI,SAAI,CAAC;AAIhC,MAAM,gBAAgB,GAAGJ,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAGD,uBAAM,CAAC,OAAO;AASvC,MAAM,wBAAwB,GAAGA,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAGD,uBAAM,CAAC,OAAO,uIAGnBG,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Text } from '../Text';
|
|
3
|
-
declare const Left: import("styled-components").StyledComponent<"
|
|
3
|
+
declare const Left: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
|
|
4
4
|
glyphColor: string;
|
|
5
5
|
}, never>;
|
|
6
6
|
declare const Right: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
|
|
@@ -9,32 +9,18 @@ declare const Right: import("styled-components").StyledComponent<any, any, objec
|
|
|
9
9
|
* the accordion is focussed.
|
|
10
10
|
*/
|
|
11
11
|
declare const AccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
|
|
12
|
-
declare const Top: import("styled-components").StyledComponent<"
|
|
12
|
+
declare const Top: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
13
13
|
declare const Description: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
14
|
+
/**
|
|
15
|
+
* Due to unique behaviour observed in Safari, we override the outline property when
|
|
16
|
+
* the accordion is focussed.
|
|
17
|
+
*/
|
|
14
18
|
as?: import("../Text").ValidTextTag | undefined;
|
|
15
19
|
muted?: boolean | undefined;
|
|
16
|
-
variant?: "
|
|
20
|
+
variant?: "placeholder" | "link" | "body" | "button" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
|
|
17
21
|
} & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
|
|
18
|
-
declare const AccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<{
|
|
19
|
-
[x: string]: any;
|
|
20
|
-
[x: number]: any;
|
|
21
|
-
[x: symbol]: any;
|
|
22
|
-
} & {
|
|
23
|
-
theme?: any;
|
|
24
|
-
} & {
|
|
25
|
-
as?: string | import("react").ComponentType<any> | undefined;
|
|
26
|
-
forwardedAs?: string | import("react").ComponentType<any> | undefined;
|
|
27
|
-
}>, any, {}, never>;
|
|
22
|
+
declare const AccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
28
23
|
declare const AccordionDetails: import("styled-components").StyledComponent<"details", any, {}, never>;
|
|
29
|
-
declare const UnstyledAccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<{
|
|
30
|
-
[x: string]: any;
|
|
31
|
-
[x: number]: any;
|
|
32
|
-
[x: symbol]: any;
|
|
33
|
-
} & {
|
|
34
|
-
theme?: any;
|
|
35
|
-
} & {
|
|
36
|
-
as?: string | import("react").ComponentType<any> | undefined;
|
|
37
|
-
forwardedAs?: string | import("react").ComponentType<any> | undefined;
|
|
38
|
-
}>, any, {}, never>;
|
|
24
|
+
declare const UnstyledAccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
39
25
|
declare const UnstyledAccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
|
|
40
26
|
export { AccordionSummary, Top, Text, Left, Right, Description, AccordionDetails, AccordionContent, UnstyledAccordionContent, UnstyledAccordionSummary, };
|
|
@@ -6,19 +6,29 @@ import { theme } from '../../theme/index.js';
|
|
|
6
6
|
import { sizes } from '../../theme/modules/sizes.js';
|
|
7
7
|
|
|
8
8
|
const TapBarChild = styled(BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
|
|
9
|
-
const Left = styled(TapBarChild).withConfig({
|
|
10
|
-
|
|
9
|
+
const Left = styled(TapBarChild).withConfig({
|
|
10
|
+
shouldForwardProp: (prop) => !['glyphColor'].includes(prop),
|
|
11
|
+
}) `
|
|
12
|
+
svg {
|
|
13
|
+
margin-right: 12px;
|
|
14
|
+
height: ${sizes.base};
|
|
15
|
+
width: ${sizes.base};
|
|
16
|
+
|
|
17
|
+
color: ${({ glyphColor }) => glyphColor};
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
20
|
+
const Right = styled(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1az9xn4" }) `justify-content:flex-end;flex-grow:2;`;
|
|
11
21
|
/**
|
|
12
22
|
* Due to unique behaviour observed in Safari, we override the outline property when
|
|
13
23
|
* the accordion is focussed.
|
|
14
24
|
*/
|
|
15
|
-
const AccordionSummary = styled.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--
|
|
16
|
-
const Top = styled(BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--
|
|
17
|
-
const Description = styled(Text).withConfig({ displayName: "vui--Description", componentId: "vui--
|
|
18
|
-
const AccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--
|
|
19
|
-
const AccordionDetails = styled.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--
|
|
20
|
-
const UnstyledAccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--
|
|
21
|
-
const UnstyledAccordionSummary = styled.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--
|
|
25
|
+
const AccordionSummary = styled.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1cj5wqc" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
|
|
26
|
+
const Top = styled(BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--mks526" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
|
|
27
|
+
const Description = styled(Text).withConfig({ displayName: "vui--Description", componentId: "vui--z9vlxj" }) `margin-top:8px;`;
|
|
28
|
+
const AccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--a80u9i" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
|
|
29
|
+
const AccordionDetails = styled.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--pwcrkp" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
|
|
30
|
+
const UnstyledAccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--qyx6g0" }) ``;
|
|
31
|
+
const UnstyledAccordionSummary = styled.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--mkwb1n" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
|
|
22
32
|
|
|
23
33
|
export { AccordionContent, AccordionDetails, AccordionSummary, Description, Left, Right, Text, Top, UnstyledAccordionContent, UnstyledAccordionSummary };
|
|
24
34
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst Left = styled(TapBarChild)<{ glyphColor: string }>`\n svg {\n margin-right: 12px;\n height: ${sizes.base};\n width: ${sizes.base};\n\n color: ${({ glyphColor }) => glyphColor};\n }\n`;\n\nconst Right = styled(TapBarChild as any)`\n justify-content: flex-end;\n flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n display: flex;\n flex-direction: column;\n padding: 12px;\n border-radius: 4px;\n user-select: none;\n cursor: pointer;\n\n border: 1px solid ${theme.colors.neutral.grey.dark};\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n\n :active {\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Top = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 16px;\n`;\n\nconst Description = styled(Text)`\n margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n margin-top: 4px;\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n summary {\n list-style-type: none;\n ::-webkit-details-marker {\n display: none;\n }\n }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nexport {\n AccordionSummary,\n Top,\n Text,\n Left,\n Right,\n Description,\n AccordionDetails,\n AccordionContent,\n UnstyledAccordionContent,\n UnstyledAccordionSummary,\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nconst Left = styled(TapBarChild).withConfig({\n shouldForwardProp: (prop) => !['glyphColor'].includes(prop),\n})<{ glyphColor: string }>`\n svg {\n margin-right: 12px;\n height: ${sizes.base};\n width: ${sizes.base};\n\n color: ${({ glyphColor }) => glyphColor};\n }\n`;\n\nconst Right = styled(TapBarChild as any)`\n justify-content: flex-end;\n flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n display: flex;\n flex-direction: column;\n padding: 12px;\n border-radius: 4px;\n user-select: none;\n cursor: pointer;\n\n border: 1px solid ${theme.colors.neutral.grey.dark};\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n\n :active {\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nconst Top = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 16px;\n`;\n\nconst Description = styled(Text)`\n margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n margin-top: 4px;\n background: rgba(217, 235, 248, 0.5);\n padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n summary {\n list-style-type: none;\n ::-webkit-details-marker {\n display: none;\n }\n }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n`;\n\nexport {\n AccordionSummary,\n Top,\n Text,\n Left,\n Right,\n Description,\n AccordionDetails,\n AccordionContent,\n UnstyledAccordionContent,\n UnstyledAccordionSummary,\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,kIAIxC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC;AAC1C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAwB;;;AAGZ,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA;AACX,WAAA,EAAA,KAAK,CAAC,IAAI,CAAA;;AAEV,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA;;;AAI3C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,yMAQjB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAOjC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAIhC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO;AASvC,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAG,MAAM,CAAC,OAAO,uIAGnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}
|
|
@@ -14,7 +14,7 @@ export declare const ActionBase: React.ForwardRefExoticComponent<(Omit<{
|
|
|
14
14
|
size?: import("./types").ActionSize | undefined;
|
|
15
15
|
type?: "button" | "submit" | "reset" | undefined;
|
|
16
16
|
variant?: import("./types").ActionVariant | undefined;
|
|
17
|
-
} & Omit<Omit<any, "ref">, "
|
|
17
|
+
} & Omit<Omit<any, "ref">, "href" | "rel" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
|
|
18
18
|
appearance?: import("./types").ActionAppearance | undefined;
|
|
19
19
|
as?: C | undefined;
|
|
20
20
|
children?: React.ReactNode;
|
|
@@ -42,7 +42,7 @@ export declare const ActionBase: React.ForwardRefExoticComponent<(Omit<{
|
|
|
42
42
|
size?: import("./types").ActionSize | undefined;
|
|
43
43
|
type?: "button" | "submit" | "reset" | undefined;
|
|
44
44
|
variant?: import("./types").ActionVariant | undefined;
|
|
45
|
-
} & Omit<Omit<any, "ref">, "
|
|
45
|
+
} & Omit<Omit<any, "ref">, "href" | "rel" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
|
|
46
46
|
appearance?: import("./types").ActionAppearance | undefined;
|
|
47
47
|
as?: C | undefined;
|
|
48
48
|
children?: React.ReactNode;
|
|
@@ -69,7 +69,7 @@ export declare const Action: React.ForwardRefExoticComponent<(Omit<Omit<Omit<{
|
|
|
69
69
|
size?: import("./types").ActionSize | undefined;
|
|
70
70
|
type?: "button" | "submit" | "reset" | undefined;
|
|
71
71
|
variant?: import("./types").ActionVariant | undefined;
|
|
72
|
-
} & Omit<Omit<any, "ref">, "
|
|
72
|
+
} & Omit<Omit<any, "ref">, "href" | "rel" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
|
|
73
73
|
appearance?: import("./types").ActionAppearance | undefined;
|
|
74
74
|
as?: C | undefined;
|
|
75
75
|
children?: React.ReactNode;
|
|
@@ -97,7 +97,7 @@ export declare const Action: React.ForwardRefExoticComponent<(Omit<Omit<Omit<{
|
|
|
97
97
|
size?: import("./types").ActionSize | undefined;
|
|
98
98
|
type?: "button" | "submit" | "reset" | undefined;
|
|
99
99
|
variant?: import("./types").ActionVariant | undefined;
|
|
100
|
-
} & Omit<Omit<any, "ref">, "
|
|
100
|
+
} & Omit<Omit<any, "ref">, "href" | "rel" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | keyof {
|
|
101
101
|
appearance?: import("./types").ActionAppearance | undefined;
|
|
102
102
|
as?: C | undefined;
|
|
103
103
|
children?: React.ReactNode;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
declare const Container: import("styled-components").StyledComponent<"
|
|
3
|
-
declare const Wrap: import("styled-components").StyledComponent<"
|
|
2
|
+
declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
|
+
declare const Wrap: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
4
4
|
declare const Dropdown: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../types").EventHandlerProps & {
|
|
5
5
|
className?: string | undefined;
|
|
6
6
|
children: import("react").ReactNode;
|
|
@@ -10,10 +10,33 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
12
12
|
|
|
13
|
-
const BaseBadge = styled__default.default(BaseContainer.BaseContainer).withConfig({
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
const BaseBadge = styled__default.default(BaseContainer.BaseContainer).withConfig({
|
|
14
|
+
shouldForwardProp: (prop) => !['hideBorder'].includes(prop),
|
|
15
|
+
}) `
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
vertical-align: middle;
|
|
19
|
+
gap: 4px;
|
|
20
|
+
padding: 0.35em 0.65em;
|
|
21
|
+
|
|
22
|
+
font-family: ${text.text.bodySmall.fontFamily};
|
|
23
|
+
font-weight: ${text.text.bodySmall.fontWeight};
|
|
24
|
+
font-size: 75%;
|
|
25
|
+
line-height: 16px;
|
|
26
|
+
|
|
27
|
+
border-radius: 0.75rem;
|
|
28
|
+
border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};
|
|
29
|
+
|
|
30
|
+
cursor: default;
|
|
31
|
+
|
|
32
|
+
svg {
|
|
33
|
+
width: ${sizes.sizes.base};
|
|
34
|
+
height: ${sizes.sizes.base};
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
37
|
+
const DefaultBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--DefaultBadge", componentId: "vui--1v0u0po" }) `background-color:inherit;border-color:${colors.colors.secondary.blue.base};color:${colors.colors.secondary.blue.base};`;
|
|
38
|
+
const PrimaryBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--1ta5k7c" }) `border-color:${colors.colors.secondary.blue.base};background-color:${colors.colors.secondary.blue.lightest};color:${colors.colors.secondary.blue.base};`;
|
|
39
|
+
const WarningBadge = styled__default.default(BaseBadge).withConfig({ displayName: "vui--WarningBadge", componentId: "vui--joczn3" }) `border-color:${colors.colors.secondary.yellow.base};background-color:${colors.colors.secondary.yellow.lightest};color:${colors.colors.secondary.orange.dark};`;
|
|
17
40
|
|
|
18
41
|
exports.DefaultBadge = DefaultBadge;
|
|
19
42
|
exports.PrimaryBadge = PrimaryBadge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype BaseBadgeProps = {\n hideBorder: boolean;\n};\n\nconst BaseBadge = styled(BaseContainer)<BaseBadgeProps>`\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n gap: 4px;\n padding: 0.35em 0.65em;\n\n font-family: ${text.bodySmall.fontFamily};\n font-weight: ${text.bodySmall.fontWeight};\n font-size: 75%;\n line-height: 16px;\n\n border-radius: 0.75rem;\n border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};\n\n cursor: default;\n\n svg {\n width: ${sizes.base};\n height: ${sizes.base};\n }\n`;\n\nexport const DefaultBadge = styled(BaseBadge)`\n background-color: inherit;\n border-color: ${colors.secondary.blue.base};\n color: ${colors.secondary.blue.base};\n`;\n\nexport const PrimaryBadge = styled(BaseBadge)`\n border-color: ${colors.secondary.blue.base};\n background-color: ${colors.secondary.blue.lightest};\n color: ${colors.secondary.blue.base};\n`;\n\nexport const WarningBadge = styled(BaseBadge)`\n border-color: ${colors.secondary.yellow.base};\n background-color: ${colors.secondary.yellow.lightest};\n color: ${colors.secondary.orange.dark};\n`;\n"],"names":["styled","BaseContainer","text","sizes","colors"],"mappings":";;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,
|
|
1
|
+
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype BaseBadgeProps = {\n hideBorder: boolean;\n};\n\nconst BaseBadge = styled(BaseContainer).withConfig({\n shouldForwardProp: (prop) => !['hideBorder'].includes(prop),\n})<BaseBadgeProps>`\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n gap: 4px;\n padding: 0.35em 0.65em;\n\n font-family: ${text.bodySmall.fontFamily};\n font-weight: ${text.bodySmall.fontWeight};\n font-size: 75%;\n line-height: 16px;\n\n border-radius: 0.75rem;\n border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};\n\n cursor: default;\n\n svg {\n width: ${sizes.base};\n height: ${sizes.base};\n }\n`;\n\nexport const DefaultBadge = styled(BaseBadge)`\n background-color: inherit;\n border-color: ${colors.secondary.blue.base};\n color: ${colors.secondary.blue.base};\n`;\n\nexport const PrimaryBadge = styled(BaseBadge)`\n border-color: ${colors.secondary.blue.base};\n background-color: ${colors.secondary.blue.lightest};\n color: ${colors.secondary.blue.base};\n`;\n\nexport const WarningBadge = styled(BaseBadge)`\n border-color: ${colors.secondary.yellow.base};\n background-color: ${colors.secondary.yellow.lightest};\n color: ${colors.secondary.orange.dark};\n`;\n"],"names":["styled","BaseContainer","text","sizes","colors"],"mappings":";;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,UAAU,CAAC;AACjD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAgB;;;;;;;iBAODC,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA;iBACzBA,SAAI,CAAC,SAAS,CAAC,UAAU,CAAA;;;;;AAK9B,UAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA;;;;;AAK/D,WAAA,EAAAC,WAAK,CAAC,IAAI,CAAA;AACT,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAA;;CAEvB;AAEM,MAAM,YAAY,GAAGH,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAE3BI,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EACjCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;AAG9B,MAAM,YAAY,GAAGJ,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3BI,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACtBA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,OAAA,EACzCA,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAG9B,MAAM,YAAY,GAAGJ,uBAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3BI,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EACxBA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3CA,aAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
type BaseBadgeProps = {
|
|
2
3
|
hideBorder: boolean;
|
|
3
4
|
};
|
|
4
|
-
export declare const DefaultBadge: import("styled-components").StyledComponent<"
|
|
5
|
-
export declare const PrimaryBadge: import("styled-components").StyledComponent<"
|
|
6
|
-
export declare const WarningBadge: import("styled-components").StyledComponent<"
|
|
5
|
+
export declare const DefaultBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, BaseBadgeProps, never>;
|
|
6
|
+
export declare const PrimaryBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, BaseBadgeProps, never>;
|
|
7
|
+
export declare const WarningBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, BaseBadgeProps, never>;
|
|
7
8
|
export {};
|
|
@@ -4,10 +4,33 @@ import { text } from '../../theme/modules/text.js';
|
|
|
4
4
|
import { colors } from '../../theme/modules/colors.js';
|
|
5
5
|
import { sizes } from '../../theme/modules/sizes.js';
|
|
6
6
|
|
|
7
|
-
const BaseBadge = styled(BaseContainer).withConfig({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
const BaseBadge = styled(BaseContainer).withConfig({
|
|
8
|
+
shouldForwardProp: (prop) => !['hideBorder'].includes(prop),
|
|
9
|
+
}) `
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
vertical-align: middle;
|
|
13
|
+
gap: 4px;
|
|
14
|
+
padding: 0.35em 0.65em;
|
|
15
|
+
|
|
16
|
+
font-family: ${text.bodySmall.fontFamily};
|
|
17
|
+
font-weight: ${text.bodySmall.fontWeight};
|
|
18
|
+
font-size: 75%;
|
|
19
|
+
line-height: 16px;
|
|
20
|
+
|
|
21
|
+
border-radius: 0.75rem;
|
|
22
|
+
border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};
|
|
23
|
+
|
|
24
|
+
cursor: default;
|
|
25
|
+
|
|
26
|
+
svg {
|
|
27
|
+
width: ${sizes.base};
|
|
28
|
+
height: ${sizes.base};
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
31
|
+
const DefaultBadge = styled(BaseBadge).withConfig({ displayName: "vui--DefaultBadge", componentId: "vui--1v0u0po" }) `background-color:inherit;border-color:${colors.secondary.blue.base};color:${colors.secondary.blue.base};`;
|
|
32
|
+
const PrimaryBadge = styled(BaseBadge).withConfig({ displayName: "vui--PrimaryBadge", componentId: "vui--1ta5k7c" }) `border-color:${colors.secondary.blue.base};background-color:${colors.secondary.blue.lightest};color:${colors.secondary.blue.base};`;
|
|
33
|
+
const WarningBadge = styled(BaseBadge).withConfig({ displayName: "vui--WarningBadge", componentId: "vui--joczn3" }) `border-color:${colors.secondary.yellow.base};background-color:${colors.secondary.yellow.lightest};color:${colors.secondary.orange.dark};`;
|
|
11
34
|
|
|
12
35
|
export { DefaultBadge, PrimaryBadge, WarningBadge };
|
|
13
36
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype BaseBadgeProps = {\n hideBorder: boolean;\n};\n\nconst BaseBadge = styled(BaseContainer)<BaseBadgeProps>`\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n gap: 4px;\n padding: 0.35em 0.65em;\n\n font-family: ${text.bodySmall.fontFamily};\n font-weight: ${text.bodySmall.fontWeight};\n font-size: 75%;\n line-height: 16px;\n\n border-radius: 0.75rem;\n border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};\n\n cursor: default;\n\n svg {\n width: ${sizes.base};\n height: ${sizes.base};\n }\n`;\n\nexport const DefaultBadge = styled(BaseBadge)`\n background-color: inherit;\n border-color: ${colors.secondary.blue.base};\n color: ${colors.secondary.blue.base};\n`;\n\nexport const PrimaryBadge = styled(BaseBadge)`\n border-color: ${colors.secondary.blue.base};\n background-color: ${colors.secondary.blue.lightest};\n color: ${colors.secondary.blue.base};\n`;\n\nexport const WarningBadge = styled(BaseBadge)`\n border-color: ${colors.secondary.yellow.base};\n background-color: ${colors.secondary.yellow.lightest};\n color: ${colors.secondary.orange.dark};\n`;\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../src/components/Badge/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BaseContainer } from '../BaseContainer';\nimport { text } from '../../theme/modules/text';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\n\ntype BaseBadgeProps = {\n hideBorder: boolean;\n};\n\nconst BaseBadge = styled(BaseContainer).withConfig({\n shouldForwardProp: (prop) => !['hideBorder'].includes(prop),\n})<BaseBadgeProps>`\n display: inline-flex;\n align-items: center;\n vertical-align: middle;\n gap: 4px;\n padding: 0.35em 0.65em;\n\n font-family: ${text.bodySmall.fontFamily};\n font-weight: ${text.bodySmall.fontWeight};\n font-size: 75%;\n line-height: 16px;\n\n border-radius: 0.75rem;\n border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};\n\n cursor: default;\n\n svg {\n width: ${sizes.base};\n height: ${sizes.base};\n }\n`;\n\nexport const DefaultBadge = styled(BaseBadge)`\n background-color: inherit;\n border-color: ${colors.secondary.blue.base};\n color: ${colors.secondary.blue.base};\n`;\n\nexport const PrimaryBadge = styled(BaseBadge)`\n border-color: ${colors.secondary.blue.base};\n background-color: ${colors.secondary.blue.lightest};\n color: ${colors.secondary.blue.base};\n`;\n\nexport const WarningBadge = styled(BaseBadge)`\n border-color: ${colors.secondary.yellow.base};\n background-color: ${colors.secondary.yellow.lightest};\n color: ${colors.secondary.orange.dark};\n`;\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AACjD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC5D,CAAA,CAAC,CAAgB;;;;;;;iBAOD,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA;iBACzB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA;;;;;AAK9B,UAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,UAAU,GAAG,MAAM,GAAG,uBAAuB,CAAC,CAAA;;;;;AAK/D,WAAA,EAAA,KAAK,CAAC,IAAI,CAAA;AACT,YAAA,EAAA,KAAK,CAAC,IAAI,CAAA;;CAEvB;AAEM,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EAE3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,OAAA,EACjC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA;AAG9B,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACtB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAA,OAAA,EACzC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAG9B,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAC3B,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EACxB,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAA,OAAA,EAC3C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;"}
|
|
@@ -9,16 +9,35 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
11
11
|
|
|
12
|
-
const BannerLayout = styled__default.default(BaseContainer.BaseContainer).withConfig({
|
|
12
|
+
const BannerLayout = styled__default.default(BaseContainer.BaseContainer).withConfig({
|
|
13
|
+
shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),
|
|
14
|
+
}) `
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
justify-content: flex-start;
|
|
18
|
+
align-items: stretch;
|
|
19
|
+
padding: 20px 24px 24px 24px;
|
|
20
|
+
border-radius: 4px;
|
|
21
|
+
${({ accentColor }) => accentColor &&
|
|
13
22
|
`
|
|
14
23
|
box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
|
|
15
|
-
`}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
const
|
|
21
|
-
|
|
24
|
+
`}
|
|
25
|
+
background-color: ${({ backgroundColor }) => backgroundColor || 'white'};
|
|
26
|
+
`;
|
|
27
|
+
const Row = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Row", componentId: "vui--efzdvm" }) `display:flex;flex-direction:row;`;
|
|
28
|
+
const Col = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Col", componentId: "vui--1c3cv6m" }) `display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;`;
|
|
29
|
+
const IconCol = styled__default.default(Col).withConfig({
|
|
30
|
+
shouldForwardProp: (prop) => !['accentColor'].includes(prop),
|
|
31
|
+
}) `
|
|
32
|
+
svg {
|
|
33
|
+
width: ${sizes.sizes.md};
|
|
34
|
+
height: ${sizes.sizes.md};
|
|
35
|
+
color: ${({ accentColor }) => accentColor};
|
|
36
|
+
}
|
|
37
|
+
`;
|
|
38
|
+
const ChildContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--ChildContainer", componentId: "vui--1ryyp4c" }) `width:100%;`;
|
|
39
|
+
const HeaderCol = styled__default.default(Col).withConfig({ displayName: "vui--HeaderCol", componentId: "vui--2c6441" }) `flex-grow:2;margin-right:12px;`;
|
|
40
|
+
const StyledText = styled__default.default(Text.Text).withConfig({ displayName: "vui--StyledText", componentId: "vui--53focc" }) `position:relative;top:-2px;`;
|
|
22
41
|
|
|
23
42
|
exports.ChildContainer = ChildContainer;
|
|
24
43
|
exports.Col = Col;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer)<PillProps>`\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n padding: 20px 24px 24px 24px;\n border-radius: 4px;\n ${({ accentColor }) =>\n accentColor &&\n `\n box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n `}\n background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col)<{ accentColor: string }>`\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n color: ${({ accentColor }) => accentColor};\n }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n flex-grow: 2;\n margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n position: relative;\n top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":["styled","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAY,GAAGA,uBAAM,CAACC,2BAAa,CAAC,
|
|
1
|
+
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Banner/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { Text } from '../Text';\nimport { BaseContainer } from '../BaseContainer';\nimport { PillProps } from './types';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst BannerLayout = styled(BaseContainer).withConfig({\n shouldForwardProp: (prop) => !['accentColor', 'backgroundColor'].includes(prop),\n})<PillProps>`\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: stretch;\n padding: 20px 24px 24px 24px;\n border-radius: 4px;\n ${({ accentColor }) =>\n accentColor &&\n `\n box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};\n `}\n background-color: ${({ backgroundColor }) => backgroundColor || 'white'};\n`;\n\nconst Row = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n`;\n\nconst Col = styled(BaseContainer)`\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n`;\n\nexport const IconCol = styled(Col).withConfig({\n shouldForwardProp: (prop) => !['accentColor'].includes(prop),\n})<{ accentColor: string }>`\n svg {\n width: ${sizes.md};\n height: ${sizes.md};\n color: ${({ accentColor }) => accentColor};\n }\n`;\n\nexport const ChildContainer = styled(BaseContainer)`\n width: 100%;\n`;\n\nconst HeaderCol = styled(Col)`\n flex-grow: 2;\n margin-right: 12px;\n`;\n\nconst StyledText = styled(Text)`\n position: relative;\n top: -2px;\n`;\n\nexport { BannerLayout as Pill, StyledText as Text, Row, Col, HeaderCol };\n"],"names":["styled","BaseContainer","sizes","Text"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAY,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,UAAU,CAAC;AACpD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAChF,CAAA,CAAC,CAAW;;;;;;;AAOT,EAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;0EACsE,WAAW,CAAA;AAChF,IAAA,CAAA;sBACiB,CAAC,EAAE,eAAe,EAAE,KAAK,eAAe,IAAI,OAAO,CAAA;;AAGzE,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAKjC,MAAM,GAAG,GAAGD,uBAAM,CAACC,2BAAa,CAAC;AAO1B,MAAM,OAAO,GAAGD,uBAAM,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;AAC5C,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC7D,CAAA,CAAC,CAAyB;;AAEd,WAAA,EAAAE,WAAK,CAAC,EAAE,CAAA;AACP,YAAA,EAAAA,WAAK,CAAC,EAAE,CAAA;AACT,WAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,CAAA;;;MAIhC,cAAc,GAAGF,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA;AAInD,MAAM,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAAC;AAK7B,MAAM,UAAU,GAAGA,uBAAM,CAACG,SAAI,CAAC;;;;;;;;;;"}
|