@wistia/ui 0.0.18 → 0.0.19
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/index.cjs +179 -27
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +50 -2
- package/dist/index.d.ts +50 -2
- package/dist/index.mjs +180 -29
- package/dist/index.mjs.map +1 -1
- package/package.json +20 -20
package/dist/index.d.mts
CHANGED
|
@@ -126,7 +126,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
|
|
|
126
126
|
label: string;
|
|
127
127
|
};
|
|
128
128
|
/**
|
|
129
|
-
* A
|
|
129
|
+
* A `Badge` is a compact label, with optional icon, to convey status or context.
|
|
130
130
|
*/
|
|
131
131
|
declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
132
132
|
/**
|
|
@@ -1446,6 +1446,54 @@ declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps
|
|
|
1446
1446
|
renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
|
|
1447
1447
|
})>, never> & Record<string, never>;
|
|
1448
1448
|
|
|
1449
|
+
type TagProps = ComponentPropsWithoutRef<'div'> & {
|
|
1450
|
+
/**
|
|
1451
|
+
* Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
|
|
1452
|
+
*/
|
|
1453
|
+
colorScheme?: ColorSchemeTypes;
|
|
1454
|
+
/**
|
|
1455
|
+
* Valid URL for the `Tag` label to link to
|
|
1456
|
+
*/
|
|
1457
|
+
href?: string;
|
|
1458
|
+
/**
|
|
1459
|
+
* Text label for the `Tag`
|
|
1460
|
+
*/
|
|
1461
|
+
label: ReactNode;
|
|
1462
|
+
/**
|
|
1463
|
+
* Callback function to be called when the `x` button is clicked
|
|
1464
|
+
*/
|
|
1465
|
+
onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
|
|
1466
|
+
/**
|
|
1467
|
+
* Accessible label for the `x` button (ie. "Remove tag")
|
|
1468
|
+
*/
|
|
1469
|
+
onClickRemoveLabel?: string | undefined;
|
|
1470
|
+
};
|
|
1471
|
+
/**
|
|
1472
|
+
* A `Tag` is an optionally linked label, with an optional action button, to categorize content.
|
|
1473
|
+
*/
|
|
1474
|
+
declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
1475
|
+
/**
|
|
1476
|
+
* Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
|
|
1477
|
+
*/
|
|
1478
|
+
colorScheme?: ColorSchemeTypes;
|
|
1479
|
+
/**
|
|
1480
|
+
* Valid URL for the `Tag` label to link to
|
|
1481
|
+
*/
|
|
1482
|
+
href?: string;
|
|
1483
|
+
/**
|
|
1484
|
+
* Text label for the `Tag`
|
|
1485
|
+
*/
|
|
1486
|
+
label: ReactNode;
|
|
1487
|
+
/**
|
|
1488
|
+
* Callback function to be called when the `x` button is clicked
|
|
1489
|
+
*/
|
|
1490
|
+
onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
|
|
1491
|
+
/**
|
|
1492
|
+
* Accessible label for the `x` button (ie. "Remove tag")
|
|
1493
|
+
*/
|
|
1494
|
+
onClickRemoveLabel?: string | undefined;
|
|
1495
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
1496
|
+
|
|
1449
1497
|
type TooltipProps = {
|
|
1450
1498
|
/**
|
|
1451
1499
|
* The content of the tooltip
|
|
@@ -1525,4 +1573,4 @@ declare const WistiaLogo: {
|
|
|
1525
1573
|
displayName: string;
|
|
1526
1574
|
};
|
|
1527
1575
|
|
|
1528
|
-
export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
|
|
1576
|
+
export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
|
package/dist/index.d.ts
CHANGED
|
@@ -126,7 +126,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
|
|
|
126
126
|
label: string;
|
|
127
127
|
};
|
|
128
128
|
/**
|
|
129
|
-
* A
|
|
129
|
+
* A `Badge` is a compact label, with optional icon, to convey status or context.
|
|
130
130
|
*/
|
|
131
131
|
declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
132
132
|
/**
|
|
@@ -1446,6 +1446,54 @@ declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps
|
|
|
1446
1446
|
renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
|
|
1447
1447
|
})>, never> & Record<string, never>;
|
|
1448
1448
|
|
|
1449
|
+
type TagProps = ComponentPropsWithoutRef<'div'> & {
|
|
1450
|
+
/**
|
|
1451
|
+
* Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
|
|
1452
|
+
*/
|
|
1453
|
+
colorScheme?: ColorSchemeTypes;
|
|
1454
|
+
/**
|
|
1455
|
+
* Valid URL for the `Tag` label to link to
|
|
1456
|
+
*/
|
|
1457
|
+
href?: string;
|
|
1458
|
+
/**
|
|
1459
|
+
* Text label for the `Tag`
|
|
1460
|
+
*/
|
|
1461
|
+
label: ReactNode;
|
|
1462
|
+
/**
|
|
1463
|
+
* Callback function to be called when the `x` button is clicked
|
|
1464
|
+
*/
|
|
1465
|
+
onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
|
|
1466
|
+
/**
|
|
1467
|
+
* Accessible label for the `x` button (ie. "Remove tag")
|
|
1468
|
+
*/
|
|
1469
|
+
onClickRemoveLabel?: string | undefined;
|
|
1470
|
+
};
|
|
1471
|
+
/**
|
|
1472
|
+
* A `Tag` is an optionally linked label, with an optional action button, to categorize content.
|
|
1473
|
+
*/
|
|
1474
|
+
declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
1475
|
+
/**
|
|
1476
|
+
* Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
|
|
1477
|
+
*/
|
|
1478
|
+
colorScheme?: ColorSchemeTypes;
|
|
1479
|
+
/**
|
|
1480
|
+
* Valid URL for the `Tag` label to link to
|
|
1481
|
+
*/
|
|
1482
|
+
href?: string;
|
|
1483
|
+
/**
|
|
1484
|
+
* Text label for the `Tag`
|
|
1485
|
+
*/
|
|
1486
|
+
label: ReactNode;
|
|
1487
|
+
/**
|
|
1488
|
+
* Callback function to be called when the `x` button is clicked
|
|
1489
|
+
*/
|
|
1490
|
+
onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
|
|
1491
|
+
/**
|
|
1492
|
+
* Accessible label for the `x` button (ie. "Remove tag")
|
|
1493
|
+
*/
|
|
1494
|
+
onClickRemoveLabel?: string | undefined;
|
|
1495
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
1496
|
+
|
|
1449
1497
|
type TooltipProps = {
|
|
1450
1498
|
/**
|
|
1451
1499
|
* The content of the tooltip
|
|
@@ -1525,4 +1573,4 @@ declare const WistiaLogo: {
|
|
|
1525
1573
|
displayName: string;
|
|
1526
1574
|
};
|
|
1527
1575
|
|
|
1528
|
-
export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
|
|
1576
|
+
export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.0.
|
|
3
|
+
* @license @wistia/ui v0.0.19
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -822,7 +822,7 @@ var colorAliasTokens = css4`
|
|
|
822
822
|
|
|
823
823
|
/* --- Default --- */
|
|
824
824
|
--wui-color-bg-fill: var(--wui-blue-9);
|
|
825
|
-
--wui-color-bg-fill-active: var(--wui-blue-
|
|
825
|
+
--wui-color-bg-fill-active: var(--wui-blue-11);
|
|
826
826
|
--wui-color-bg-fill-hover: var(--wui-blue-10);
|
|
827
827
|
--wui-color-bg-surface: var(--wui-gray-surface);
|
|
828
828
|
--wui-color-bg-surface-active: var(--wui-gray-4);
|
|
@@ -844,6 +844,7 @@ var colorAliasTokens = css4`
|
|
|
844
844
|
--wui-color-text-link: var(--wui-blue-9);
|
|
845
845
|
--wui-color-text-on-fill: var(--wui-gray-contrast);
|
|
846
846
|
--wui-color-text-secondary: var(--wui-gray-11);
|
|
847
|
+
--wui-color-focus-ring: var(--wui-blue-9);
|
|
847
848
|
|
|
848
849
|
/* --- Semantic --- */
|
|
849
850
|
|
|
@@ -871,6 +872,7 @@ var colorAliasTokens = css4`
|
|
|
871
872
|
--wui-color-text-link-error: var(--wui-error-11);
|
|
872
873
|
--wui-color-text-on-fill-error: var(--wui-error-contrast);
|
|
873
874
|
--wui-color-text-secondary-error: var(--wui-error-11);
|
|
875
|
+
--wui-color-focus-ring-error: var(--wui-error-9);
|
|
874
876
|
|
|
875
877
|
/* Info */
|
|
876
878
|
--wui-color-bg-fill-active-info: var(--wui-blue-11);
|
|
@@ -896,6 +898,7 @@ var colorAliasTokens = css4`
|
|
|
896
898
|
--wui-color-text-link-info: var(--wui-blue-9);
|
|
897
899
|
--wui-color-text-on-fill-info: var(--wui-blue-contrast);
|
|
898
900
|
--wui-color-text-secondary-info: var(--wui-blue-11);
|
|
901
|
+
--wui-color-focus-ring-info: var(--wui-blue-9);
|
|
899
902
|
|
|
900
903
|
/* Success */
|
|
901
904
|
--wui-color-bg-fill-active-success: var(--wui-success-11);
|
|
@@ -921,6 +924,7 @@ var colorAliasTokens = css4`
|
|
|
921
924
|
--wui-color-text-on-fill-success: var(--wui-success-contrast);
|
|
922
925
|
--wui-color-text-secondary-success: var(--wui-success-11);
|
|
923
926
|
--wui-color-text-success: var(--wui-success-11);
|
|
927
|
+
--wui-color-focus-ring-success: var(--wui-success-9);
|
|
924
928
|
|
|
925
929
|
/* Warning */
|
|
926
930
|
--wui-color-bg-fill-active-warning: var(--wui-warning-11);
|
|
@@ -946,6 +950,7 @@ var colorAliasTokens = css4`
|
|
|
946
950
|
--wui-color-text-on-fill-warning: var(--wui-warning-contrast);
|
|
947
951
|
--wui-color-text-secondary-warning: var(--wui-warning-11);
|
|
948
952
|
--wui-color-text-warning: var(--wui-warning-11);
|
|
953
|
+
--wui-color-focus-ring-warning: var(--wui-warning-9);
|
|
949
954
|
|
|
950
955
|
/* --- Accent --- */
|
|
951
956
|
|
|
@@ -973,6 +978,7 @@ var colorAliasTokens = css4`
|
|
|
973
978
|
--wui-color-text-link-blue: var(--wui-blue-9);
|
|
974
979
|
--wui-color-text-on-fill-blue: var(--wui-blue-contrast);
|
|
975
980
|
--wui-color-text-secondary-blue: var(--wui-blue-5);
|
|
981
|
+
--wui-color-focus-ring-blue: var(--wui-blue-9);
|
|
976
982
|
|
|
977
983
|
/* Green */
|
|
978
984
|
--wui-color-bg-fill-active-green: var(--wui-green-11);
|
|
@@ -998,6 +1004,7 @@ var colorAliasTokens = css4`
|
|
|
998
1004
|
--wui-color-text-link-green: var(--wui-green-11);
|
|
999
1005
|
--wui-color-text-on-fill-green: var(--wui-green-contrast);
|
|
1000
1006
|
--wui-color-text-secondary-green: var(--wui-green-10);
|
|
1007
|
+
--wui-color-focus-ring-green: var(--wui-green-9);
|
|
1001
1008
|
|
|
1002
1009
|
/* Orange */
|
|
1003
1010
|
--wui-color-bg-fill-active-orange: var(--wui-orange-11);
|
|
@@ -1023,6 +1030,7 @@ var colorAliasTokens = css4`
|
|
|
1023
1030
|
--wui-color-text-on-fill-orange: var(--wui-orange-contrast);
|
|
1024
1031
|
--wui-color-text-orange: var(--wui-orange-11);
|
|
1025
1032
|
--wui-color-text-secondary-orange: var(--wui-orange-10);
|
|
1033
|
+
--wui-color-focus-ring-orange: var(--wui-orange-9);
|
|
1026
1034
|
|
|
1027
1035
|
/* Pink */
|
|
1028
1036
|
--wui-color-bg-fill-active-pink: var(--wui-pink-11);
|
|
@@ -1048,6 +1056,7 @@ var colorAliasTokens = css4`
|
|
|
1048
1056
|
--wui-color-text-on-fill-pink: var(--wui-pink-contrast);
|
|
1049
1057
|
--wui-color-text-pink: var(--wui-pink-11);
|
|
1050
1058
|
--wui-color-text-secondary-pink: var(--wui-pink-10);
|
|
1059
|
+
--wui-color-focus-ring-pink: var(--wui-pink-9);
|
|
1051
1060
|
|
|
1052
1061
|
/* Purple */
|
|
1053
1062
|
--wui-color-bg-fill-active-purple: var(--wui-purple-11);
|
|
@@ -1073,6 +1082,7 @@ var colorAliasTokens = css4`
|
|
|
1073
1082
|
--wui-color-text-on-fill-purple: var(--wui-purple-contrast);
|
|
1074
1083
|
--wui-color-text-purple: var(--wui-purple-11);
|
|
1075
1084
|
--wui-color-text-secondary-purple: var(--wui-purple-11);
|
|
1085
|
+
--wui-color-focus-ring-purple: var(--wui-purple-9);
|
|
1076
1086
|
|
|
1077
1087
|
/* Yellow */
|
|
1078
1088
|
--wui-color-bg-fill-active-yellow: var(--wui-yellow-11);
|
|
@@ -1098,6 +1108,7 @@ var colorAliasTokens = css4`
|
|
|
1098
1108
|
--wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);
|
|
1099
1109
|
--wui-color-text-secondary-yellow: var(--wui-yellow-10);
|
|
1100
1110
|
--wui-color-text-yellow: var(--wui-yellow-11);
|
|
1111
|
+
--wui-color-focus-ring-yellow: var(--wui-yellow-9);
|
|
1101
1112
|
|
|
1102
1113
|
/* --- Misc --- */
|
|
1103
1114
|
--wui-color-bg-fill-white: #ffffff;
|
|
@@ -1541,7 +1552,8 @@ var colorSchemeSchema = [
|
|
|
1541
1552
|
{ token: "border-secondary-hover", step: "10" },
|
|
1542
1553
|
{ token: "border-secondary-active", step: "11" },
|
|
1543
1554
|
{ token: "icon", step: "11" },
|
|
1544
|
-
{ token: "icon-on-fill", step: "contrast" }
|
|
1555
|
+
{ token: "icon-on-fill", step: "contrast" },
|
|
1556
|
+
{ token: "focus-ring", step: "9" }
|
|
1545
1557
|
];
|
|
1546
1558
|
var defaultScheme = css9`
|
|
1547
1559
|
--wui-color-bg-surface: var(--wui-gray-surface);
|
|
@@ -1553,7 +1565,7 @@ var defaultScheme = css9`
|
|
|
1553
1565
|
--wui-color-bg-surface-tertiary: var(--wui-gray-5);
|
|
1554
1566
|
--wui-color-bg-fill: var(--wui-blue-9);
|
|
1555
1567
|
--wui-color-bg-fill-hover: var(--wui-blue-10);
|
|
1556
|
-
--wui-color-bg-fill-active: var(--wui-blue-
|
|
1568
|
+
--wui-color-bg-fill-active: var(--wui-blue-11);
|
|
1557
1569
|
--wui-color-text: var(--wui-gray-12);
|
|
1558
1570
|
--wui-color-text-high-contrast: var(--wui-gray-12);
|
|
1559
1571
|
--wui-color-text-link: var(--wui-blue-9);
|
|
@@ -1567,6 +1579,7 @@ var defaultScheme = css9`
|
|
|
1567
1579
|
--wui-color-border-secondary-active: var(--wui-gray-11);
|
|
1568
1580
|
--wui-color-icon: var(--wui-gray-11);
|
|
1569
1581
|
--wui-color-icon-on-fill: var(--wui-gray-contrast);
|
|
1582
|
+
--wui-color-focus-ring: var(--wui-blue-9);
|
|
1570
1583
|
`;
|
|
1571
1584
|
var getColorScheme = (colorScheme) => {
|
|
1572
1585
|
if (colorScheme === "inherit") {
|
|
@@ -2080,19 +2093,18 @@ var buttonBaseStyles = css11`
|
|
|
2080
2093
|
background: var(--button-color-bg-active);
|
|
2081
2094
|
}
|
|
2082
2095
|
|
|
2083
|
-
&:focus
|
|
2084
|
-
&.force-state-focus {
|
|
2096
|
+
&:focus {
|
|
2085
2097
|
outline: none;
|
|
2086
2098
|
}
|
|
2087
2099
|
|
|
2088
|
-
&:focus-visible
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2100
|
+
&:focus-visible,
|
|
2101
|
+
&.force-state-focus {
|
|
2102
|
+
outline: 2px solid var(--wui-color-focus-ring);
|
|
2103
|
+
outline-offset: 2px;
|
|
2104
|
+
background: var(--button-color-bg-hover);
|
|
2093
2105
|
|
|
2094
2106
|
&[aria-disabled='true'] {
|
|
2095
|
-
outline:
|
|
2107
|
+
outline-color: var(--wui-color-border-disabled);
|
|
2096
2108
|
}
|
|
2097
2109
|
}
|
|
2098
2110
|
|
|
@@ -5547,9 +5559,7 @@ var Button = forwardRef3(
|
|
|
5547
5559
|
$size: responsiveSize,
|
|
5548
5560
|
$unstyled: unstyled,
|
|
5549
5561
|
$variant: variant,
|
|
5550
|
-
className
|
|
5551
|
-
forceState,
|
|
5552
|
-
isLoading
|
|
5562
|
+
className
|
|
5553
5563
|
};
|
|
5554
5564
|
if (forceState) {
|
|
5555
5565
|
commonProps.className = `${className ?? ""} force-state-${forceState}`;
|
|
@@ -6918,27 +6928,167 @@ var StackComponent = forwardRef10(
|
|
|
6918
6928
|
StackComponent.displayName = "Stack";
|
|
6919
6929
|
var Stack = makePolymorphic(StackComponent);
|
|
6920
6930
|
|
|
6921
|
-
// src/components/
|
|
6931
|
+
// src/components/Tag/Tag.tsx
|
|
6932
|
+
import { forwardRef as forwardRef11 } from "react";
|
|
6922
6933
|
import styled25 from "styled-components";
|
|
6923
|
-
import { isNotNil as isNotNil9 } from "@wistia/type-guards";
|
|
6924
|
-
import { jsx as jsx184, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
6934
|
+
import { isNil as isNil10, isNotNil as isNotNil9, isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
|
|
6935
|
+
import { Fragment as Fragment2, jsx as jsx184, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
6936
|
+
var TagLabel = styled25.a`
|
|
6937
|
+
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
6938
|
+
font-size: var(--wui-typography-label-4-size);
|
|
6939
|
+
font-weight: var(--wui-typography-label-4-weight);
|
|
6940
|
+
line-height: var(--wui-typography-label-4-line-height);
|
|
6941
|
+
border-radius: var(--wui-border-radius-01);
|
|
6942
|
+
align-items: center;
|
|
6943
|
+
color: var(--wui-color-text-high-contrast);
|
|
6944
|
+
text-decoration: none;
|
|
6945
|
+
padding: var(--wui-space-01);
|
|
6946
|
+
|
|
6947
|
+
:not(:only-child) {
|
|
6948
|
+
padding-right: var(--wui-space-01);
|
|
6949
|
+
}
|
|
6950
|
+
|
|
6951
|
+
:is(a):hover {
|
|
6952
|
+
background: var(--wui-color-bg-surface-secondary-hover);
|
|
6953
|
+
}
|
|
6954
|
+
|
|
6955
|
+
:is(a):active {
|
|
6956
|
+
background: var(--wui-color-bg-surface-secondary-active);
|
|
6957
|
+
}
|
|
6958
|
+
|
|
6959
|
+
:focus-visible {
|
|
6960
|
+
outline: unset;
|
|
6961
|
+
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
6962
|
+
}
|
|
6963
|
+
`;
|
|
6964
|
+
var TagDivider = styled25.div`
|
|
6965
|
+
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
6966
|
+
border-left: 1px solid var(--wui-color-border);
|
|
6967
|
+
display: flex;
|
|
6968
|
+
height: 14px;
|
|
6969
|
+
width: 1px;
|
|
6970
|
+
`;
|
|
6971
|
+
var StyledRemoveButton = styled25.button`
|
|
6972
|
+
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
6973
|
+
all: unset;
|
|
6974
|
+
cursor: pointer;
|
|
6975
|
+
display: flex;
|
|
6976
|
+
height: 22px;
|
|
6977
|
+
width: 12px;
|
|
6978
|
+
align-items: center;
|
|
6979
|
+
padding: 0 var(--wui-space-01);
|
|
6980
|
+
border-radius: var(--wui-border-radius-01);
|
|
6981
|
+
|
|
6982
|
+
svg path {
|
|
6983
|
+
fill: var(--wui-color-icon);
|
|
6984
|
+
}
|
|
6985
|
+
|
|
6986
|
+
:hover {
|
|
6987
|
+
background: var(--wui-color-bg-surface-secondary-hover);
|
|
6988
|
+
}
|
|
6989
|
+
|
|
6990
|
+
:active {
|
|
6991
|
+
background: var(--wui-color-bg-surface-secondary-active);
|
|
6992
|
+
}
|
|
6993
|
+
|
|
6994
|
+
:focus-visible {
|
|
6995
|
+
outline: unset;
|
|
6996
|
+
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
6997
|
+
}
|
|
6998
|
+
`;
|
|
6999
|
+
var StyledTag = styled25.div`
|
|
7000
|
+
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7001
|
+
align-items: center;
|
|
7002
|
+
background-color: var(--wui-color-bg-surface-secondary);
|
|
7003
|
+
border-radius: var(--wui-border-radius-01);
|
|
7004
|
+
display: inline-flex;
|
|
7005
|
+
overflow: hidden;
|
|
7006
|
+
`;
|
|
7007
|
+
var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
|
|
7008
|
+
if (isNil10(onClickRemove)) {
|
|
7009
|
+
return null;
|
|
7010
|
+
}
|
|
7011
|
+
if (isNil10(onClickRemoveLabel)) {
|
|
7012
|
+
throw new Error(
|
|
7013
|
+
"for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
|
|
7014
|
+
);
|
|
7015
|
+
}
|
|
7016
|
+
return /* @__PURE__ */ jsxs12(Fragment2, { children: [
|
|
7017
|
+
/* @__PURE__ */ jsx184(TagDivider, { $colorScheme: colorScheme }),
|
|
7018
|
+
/* @__PURE__ */ jsxs12(
|
|
7019
|
+
StyledRemoveButton,
|
|
7020
|
+
{
|
|
7021
|
+
$colorScheme: colorScheme,
|
|
7022
|
+
onClick: onClickRemove,
|
|
7023
|
+
type: "button",
|
|
7024
|
+
children: [
|
|
7025
|
+
/* @__PURE__ */ jsx184(
|
|
7026
|
+
Icon,
|
|
7027
|
+
{
|
|
7028
|
+
size: "sm",
|
|
7029
|
+
type: "close"
|
|
7030
|
+
}
|
|
7031
|
+
),
|
|
7032
|
+
/* @__PURE__ */ jsx184(ScreenReaderOnly, { children: onClickRemoveLabel })
|
|
7033
|
+
]
|
|
7034
|
+
}
|
|
7035
|
+
)
|
|
7036
|
+
] });
|
|
7037
|
+
};
|
|
7038
|
+
var Tag = forwardRef11(
|
|
7039
|
+
({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
|
|
7040
|
+
const labelProps = isNotNil9(href) && isNonEmptyString3(href) ? { href, as: "a" } : { as: "span" };
|
|
7041
|
+
return /* @__PURE__ */ jsxs12(
|
|
7042
|
+
StyledTag,
|
|
7043
|
+
{
|
|
7044
|
+
ref,
|
|
7045
|
+
$colorScheme: colorScheme,
|
|
7046
|
+
...otherProps,
|
|
7047
|
+
children: [
|
|
7048
|
+
/* @__PURE__ */ jsx184(
|
|
7049
|
+
TagLabel,
|
|
7050
|
+
{
|
|
7051
|
+
...labelProps,
|
|
7052
|
+
$colorScheme: colorScheme,
|
|
7053
|
+
children: label
|
|
7054
|
+
}
|
|
7055
|
+
),
|
|
7056
|
+
/* @__PURE__ */ jsx184(
|
|
7057
|
+
RemoveButton,
|
|
7058
|
+
{
|
|
7059
|
+
colorScheme,
|
|
7060
|
+
onClickRemove,
|
|
7061
|
+
onClickRemoveLabel
|
|
7062
|
+
}
|
|
7063
|
+
)
|
|
7064
|
+
]
|
|
7065
|
+
}
|
|
7066
|
+
);
|
|
7067
|
+
}
|
|
7068
|
+
);
|
|
7069
|
+
Tag.displayName = "Tag";
|
|
7070
|
+
|
|
7071
|
+
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
7072
|
+
import styled26 from "styled-components";
|
|
7073
|
+
import { isNotNil as isNotNil10 } from "@wistia/type-guards";
|
|
7074
|
+
import { jsx as jsx185, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
6925
7075
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
6926
7076
|
if (iconOnly) {
|
|
6927
|
-
return /* @__PURE__ */
|
|
7077
|
+
return /* @__PURE__ */ jsx185(
|
|
6928
7078
|
"g",
|
|
6929
7079
|
{
|
|
6930
7080
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
6931
7081
|
fill: brandmarkColor,
|
|
6932
|
-
children: /* @__PURE__ */
|
|
7082
|
+
children: /* @__PURE__ */ jsx185("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
6933
7083
|
}
|
|
6934
7084
|
);
|
|
6935
7085
|
}
|
|
6936
|
-
return /* @__PURE__ */
|
|
7086
|
+
return /* @__PURE__ */ jsx185(
|
|
6937
7087
|
"g",
|
|
6938
7088
|
{
|
|
6939
7089
|
"data-testid": "ui-wistia-logo-brandmark",
|
|
6940
7090
|
fill: brandmarkColor,
|
|
6941
|
-
children: /* @__PURE__ */
|
|
7091
|
+
children: /* @__PURE__ */ jsx185("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
|
|
6942
7092
|
}
|
|
6943
7093
|
);
|
|
6944
7094
|
};
|
|
@@ -6946,12 +7096,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
|
|
|
6946
7096
|
if (iconOnly) {
|
|
6947
7097
|
return null;
|
|
6948
7098
|
}
|
|
6949
|
-
return /* @__PURE__ */
|
|
7099
|
+
return /* @__PURE__ */ jsx185(
|
|
6950
7100
|
"g",
|
|
6951
7101
|
{
|
|
6952
7102
|
"data-testid": "ui-wistia-logo-logotype",
|
|
6953
7103
|
fill: logotypeColor,
|
|
6954
|
-
children: /* @__PURE__ */
|
|
7104
|
+
children: /* @__PURE__ */ jsx185("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
|
|
6955
7105
|
}
|
|
6956
7106
|
);
|
|
6957
7107
|
};
|
|
@@ -6961,7 +7111,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
6961
7111
|
}
|
|
6962
7112
|
return "0 0 144 31.47";
|
|
6963
7113
|
};
|
|
6964
|
-
var WistiaLogoComponent =
|
|
7114
|
+
var WistiaLogoComponent = styled26.svg`
|
|
6965
7115
|
height: ${({ height }) => `${height}px`};
|
|
6966
7116
|
|
|
6967
7117
|
/* ensure it will always fit on mobile */
|
|
@@ -7003,7 +7153,7 @@ var WistiaLogo = ({
|
|
|
7003
7153
|
};
|
|
7004
7154
|
const brandmarkColor = VARIANT_COLORS[variant].brandmark;
|
|
7005
7155
|
const logotypeColor = VARIANT_COLORS[variant].logotype;
|
|
7006
|
-
const Logo = /* @__PURE__ */
|
|
7156
|
+
const Logo = /* @__PURE__ */ jsxs13(
|
|
7007
7157
|
WistiaLogoComponent,
|
|
7008
7158
|
{
|
|
7009
7159
|
$hoverColor: hoverColor,
|
|
@@ -7013,14 +7163,14 @@ var WistiaLogo = ({
|
|
|
7013
7163
|
xmlns: "http://www.w3.org/2000/svg",
|
|
7014
7164
|
...otherProps,
|
|
7015
7165
|
children: [
|
|
7016
|
-
/* @__PURE__ */
|
|
7017
|
-
|
|
7166
|
+
/* @__PURE__ */ jsx185("title", { children: title }),
|
|
7167
|
+
isNotNil10(description) ? /* @__PURE__ */ jsx185("desc", { children: description }) : null,
|
|
7018
7168
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
7019
7169
|
renderLogotype(logotypeColor, iconOnly)
|
|
7020
7170
|
]
|
|
7021
7171
|
}
|
|
7022
7172
|
);
|
|
7023
|
-
return href !== void 0 ? /* @__PURE__ */
|
|
7173
|
+
return href !== void 0 ? /* @__PURE__ */ jsx185("a", { href, children: Logo }) : Logo;
|
|
7024
7174
|
};
|
|
7025
7175
|
WistiaLogo.displayName = "WistiaLogo";
|
|
7026
7176
|
export {
|
|
@@ -7049,6 +7199,7 @@ export {
|
|
|
7049
7199
|
ScreenReaderOnly,
|
|
7050
7200
|
Stack,
|
|
7051
7201
|
SubMenu,
|
|
7202
|
+
Tag,
|
|
7052
7203
|
Text,
|
|
7053
7204
|
Tooltip,
|
|
7054
7205
|
UIProvider,
|