@veeqo/ui 11.3.0 → 11.3.2
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/SelectDropdown/ListItem/ListItem.cjs +6 -3
- package/dist/components/SelectDropdown/ListItem/ListItem.cjs.map +1 -1
- package/dist/components/SelectDropdown/ListItem/ListItem.d.ts +1 -1
- package/dist/components/SelectDropdown/ListItem/ListItem.js +6 -3
- package/dist/components/SelectDropdown/ListItem/ListItem.js.map +1 -1
- package/dist/components/SelectDropdown/ListItem/ListItem.module.scss.cjs +9 -0
- package/dist/components/SelectDropdown/ListItem/ListItem.module.scss.cjs.map +1 -0
- package/dist/components/SelectDropdown/ListItem/ListItem.module.scss.js +7 -0
- package/dist/components/SelectDropdown/ListItem/ListItem.module.scss.js.map +1 -0
- package/dist/components/SelectDropdown/ListItem/components/ListItemContent.cjs +36 -18
- package/dist/components/SelectDropdown/ListItem/components/ListItemContent.cjs.map +1 -1
- package/dist/components/SelectDropdown/ListItem/components/ListItemContent.js +37 -19
- package/dist/components/SelectDropdown/ListItem/components/ListItemContent.js.map +1 -1
- package/dist/components/SelectDropdown/ListItem/components/SelectionType.cjs +4 -4
- package/dist/components/SelectDropdown/ListItem/components/SelectionType.cjs.map +1 -1
- package/dist/components/SelectDropdown/ListItem/components/SelectionType.js +4 -4
- package/dist/components/SelectDropdown/ListItem/components/SelectionType.js.map +1 -1
- package/dist/components/SelectDropdown/ListItemSection/ListItemSection.cjs +6 -6
- package/dist/components/SelectDropdown/ListItemSection/ListItemSection.cjs.map +1 -1
- package/dist/components/SelectDropdown/ListItemSection/ListItemSection.js +7 -7
- package/dist/components/SelectDropdown/ListItemSection/ListItemSection.js.map +1 -1
- package/dist/components/SelectDropdown/ListItemSection/ListItemSection.module.scss.cjs +9 -0
- package/dist/components/SelectDropdown/ListItemSection/ListItemSection.module.scss.cjs.map +1 -0
- package/dist/components/SelectDropdown/ListItemSection/ListItemSection.module.scss.js +7 -0
- package/dist/components/SelectDropdown/ListItemSection/ListItemSection.module.scss.js.map +1 -0
- package/dist/components/SelectDropdown/SelectDropdown.cjs +20 -8
- package/dist/components/SelectDropdown/SelectDropdown.cjs.map +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.js +21 -9
- package/dist/components/SelectDropdown/SelectDropdown.js.map +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.module.scss.cjs +9 -0
- package/dist/components/SelectDropdown/SelectDropdown.module.scss.cjs.map +1 -0
- package/dist/components/SelectDropdown/SelectDropdown.module.scss.js +7 -0
- package/dist/components/SelectDropdown/SelectDropdown.module.scss.js.map +1 -0
- package/dist/components/SelectDropdown/components/SelectedOption.cjs +4 -6
- package/dist/components/SelectDropdown/components/SelectedOption.cjs.map +1 -1
- package/dist/components/SelectDropdown/components/SelectedOption.js +4 -6
- package/dist/components/SelectDropdown/components/SelectedOption.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.cjs +4 -2
- package/dist/components/Skeleton/Skeleton.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts +3 -3
- package/dist/components/Skeleton/Skeleton.js +4 -2
- package/dist/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/utils/forms/form.module.scss.cjs +9 -0
- package/dist/utils/forms/form.module.scss.cjs.map +1 -0
- package/dist/utils/forms/form.module.scss.js +7 -0
- package/dist/utils/forms/form.module.scss.js.map +1 -0
- package/dist/utils/forms/inputStyles.cjs +17 -0
- package/dist/utils/forms/inputStyles.cjs.map +1 -1
- package/dist/utils/forms/inputStyles.d.ts +17 -0
- package/dist/utils/forms/inputStyles.js +17 -0
- package/dist/utils/forms/inputStyles.js.map +1 -1
- package/dist/utils/forms/variables.cjs +6 -0
- package/dist/utils/forms/variables.cjs.map +1 -1
- package/dist/utils/forms/variables.d.ts +6 -0
- package/dist/utils/forms/variables.js +6 -0
- package/dist/utils/forms/variables.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.cjs +0 -18
- package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.cjs.map +0 -1
- package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.d.ts +0 -2
- package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.js +0 -12
- package/dist/components/SelectDropdown/ListItem/components/CheckboxIndicator.js.map +0 -1
- package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.cjs +0 -18
- package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.cjs.map +0 -1
- package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.d.ts +0 -2
- package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.js +0 -12
- package/dist/components/SelectDropdown/ListItem/components/RadioIndicator.js.map +0 -1
- package/dist/components/SelectDropdown/ListItem/styled.cjs +0 -42
- package/dist/components/SelectDropdown/ListItem/styled.cjs.map +0 -1
- package/dist/components/SelectDropdown/ListItem/styled.d.ts +0 -21
- package/dist/components/SelectDropdown/ListItem/styled.js +0 -31
- package/dist/components/SelectDropdown/ListItem/styled.js.map +0 -1
- package/dist/components/SelectDropdown/ListItemSection/styled.cjs +0 -16
- package/dist/components/SelectDropdown/ListItemSection/styled.cjs.map +0 -1
- package/dist/components/SelectDropdown/ListItemSection/styled.d.ts +0 -3
- package/dist/components/SelectDropdown/ListItemSection/styled.js +0 -9
- package/dist/components/SelectDropdown/ListItemSection/styled.js.map +0 -1
- package/dist/components/SelectDropdown/styled.cjs +0 -33
- package/dist/components/SelectDropdown/styled.cjs.map +0 -1
- package/dist/components/SelectDropdown/styled.d.ts +0 -321
- package/dist/components/SelectDropdown/styled.js +0 -22
- package/dist/components/SelectDropdown/styled.js.map +0 -1
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var ActiveCheckboxIcon = require('../../../../icons/custom/components/ActiveCheckboxIcon.cjs');
|
|
5
|
-
var InactiveCheckboxIcon = require('../../../../icons/custom/components/InactiveCheckboxIcon.cjs');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
|
-
|
|
9
|
-
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
10
|
-
|
|
11
|
-
const CheckboxIndicator = ({ checked, ...otherProps }) => {
|
|
12
|
-
if (checked)
|
|
13
|
-
return React__default.default.createElement(ActiveCheckboxIcon.ActiveCheckboxIcon, { ...otherProps });
|
|
14
|
-
return React__default.default.createElement(InactiveCheckboxIcon.InactiveCheckboxIcon, { ...otherProps });
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
exports.CheckboxIndicator = CheckboxIndicator;
|
|
18
|
-
//# sourceMappingURL=CheckboxIndicator.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIndicator.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/CheckboxIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveCheckboxIcon, InactiveCheckboxIcon } from '../../../../icons';\n\nexport const CheckboxIndicator = ({ checked, ...otherProps }: any) => {\n if (checked) return <ActiveCheckboxIcon {...otherProps} />;\n\n return <InactiveCheckboxIcon {...otherProps} />;\n};\n"],"names":["React","ActiveCheckboxIcon","InactiveCheckboxIcon"],"mappings":";;;;;;;;;;AAGO,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AACnE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,qCAAkB,EAAK,EAAA,GAAA,UAAU,GAAI;AAE1D,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,yCAAoB,EAAK,EAAA,GAAA,UAAU,GAAI;AACjD;;;;"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { ActiveCheckboxIcon } from '../../../../icons/custom/components/ActiveCheckboxIcon.js';
|
|
3
|
-
import { InactiveCheckboxIcon } from '../../../../icons/custom/components/InactiveCheckboxIcon.js';
|
|
4
|
-
|
|
5
|
-
const CheckboxIndicator = ({ checked, ...otherProps }) => {
|
|
6
|
-
if (checked)
|
|
7
|
-
return React__default.createElement(ActiveCheckboxIcon, { ...otherProps });
|
|
8
|
-
return React__default.createElement(InactiveCheckboxIcon, { ...otherProps });
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export { CheckboxIndicator };
|
|
12
|
-
//# sourceMappingURL=CheckboxIndicator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxIndicator.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/CheckboxIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveCheckboxIcon, InactiveCheckboxIcon } from '../../../../icons';\n\nexport const CheckboxIndicator = ({ checked, ...otherProps }: any) => {\n if (checked) return <ActiveCheckboxIcon {...otherProps} />;\n\n return <InactiveCheckboxIcon {...otherProps} />;\n};\n"],"names":["React"],"mappings":";;;;AAGO,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AACnE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,kBAAkB,EAAK,EAAA,GAAA,UAAU,GAAI;AAE1D,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,oBAAoB,EAAK,EAAA,GAAA,UAAU,GAAI;AACjD;;;;"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var ActiveRadioIcon = require('../../../../icons/custom/components/ActiveRadioIcon.cjs');
|
|
5
|
-
var InactiveRadioIcon = require('../../../../icons/custom/components/InactiveRadioIcon.cjs');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
|
-
|
|
9
|
-
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
10
|
-
|
|
11
|
-
const RadioIndicator = ({ checked, ...otherProps }) => {
|
|
12
|
-
if (checked)
|
|
13
|
-
return React__default.default.createElement(ActiveRadioIcon.ActiveRadioIcon, { ...otherProps });
|
|
14
|
-
return React__default.default.createElement(InactiveRadioIcon.InactiveRadioIcon, { ...otherProps });
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
exports.RadioIndicator = RadioIndicator;
|
|
18
|
-
//# sourceMappingURL=RadioIndicator.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioIndicator.cjs","sources":["../../../../../src/components/SelectDropdown/ListItem/components/RadioIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveRadioIcon, InactiveRadioIcon } from '../../../../icons';\n\nexport const RadioIndicator = ({ checked, ...otherProps }: any) => {\n if (checked) return <ActiveRadioIcon {...otherProps} />;\n\n return <InactiveRadioIcon {...otherProps} />;\n};\n"],"names":["React","ActiveRadioIcon","InactiveRadioIcon"],"mappings":";;;;;;;;;;AAGO,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AAChE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,sBAAC,CAAA,aAAA,CAAAC,+BAAe,EAAK,EAAA,GAAA,UAAU,GAAI;AAEvD,IAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,mCAAiB,EAAK,EAAA,GAAA,UAAU,GAAI;AAC9C;;;;"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { ActiveRadioIcon } from '../../../../icons/custom/components/ActiveRadioIcon.js';
|
|
3
|
-
import { InactiveRadioIcon } from '../../../../icons/custom/components/InactiveRadioIcon.js';
|
|
4
|
-
|
|
5
|
-
const RadioIndicator = ({ checked, ...otherProps }) => {
|
|
6
|
-
if (checked)
|
|
7
|
-
return React__default.createElement(ActiveRadioIcon, { ...otherProps });
|
|
8
|
-
return React__default.createElement(InactiveRadioIcon, { ...otherProps });
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export { RadioIndicator };
|
|
12
|
-
//# sourceMappingURL=RadioIndicator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RadioIndicator.js","sources":["../../../../../src/components/SelectDropdown/ListItem/components/RadioIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { ActiveRadioIcon, InactiveRadioIcon } from '../../../../icons';\n\nexport const RadioIndicator = ({ checked, ...otherProps }: any) => {\n if (checked) return <ActiveRadioIcon {...otherProps} />;\n\n return <InactiveRadioIcon {...otherProps} />;\n};\n"],"names":["React"],"mappings":";;;;AAGO,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,UAAU,EAAO,KAAI;AAChE,IAAA,IAAI,OAAO;AAAE,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,eAAe,EAAK,EAAA,GAAA,UAAU,GAAI;AAEvD,IAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAAK,EAAA,GAAA,UAAU,GAAI;AAC9C;;;;"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var index = require('../../../theme/index.cjs');
|
|
5
|
-
var reactAriaComponents = require('react-aria-components');
|
|
6
|
-
require('react');
|
|
7
|
-
var ArrowUpIcon = require('../../../icons/design-system/components/ArrowUpIcon.cjs');
|
|
8
|
-
var Stack = require('../../Stack/Stack.cjs');
|
|
9
|
-
require('../../Stack/types.cjs');
|
|
10
|
-
|
|
11
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
|
-
|
|
13
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
14
|
-
|
|
15
|
-
const colourStatesMap = {
|
|
16
|
-
hovered: '#F0F7FC',
|
|
17
|
-
pressed: '#E3F0FA',
|
|
18
|
-
disabled: index.theme.colors.neutral.grey.light,
|
|
19
|
-
};
|
|
20
|
-
const StyledListItem = styled__default.default(reactAriaComponents.ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `border-radius:${index.theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : index.theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${index.theme.sizes.xs} ${index.theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${index.theme.colors.neutral.grey.base};border-color:${index.theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${index.theme.colors.secondary.green.base};border-color:${index.theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${index.theme.sizes.sm};border-radius:${index.theme.radius.base};}`;
|
|
21
|
-
styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--6npxd" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${index.theme.colors.secondary.blue.base};}width:100%;`;
|
|
22
|
-
const LinkIcon = styled__default.default(ArrowUpIcon.ReactComponent).attrs({
|
|
23
|
-
width: index.theme.sizes.md,
|
|
24
|
-
height: index.theme.sizes.md,
|
|
25
|
-
}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `transform:rotate(90deg);color:${index.theme.colors.neutral.ink.base};`;
|
|
26
|
-
const HorizontalContainer = styled__default.default(Stack.Stack).attrs({
|
|
27
|
-
direction: 'horizontal',
|
|
28
|
-
alignY: 'center',
|
|
29
|
-
}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--11udtca" }) `width:100%;`;
|
|
30
|
-
const VerticalContainer = styled__default.default(Stack.Stack).attrs({
|
|
31
|
-
spacing: 'xs',
|
|
32
|
-
}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--1tl5q7x" }) `width:100%;`;
|
|
33
|
-
const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--i2xz7h" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${index.theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
|
|
34
|
-
const ItemInfoContainer = styled__default.default.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--1gj2fqj" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
|
|
35
|
-
|
|
36
|
-
exports.HorizontalContainer = HorizontalContainer;
|
|
37
|
-
exports.InfoContainer = InfoContainer;
|
|
38
|
-
exports.ItemInfoContainer = ItemInfoContainer;
|
|
39
|
-
exports.LinkIcon = LinkIcon;
|
|
40
|
-
exports.StyledListItem = StyledListItem;
|
|
41
|
-
exports.VerticalContainer = VerticalContainer;
|
|
42
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n hovered: '#F0F7FC',\n pressed: '#E3F0FA',\n disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n appearance?: 'primary' | 'secondary';\n}>`\n border-radius: ${theme.radius.base};\n cursor: pointer;\n background-color: ${({ appearance = 'primary' }) =>\n appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n text-decoration: none;\n\n &[data-hovered] > div {\n background-color: ${colourStatesMap.hovered};\n }\n\n &[data-pressed] > div {\n background-color: ${colourStatesMap.pressed};\n }\n\n &[data-focused] {\n outline: 0;\n }\n\n &[data-focus-visible] > div {\n outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n z-index: 1;\n position: relative;\n }\n\n &[data-dragging] {\n background-color: ${theme.colors.neutral.grey.base};\n border-color: ${theme.colors.secondary.blue.base};\n }\n &[data-drop-target] {\n background-color: ${theme.colors.secondary.green.base};\n border-color: ${theme.colors.secondary.green.base};\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: ${colourStatesMap.disabled};\n opacity: 0.75;\n }\n\n & > div {\n padding: ${theme.sizes.sm};\n border-radius: ${theme.radius.base};\n }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n .react-aria-DropIndicator[data-drop-target] {\n outline: 2px solid ${theme.colors.secondary.blue.base};\n }\n\n width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n width: theme.sizes.md,\n height: theme.sizes.md,\n})`\n transform: rotate(90deg);\n color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n direction: 'horizontal',\n alignY: 'center',\n})`\n width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n spacing: 'xs',\n})`\n width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n hasItemInfoSlot: boolean;\n hasEndInfoSlot: boolean;\n}>`\n display: grid;\n grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n gap: ${theme.sizes.sm};\n width: 100%;\n align-items: center;\n min-width: 0;\n flex: 1;\n\n > *:last-child {\n justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n }\n`;\n\nexport const ItemInfoContainer = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n`;\n"],"names":["theme","styled","ListBoxItem","ListBox","ArrowUpIcon","Stack"],"mappings":"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"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const StyledListItem: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").ListBoxItemProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {
|
|
3
|
-
appearance?: "primary" | "secondary" | undefined;
|
|
4
|
-
}, never>;
|
|
5
|
-
export declare const StyledListBox: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").ListBoxProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
|
|
6
|
-
export declare const LinkIcon: import("styled-components").StyledComponent<(props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element, any, {
|
|
7
|
-
width: string;
|
|
8
|
-
height: string;
|
|
9
|
-
}, "height" | "width">;
|
|
10
|
-
export declare const HorizontalContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
|
|
11
|
-
direction: string;
|
|
12
|
-
alignY: string;
|
|
13
|
-
}, "direction" | "alignY">;
|
|
14
|
-
export declare const VerticalContainer: import("styled-components").StyledComponent<"div", any, import("../../Stack").StackProps & {
|
|
15
|
-
spacing: string;
|
|
16
|
-
}, "spacing">;
|
|
17
|
-
export declare const InfoContainer: import("styled-components").StyledComponent<"div", any, {
|
|
18
|
-
hasItemInfoSlot: boolean;
|
|
19
|
-
hasEndInfoSlot: boolean;
|
|
20
|
-
}, never>;
|
|
21
|
-
export declare const ItemInfoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { theme } from '../../../theme/index.js';
|
|
3
|
-
import { ListBoxItem, ListBox } from 'react-aria-components';
|
|
4
|
-
import 'react';
|
|
5
|
-
import { ReactComponent as ArrowUpIcon } from '../../../icons/design-system/components/ArrowUpIcon.js';
|
|
6
|
-
import { Stack } from '../../Stack/Stack.js';
|
|
7
|
-
import '../../Stack/types.js';
|
|
8
|
-
|
|
9
|
-
const colourStatesMap = {
|
|
10
|
-
hovered: '#F0F7FC',
|
|
11
|
-
pressed: '#E3F0FA',
|
|
12
|
-
disabled: theme.colors.neutral.grey.light,
|
|
13
|
-
};
|
|
14
|
-
const StyledListItem = styled(ListBoxItem).withConfig({ displayName: "vui--StyledListItem", componentId: "vui--16fm0j" }) `border-radius:${theme.radius.base};cursor:pointer;background-color:${({ appearance = 'primary' }) => appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};text-decoration:none;&[data-hovered] > div{background-color:${colourStatesMap.hovered};}&[data-pressed] > div{background-color:${colourStatesMap.pressed};}&[data-focused]{outline:0;}&[data-focus-visible] > div{outline:solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};z-index:1;position:relative;}&[data-dragging]{background-color:${theme.colors.neutral.grey.base};border-color:${theme.colors.secondary.blue.base};}&[data-drop-target]{background-color:${theme.colors.secondary.green.base};border-color:${theme.colors.secondary.green.base};}&[data-disabled]{cursor:not-allowed;background-color:${colourStatesMap.disabled};opacity:0.75;}& > div{padding:${theme.sizes.sm};border-radius:${theme.radius.base};}`;
|
|
15
|
-
styled(ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--6npxd" }) `.react-aria-DropIndicator[data-drop-target]{outline:2px solid ${theme.colors.secondary.blue.base};}width:100%;`;
|
|
16
|
-
const LinkIcon = styled(ArrowUpIcon).attrs({
|
|
17
|
-
width: theme.sizes.md,
|
|
18
|
-
height: theme.sizes.md,
|
|
19
|
-
}).withConfig({ displayName: "vui--LinkIcon", componentId: "vui--14ybt8l" }) `transform:rotate(90deg);color:${theme.colors.neutral.ink.base};`;
|
|
20
|
-
const HorizontalContainer = styled(Stack).attrs({
|
|
21
|
-
direction: 'horizontal',
|
|
22
|
-
alignY: 'center',
|
|
23
|
-
}).withConfig({ displayName: "vui--HorizontalContainer", componentId: "vui--11udtca" }) `width:100%;`;
|
|
24
|
-
const VerticalContainer = styled(Stack).attrs({
|
|
25
|
-
spacing: 'xs',
|
|
26
|
-
}).withConfig({ displayName: "vui--VerticalContainer", componentId: "vui--1tl5q7x" }) `width:100%;`;
|
|
27
|
-
const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--i2xz7h" }) `display:grid;grid-template-columns:${({ hasItemInfoSlot, hasEndInfoSlot }) => hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};gap:${theme.sizes.sm};width:100%;align-items:center;min-width:0;flex:1;> *:last-child{justify-self:${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};}`;
|
|
28
|
-
const ItemInfoContainer = styled.div.withConfig({ displayName: "vui--ItemInfoContainer", componentId: "vui--1gj2fqj" }) `display:flex;flex-direction:row;gap:8px;align-items:center;`;
|
|
29
|
-
|
|
30
|
-
export { HorizontalContainer, InfoContainer, ItemInfoContainer, LinkIcon, StyledListItem, VerticalContainer };
|
|
31
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItem/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\nimport { ListBox, ListBoxItem } from 'react-aria-components';\nimport { ArrowUpIcon } from '../../../icons';\nimport { Stack } from '../../Stack';\n\nconst colourStatesMap = {\n hovered: '#F0F7FC',\n pressed: '#E3F0FA',\n disabled: theme.colors.neutral.grey.light,\n};\n\nexport const StyledListItem = styled(ListBoxItem)<{\n appearance?: 'primary' | 'secondary';\n}>`\n border-radius: ${theme.radius.base};\n cursor: pointer;\n background-color: ${({ appearance = 'primary' }) =>\n appearance === 'primary' ? 'white' : theme.colors.neutral.grey.lightest};\n text-decoration: none;\n\n &[data-hovered] > div {\n background-color: ${colourStatesMap.hovered};\n }\n\n &[data-pressed] > div {\n background-color: ${colourStatesMap.pressed};\n }\n\n &[data-focused] {\n outline: 0;\n }\n\n &[data-focus-visible] > div {\n outline: solid ${theme.sizes.xs} ${theme.colors.secondary.blue.light};\n z-index: 1;\n position: relative;\n }\n\n &[data-dragging] {\n background-color: ${theme.colors.neutral.grey.base};\n border-color: ${theme.colors.secondary.blue.base};\n }\n &[data-drop-target] {\n background-color: ${theme.colors.secondary.green.base};\n border-color: ${theme.colors.secondary.green.base};\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: ${colourStatesMap.disabled};\n opacity: 0.75;\n }\n\n & > div {\n padding: ${theme.sizes.sm};\n border-radius: ${theme.radius.base};\n }\n`;\n\nexport const StyledListBox = styled(ListBox)`\n .react-aria-DropIndicator[data-drop-target] {\n outline: 2px solid ${theme.colors.secondary.blue.base};\n }\n\n width: 100%;\n`;\n\nexport const LinkIcon = styled(ArrowUpIcon).attrs({\n width: theme.sizes.md,\n height: theme.sizes.md,\n})`\n transform: rotate(90deg);\n color: ${theme.colors.neutral.ink.base};\n`;\n\nexport const HorizontalContainer = styled(Stack).attrs({\n direction: 'horizontal',\n alignY: 'center',\n})`\n width: 100%;\n`;\n\nexport const VerticalContainer = styled(Stack).attrs({\n spacing: 'xs',\n})`\n width: 100%;\n`;\n\nexport const InfoContainer = styled.div<{\n hasItemInfoSlot: boolean;\n hasEndInfoSlot: boolean;\n}>`\n display: grid;\n grid-template-columns: ${({ hasItemInfoSlot, hasEndInfoSlot }) =>\n hasItemInfoSlot && hasEndInfoSlot ? 'auto 1fr 1fr' : 'auto 1fr'};\n gap: ${theme.sizes.sm};\n width: 100%;\n align-items: center;\n min-width: 0;\n flex: 1;\n\n > *:last-child {\n justify-self: ${({ hasEndInfoSlot }) => (hasEndInfoSlot ? 'end' : 'start')};\n }\n`;\n\nexport const ItemInfoContainer = styled.div`\n display: flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n`;\n"],"names":[],"mappings":";;;;;;;;AAMA,MAAM,eAAe,GAAG;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK;CAC1C;AAEM,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAG9B,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAEd,iCAAA,EAAA,CAAC,EAAE,UAAU,GAAG,SAAS,EAAE,KAC7C,UAAU,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,6DAAA,EAInD,eAAe,CAAC,OAAO,CAAA,yCAAA,EAIvB,eAAe,CAAC,OAAO,CAAA,uEAAA,EAQ1B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gEAAA,EAMhD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,cAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAG5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,cAAA,EACrC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAA,uDAAA,EAK7B,eAAe,CAAC,QAAQ,CAAA,+BAAA,EAKjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,EAAA;AAIT,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,8DAAA,EAEnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;AAM5C,MAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AACrB,IAAA,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;CACvB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAES,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;AAG3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACrD,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,QAAQ;AACjB,CAAA,CAAC;AAIW,MAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;AACnD,IAAA,OAAO,EAAE,IAAI;AACd,CAAA,CAAC;AAIW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,mCAAA,EAKZ,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,KAC3D,eAAe,IAAI,cAAc,GAAG,cAAc,GAAG,UAAU,CAC1D,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,iFAOH,CAAC,EAAE,cAAc,EAAE,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC,CAAA,EAAA;MAIjE,iBAAiB,GAAG,MAAM,CAAC,GAAG;;;;"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var reactAriaComponents = require('react-aria-components');
|
|
4
|
-
var styled = require('styled-components');
|
|
5
|
-
var index = require('../../../theme/index.cjs');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
|
-
|
|
9
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
10
|
-
|
|
11
|
-
const InfoContainer = styled__default.default.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `display:flex;flex-direction:row;align-items:center;gap:${index.theme.sizes.sm};`;
|
|
12
|
-
const StyledSection = styled__default.default(reactAriaComponents.Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--6na2yk" }) `border-radius:${index.theme.sizes.base};`;
|
|
13
|
-
|
|
14
|
-
exports.InfoContainer = InfoContainer;
|
|
15
|
-
exports.StyledSection = StyledSection;
|
|
16
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n border-radius: ${theme.sizes.base};\n`;\n"],"names":["styled","theme","Section"],"mappings":";;;;;;;;;;AAIO,MAAM,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAGD,uBAAM,CAACE,2BAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzBD,WAAK,CAAC,KAAK,CAAC,IAAI;;;;;"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const InfoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
-
export declare const StyledSection: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").SectionProps<T> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Section } from 'react-aria-components';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { theme } from '../../../theme/index.js';
|
|
4
|
-
|
|
5
|
-
const InfoContainer = styled.div.withConfig({ displayName: "vui--InfoContainer", componentId: "vui--1q1w6zs" }) `display:flex;flex-direction:row;align-items:center;gap:${theme.sizes.sm};`;
|
|
6
|
-
const StyledSection = styled(Section).withConfig({ displayName: "vui--StyledSection", componentId: "vui--6na2yk" }) `border-radius:${theme.sizes.base};`;
|
|
7
|
-
|
|
8
|
-
export { InfoContainer, StyledSection };
|
|
9
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../src/components/SelectDropdown/ListItemSection/styled.ts"],"sourcesContent":["import { Section } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const InfoContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${theme.sizes.sm};\n`;\n\nexport const StyledSection = styled(Section)`\n border-radius: ${theme.sizes.base};\n`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAI9B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,cAAA,EACzB,KAAK,CAAC,KAAK,CAAC,IAAI;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var reactAriaComponents = require('react-aria-components');
|
|
5
|
-
var index = require('../../theme/index.cjs');
|
|
6
|
-
var inputStyles = require('../../utils/forms/inputStyles.cjs');
|
|
7
|
-
var Button = require('../Button/Button.cjs');
|
|
8
|
-
var Dropdown = require('../Dropdown/Dropdown.cjs');
|
|
9
|
-
var Search = require('../Search/Search.cjs');
|
|
10
|
-
var styled$1 = require('../Select/styled.cjs');
|
|
11
|
-
|
|
12
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
13
|
-
|
|
14
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
15
|
-
|
|
16
|
-
const StyledListBox = styled__default.default(reactAriaComponents.ListBox).withConfig({ displayName: "vui--StyledListBox", componentId: "vui--1fqdcy1" }) `overflow-y:scroll;max-height:300px;padding:${index.theme.sizes.sm};scroll-padding:${index.theme.sizes.xs} 0;&[data-empty]{display:flex;align-items:center;justify-content:center;}`;
|
|
17
|
-
const StyledDropdown = styled__default.default(Dropdown.Dropdown).withConfig({ displayName: "vui--StyledDropdown", componentId: "vui--to2qbd" }) `padding:0;`;
|
|
18
|
-
// Create a styled button that uses the base input styles and the dropdown indicator styles
|
|
19
|
-
// to replicate the `<Select>` component's appearance.
|
|
20
|
-
const StyledSelectButton = styled__default.default.button.withConfig({ displayName: "vui--StyledSelectButton", componentId: "vui--bwmo8j" }) `${inputStyles.inputFullStyles} ${styled$1.dropdownIndicatorStyles}`;
|
|
21
|
-
const StyledSearch = styled__default.default(Search.Search).withConfig({ displayName: "vui--StyledSearch", componentId: "vui--68uxvn" }) `margin:${index.theme.sizes.sm};`;
|
|
22
|
-
const Separator = styled__default.default.hr.withConfig({ displayName: "vui--Separator", componentId: "vui--1yelizc" }) `height:1px;background:${index.theme.colors.neutral.grey.base};border:none;margin:0 0;width:100%;`;
|
|
23
|
-
const CTAButton = styled__default.default(Button.Button).attrs({
|
|
24
|
-
variant: 'flat',
|
|
25
|
-
}).withConfig({ displayName: "vui--CTAButton", componentId: "vui--fe7n0c" }) `justify-content:start;padding-left:${index.theme.sizes.xs};margin:${index.theme.sizes.sm} ${index.theme.sizes.xs};border-radius:${index.theme.radius.base};font-size:14px;svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
|
|
26
|
-
|
|
27
|
-
exports.CTAButton = CTAButton;
|
|
28
|
-
exports.Separator = Separator;
|
|
29
|
-
exports.StyledDropdown = StyledDropdown;
|
|
30
|
-
exports.StyledListBox = StyledListBox;
|
|
31
|
-
exports.StyledSearch = StyledSearch;
|
|
32
|
-
exports.StyledSelectButton = StyledSelectButton;
|
|
33
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/SelectDropdown/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { ListBox } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { Button } from '../Button';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { dropdownIndicatorStyles } from '../Select/styled';\n\nexport const StyledListBox = styled(ListBox)`\n overflow-y: scroll;\n max-height: 300px;\n padding: ${theme.sizes.sm};\n scroll-padding: ${theme.sizes.xs} 0;\n\n &[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n`;\n\nexport const StyledDropdown = styled(Dropdown)`\n padding: 0;\n`;\n\n// Create a styled button that uses the base input styles and the dropdown indicator styles\n// to replicate the `<Select>` component's appearance.\nexport const StyledSelectButton = styled.button`\n ${inputFullStyles}\n ${dropdownIndicatorStyles}\n`;\n\nexport const StyledSearch = styled(Search)`\n margin: ${theme.sizes.sm};\n`;\n\nexport const Separator = styled.hr`\n height: 1px;\n background: ${theme.colors.neutral.grey.base};\n border: none;\n margin: 0 0;\n width: 100%;\n`;\n\nexport const CTAButton = styled(Button).attrs({\n variant: 'flat',\n})`\n justify-content: start;\n padding-left: ${theme.sizes.xs};\n margin: ${theme.sizes.sm} ${theme.sizes.xs};\n border-radius: ${theme.radius.base};\n font-size: 14px;\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n"],"names":["styled","ListBox","theme","Dropdown","inputFullStyles","dropdownIndicatorStyles","Search","Button"],"mappings":";;;;;;;;;;;;;;;MASa,aAAa,GAAGA,uBAAM,CAACC,2BAAO,CAAC,CAG/B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACP,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,yEAAA;MASrB,cAAc,GAAGF,uBAAM,CAACG,iBAAQ,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA;AAI9C;AACA;AACO,MAAM,kBAAkB,GAAGH,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EAC3CI,2BAAe,CAAA,CAAA,EACfC,gCAAuB,CAAA;AAGpB,MAAM,YAAY,GAAGL,uBAAM,CAACM,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAC9BJ,WAAK,CAAC,KAAK,CAAC,EAAE;AAGb,MAAA,SAAS,GAAGF,uBAAM,CAAC,EAAE,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAAE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAMjC,MAAA,SAAS,GAAGF,uBAAM,CAACO,aAAM,CAAC,CAAC,KAAK,CAAC;AAC5C,IAAA,OAAO,EAAE,MAAM;AAChB,CAAA,CAAC,iHAEgBL,WAAK,CAAC,KAAK,CAAC,EAAE,CACpB,QAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA,EAAIA,WAAK,CAAC,KAAK,CAAC,EAAE,CACzB,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,0BAAA,EAGvBA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE;;;;;;;;;"}
|