@commonsku/styles 1.17.35 → 1.17.37
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 +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +46 -12
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/styles/AddressAutocomplete/AddressAutocompleteInput.d.ts.map +1 -1
- package/dist/styles/DateRangeDropdown.d.ts.map +1 -1
- package/dist/styles/DateRangePicker.d.ts +4 -4
- package/dist/styles/DateRangePicker.d.ts.map +1 -1
- package/dist/styles/InputDropdown.d.ts.map +1 -1
- package/dist/styles/Switch.d.ts +35 -0
- package/dist/styles/Switch.d.ts.map +1 -0
- package/dist/styles/icons/ClearIcon.d.ts +4 -0
- package/dist/styles/icons/ClearIcon.d.ts.map +1 -0
- package/dist/styles/icons/index.d.ts +1 -0
- package/dist/styles/icons/index.d.ts.map +1 -1
- package/dist/styles/index.d.ts +1 -0
- package/dist/styles/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -795,7 +795,7 @@ declare class Tabs extends Component<TabsProps, TabsState> {
|
|
|
795
795
|
render(): React__default.JSX.Element;
|
|
796
796
|
}
|
|
797
797
|
|
|
798
|
-
declare const toggleSizes$
|
|
798
|
+
declare const toggleSizes$2: {
|
|
799
799
|
small: {
|
|
800
800
|
'font-family': string;
|
|
801
801
|
'font-size': string;
|
|
@@ -821,7 +821,7 @@ declare const toggleSizes$1: {
|
|
|
821
821
|
height: string;
|
|
822
822
|
};
|
|
823
823
|
};
|
|
824
|
-
type ToggleSize$
|
|
824
|
+
type ToggleSize$2 = keyof typeof toggleSizes$2;
|
|
825
825
|
declare const ToggleLink: styled_components.StyledComponent<"a", any, {
|
|
826
826
|
selected?: boolean | undefined;
|
|
827
827
|
stretch?: boolean | undefined;
|
|
@@ -830,7 +830,7 @@ declare const ToggleLink: styled_components.StyledComponent<"a", any, {
|
|
|
830
830
|
type ToggleProps = React__default.PropsWithChildren<{
|
|
831
831
|
stretch?: boolean;
|
|
832
832
|
onClick?: React__default.MouseEventHandler<HTMLDivElement>;
|
|
833
|
-
size?: ToggleSize$
|
|
833
|
+
size?: ToggleSize$2;
|
|
834
834
|
} & SharedStyleTypes>;
|
|
835
835
|
declare const Toggle: ({ size, ...props }: ToggleProps) => React__default.JSX.Element;
|
|
836
836
|
|
|
@@ -2518,12 +2518,12 @@ interface DateRangePreset {
|
|
|
2518
2518
|
name: string;
|
|
2519
2519
|
label: string;
|
|
2520
2520
|
}
|
|
2521
|
-
type DateRangePickerProps = Omit<DatepickerProps,
|
|
2521
|
+
type DateRangePickerProps = Omit<DatepickerProps, "value" | "onChange" | "dateFormat"> & {
|
|
2522
2522
|
range: DateRange;
|
|
2523
2523
|
dateFormat?: string;
|
|
2524
2524
|
onChange?: (range: DateRange, event?: SyntheticEvent<any>, closeDropdown?: boolean) => void;
|
|
2525
2525
|
presets?: DateRangePreset[];
|
|
2526
|
-
initialActiveTab?:
|
|
2526
|
+
initialActiveTab?: "custom" | "preset";
|
|
2527
2527
|
};
|
|
2528
2528
|
declare const DateRangePicker: React__default.ForwardRefExoticComponent<Omit<DatepickerProps, "value" | "dateFormat" | "onChange"> & {
|
|
2529
2529
|
range: DateRange;
|
|
@@ -3124,6 +3124,8 @@ declare function WarnIcon({ color, size, altText, ...props }: WarnIconProps): Re
|
|
|
3124
3124
|
type LayersIconProps = SVGIconProps;
|
|
3125
3125
|
declare function LayersIcon({ color, size, altText, ...props }: LayersIconProps): React__default.JSX.Element;
|
|
3126
3126
|
|
|
3127
|
+
declare function ClearIcon({ color, size, altText, ...props }: SVGIconProps): React__default.JSX.Element;
|
|
3128
|
+
|
|
3127
3129
|
declare const datepickerStyles = "\n.react-datepicker {\n font-family: \"skufont-demibold\", sans-serif;\n color: var(--color-neutrals-dark);\n}\n\n.commonsku-styles-datepicker {\n &.react-datepicker-wrapper {\n width: 100%;\n }\n\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n\n .react-datepicker {\n border-radius: 3px;\n border: 1px solid var(--color-primary1-60);\n outline: none;\n box-shadow: 1px 1px 0px var(--color-primary1-60),\n -1px -1px 0px var(--color-primary1-60),\n 1px -1px 0px var(--color-primary1-60),\n -1px 1px 0px var(--color-primary1-60);\n }\n\n /* For date ranges */\n &.daterangepicker {\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n }\n\n .react-datepicker__day--in-range:not(\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--weekend,\n .react-datepicker__day--selected\n )\n {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day--in-range.react-datepicker__day--weekend:not(\n .react-datepicker__day--selected,\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--in-selecting-range:not(\n .react-datepicker__day--range-start,\n .react-datepicker__day--range-end,\n .react-datepicker__day:hover\n )\n {\n background-color: var(--color-primary1-40);\n &.react-datepicker__day:not(\n .react-datepicker__day--outside-month,\n .react-datepicker__day--weekend,\n ) {\n color: var(--color-neutrals-90);\n }\n &.react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n &.react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n }\n }\n\n .react-datepicker__current-month,\n .react-datepicker-time__header,\n .react-datepicker-year-header,\n .react-datepicker__header {\n padding-top: 8px;\n padding-bottom: 8px;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__header,\n .react-datepicker__today-button {\n background: var(--color-neutrals-20);\n padding-top: 8px;\n padding-bottom: 8px;\n }\n\n .react-datepicker__header {\n border-bottom: none;\n }\n\n .react-datepicker__today-button {\n border-top: none;\n }\n\n .react-datepicker__day\n {\n outline: none;\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day-name {\n color: var(--color-neutrals-dark);\n }\n\n .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n .react-datepicker__month-text:hover,\n .react-datepicker__quarter-text:hover,\n .react-datepicker__year-text:hover {\n background-color: var(--color-neutrals-20);\n }\n\n .react-datepicker__day--outside-month {\n color: var(--color-neutrals-70);\n }\n\n .react-datepicker__day--weekend {\n color: var(--color-errors-main);\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected\n {\n background-color: var(--color-primary1-60);\n color: #fff;\n }\n\n .react-datepicker__day--keyboard-selected {\n background-color: inherit;\n }\n\n .react-datepicker__triangle {\n border-bottom-color: var(--color-neutrals-20) !important;\n }\n\n .react-datepicker__triangle::before {\n border-bottom-color: var(--color-primary1-60) !important;\n border-top-color: var(--color-primary1-60) !important;\n }\n\n .react-datepicker__month-select,\n .react-datepicker__year-select {\n height: 30px;\n border: 2px solid var(--color-primary1-60);\n padding: 3px;\n border-radius: 5px;\n outline: none;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n\n .react-datepicker__navigation-icon {\n &.react-datepicker__navigation-icon--next::before {\n content: '';\n box-sizing: initial;\n top: 2px;\n left: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n\n &.react-datepicker__navigation-icon--previous::before {\n content: '';\n box-sizing: initial;\n top: 2px;\n right: -8px;\n height: 6px;\n width: 6px;\n border-width: 3px 3px 0 0;\n border-top-right-radius: 2px;\n border-color: var(--color-primary1-60);\n }\n }\n\n .react-datepicker__aria-live {\n display: none;\n }\n\n @media only screen and (min-height: 600px) and (max-height: 800px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 140px;\n }\n }\n @media only screen and (max-height: 599px ) {\n .react-datepicker .react-datepicker__month-container .react-datepicker__month {\n overflow-y: scroll;\n max-height: 110px;\n }\n\n .react-datepicker__time-container {\n margin-top: -2px;\n border-top-left-radius: 0px;\n border-right: 2px solid var(--color-primary1-60);\n border-bottom: 2px solid var(--color-primary1-60);\n border-top: 2px solid var(--color-primary1-60);\n }\n }\n}\n";
|
|
3128
3130
|
//# sourceMappingURL=datepickerStyles.d.ts.map
|
|
3129
3131
|
|
|
@@ -3424,7 +3426,7 @@ declare const useFallbackRef: <T>(forwardedRef: ForwardedRef<T>) => MutableRefOb
|
|
|
3424
3426
|
declare const useValue: <T>(initialValue: T) => [T, React$1.Dispatch<React$1.SetStateAction<T>>];
|
|
3425
3427
|
//# sourceMappingURL=useValue.d.ts.map
|
|
3426
3428
|
|
|
3427
|
-
declare const toggleSizes: {
|
|
3429
|
+
declare const toggleSizes$1: {
|
|
3428
3430
|
small: {
|
|
3429
3431
|
'font-family': string;
|
|
3430
3432
|
'font-size': string;
|
|
@@ -3450,21 +3452,21 @@ declare const toggleSizes: {
|
|
|
3450
3452
|
height: string;
|
|
3451
3453
|
};
|
|
3452
3454
|
};
|
|
3453
|
-
type ToggleSize = keyof typeof toggleSizes;
|
|
3454
|
-
type CommonProps = {
|
|
3455
|
+
type ToggleSize$1 = keyof typeof toggleSizes$1;
|
|
3456
|
+
type CommonProps$1 = {
|
|
3455
3457
|
selected?: boolean;
|
|
3456
3458
|
stretch?: boolean;
|
|
3457
|
-
size?: ToggleSize;
|
|
3459
|
+
size?: ToggleSize$1;
|
|
3458
3460
|
};
|
|
3459
3461
|
type ToggleSwitchProps = {
|
|
3460
3462
|
onClick?: React__default.MouseEventHandler<HTMLDivElement>;
|
|
3461
3463
|
style?: React__default.CSSProperties;
|
|
3462
|
-
} & CommonProps & Omit<Omit<Omit<BaseCskuProps, 'hidden'>, 'color'>, 'style'>;
|
|
3464
|
+
} & CommonProps$1 & Omit<Omit<Omit<BaseCskuProps, 'hidden'>, 'color'>, 'style'>;
|
|
3463
3465
|
type ToggleSwitchStatedProps = {
|
|
3464
3466
|
initialSelected?: boolean;
|
|
3465
3467
|
style?: React__default.CSSProperties;
|
|
3466
3468
|
onClick?: (value: boolean) => void;
|
|
3467
|
-
} & Omit<CommonProps, 'selected'> & Omit<BaseCskuProps, 'style'>;
|
|
3469
|
+
} & Omit<CommonProps$1, 'selected'> & Omit<BaseCskuProps, 'style'>;
|
|
3468
3470
|
declare const ToggleSwitchStyled: ({ onClick, size, selected, stretch, style, ...props }: ToggleSwitchProps) => React__default.JSX.Element;
|
|
3469
3471
|
declare const ToggleSwitch: ({ size, initialSelected, stretch, onClick, ...props }: ToggleSwitchStatedProps) => React__default.JSX.Element;
|
|
3470
3472
|
|
|
@@ -3643,4 +3645,36 @@ interface PaginationProps {
|
|
|
3643
3645
|
}
|
|
3644
3646
|
declare const Pagination: ({ currentPage, totalPages, onChange, }: PaginationProps) => React__default.JSX.Element;
|
|
3645
3647
|
|
|
3646
|
-
|
|
3648
|
+
declare const toggleSizes: {
|
|
3649
|
+
small: {
|
|
3650
|
+
height: string;
|
|
3651
|
+
width: string;
|
|
3652
|
+
};
|
|
3653
|
+
medium: {
|
|
3654
|
+
height: string;
|
|
3655
|
+
width: string;
|
|
3656
|
+
};
|
|
3657
|
+
large: {
|
|
3658
|
+
height: string;
|
|
3659
|
+
width: string;
|
|
3660
|
+
};
|
|
3661
|
+
};
|
|
3662
|
+
type ToggleSize = keyof typeof toggleSizes;
|
|
3663
|
+
type CommonProps = {
|
|
3664
|
+
selected?: boolean;
|
|
3665
|
+
stretch?: boolean;
|
|
3666
|
+
size?: ToggleSize;
|
|
3667
|
+
};
|
|
3668
|
+
type SwitchProps = {
|
|
3669
|
+
onClick?: React__default.MouseEventHandler<HTMLDivElement>;
|
|
3670
|
+
style?: React__default.CSSProperties;
|
|
3671
|
+
} & CommonProps & Omit<Omit<Omit<BaseCskuProps, 'hidden'>, 'color'>, 'style'>;
|
|
3672
|
+
type SwitchStatedProps = {
|
|
3673
|
+
initialSelected?: boolean;
|
|
3674
|
+
style?: React__default.CSSProperties;
|
|
3675
|
+
onClick?: (value: boolean) => void;
|
|
3676
|
+
} & Omit<CommonProps, 'selected'> & Omit<BaseCskuProps, 'style'>;
|
|
3677
|
+
declare const SwitchStyled: ({ onClick, size, selected, stretch, style, ...props }: SwitchProps) => React__default.JSX.Element;
|
|
3678
|
+
declare const Switch: ({ size, initialSelected, stretch, onClick, ...props }: SwitchStatedProps) => React__default.JSX.Element;
|
|
3679
|
+
|
|
3680
|
+
export { AddIcon, AddNoteIcon, AddShoppingCartIcon, AddTaskIcon, AddressAutocompleteInput, AlertIcon, AlertNotification, ArrowIcon, Artwork, ArtworkProps, SKUAsyncSelect as AsyncSelect, Avatar, AvatarColor, AvatarShape, AvatarSize, AwaitingProofIcon, Backdrop, Background, Badge, BaseCskuProps, BotIcon, Box, BulletIcon, Button, ButtonPreset, ButtonProps, ButtonVariant, ButtonsGroup, Calendar, CalendarDayBody, CalendarDaysBody, CalendarDaysHeader, CalendarIcon, CalendarTask, CalendarTaskProps, CalendarWrapper, CancelButton, ChangeRequestedIcon, ChatIcon, CheckMark, CheckboxIcon, CheckboxLabel, CheckmarkIcon, ChevronIcon, ChevronPopup, CircleProgressIcon, ClearIcon, ClientApprovedIcon, ClipboardIcon, ClockIcon, Col, ColPropTypes, CollaborateIcon, CollapseStyled, CollapseStyledProps, CollapseWrapper, CollapseWrapperProps, Collapsible$1 as Collapsible, CollapsibleArrowIcon, CollapsibleLabel, CollapsiblePanel, CollapsiblePanelProps, CollapsiblePanelTitle, CollapsiblePanelTitleProps, CollapsiblePanels, CollapsiblePanelsProps, CollapsibleProps$1 as CollapsibleProps, Collapsible as CollapsibleV2, Collapsibles, Column, ColumnSelectIcon, CommentBubbleIcon, CommentIcon, CommonskuMainLogo, CommunityIcon, CompletedCheckmarkIcon, ConfirmAlertPopup, ConfirmPopup, ConnectedIcon, ConnectedPlusIcon, CouponIcon, SKUCreatableSelect as CreatableSelect, CreditCardIcon, Csku, CskuProps, CustomDateInput, DateRange, DateRangeDropdown, DateRangeDropdownProps, DateRangeInput, DateRangeInputProps, DateRangePicker, DateRangePickerProps, DateRangePreset, Datepicker, DaysBodyWrapper, DebouncedInput, DefaultCalendarFooter, DefaultCalendarHeader, DefaultStar, DesignIcon, DollarIcon, DoneButton, Dot, DoubleArrowIcon, DownloadIcon, DragIcon, DraggableTasksCalendar, DropArea, DropAreaProps, DropDownContent, Dropdown, DropdownItem, DropdownProps, Dropzone, DropzoneProps, DropzoneTypes, Dropzoned, DropzonedPreviews, EPOIcon, EditIcon, EllipsisIcon, EmptyStateArrowIcon as EmptyStateArrow, EpsIcon, ErrorBoundary, EstimateCircleIcon, EyeIcon, FeedPost, FileUploadIcon, FilledChevronIcon, FolderIcon, GalleryIcon, GearIcon, GlobalStyle, Grid, GridCell, GridIcon, GridItem, GridItemProps, GridProps, GridRow, GridTable, GridTableContainer, H1$1 as H1, H2$1 as H2, H3, H4, H5$1 as H5, H6, HandleIcon, HeadlessTable, HelpIcon, HistoryIcon, IconButton, IconButtonProps, IconDoc, ImageIcon, Img, InfoIcon, Input, InputDropdown, InputIconLabel, InputIconLabelContainer, InputProps, InputStepper, InputStepperStyled, IntegrationsIcon, InventoryIcon, Label, LabeledAsyncSelect, LabeledCheckbox, LabeledCheckboxProps, LabeledCreatableSelect, LabeledIconInput, LabeledInput, LabeledInputProps, LabeledMultiProgress, LabeledProgress, LabeledRadio, LabeledRadioGroup, LabeledRadioInButton, LabeledRadioInButtonGroup, LabeledRadioProps, LabeledSelect, LabeledTextarea, LayersIcon, LightIndicator, Link, LinkWithIcon, ListIcon, Loading, LockIcon, MagicEraserIcon, MagicIcon, MailIcon, MarketingStatusIcon, MenuIcon, MergeIcon, MultiProgress, NavConnectIcon, NavFinanceIcon, NavManagementIcon, NavProdIcon, NavReportsIcon, NavResourcesIcon, NavSalesIcon, NestedOption, NoteIcon, Number, NumberInput, OpportunityCircleIcon, OrderStatusIcon, Overlay, Padding, Page, Pagination, PanelContact, PanelTileContact, PanelledSelect, PanelledSelectProps, PendingApprovalIcon, PercentIcon, PinIcon, Popup, PopupHeader, PopupProps, PresentationCircleIcon, Product, ProductCard, ProductDetail, Progress, PromostandardsIcon, ProofReceivedIcon, ProofingCompleteIcon, Publisher, Radio, RadioIcon, RadioLabel, RadioProps, ReceiptLongIcon, RenderChild, ResizableIcon, ResponsiveTable, Row$1 as Row, RowPropTypes, SHARED_STYLE_MAPS, SalesArrowIcon, SalesOrderCircleIcon, SearchIcon, SKUSelect as Select, SelectionTable, SharedStyleTypes, SharedStyles, ShopIcon, ShoppingCartIcon, ShowPopup, SidePanel, SimpleWindowedTable, SimpleWindowedTableProps, SimpleWindowedTableStyles, SizerCss, SizerTypes, SizerWrapper, SkubotLogo, SkubotSpinner, SlideInIcon, Sparkles, Spinner, StarDarkIcon, StarIcon, StarLightIcon, StarRating, StateDropdown, StatusDropdown, StyledCalendarTaskBody, StyledDropArea, StyledDropdown, StyledPanel, StyledTask, SubtractIcon, SVG as SvgIcon, Switch, SwitchProps, SwitchStatedProps, SwitchStyled, TBody, TButtonIcon, TD, TDropdownItem, TH, THSorted, THead, TR, TSize, TSizeOffset, TSizeOffsetRight, TSizeStyle, TTab, Tab, TabBar, Table, TableIcon, Tabs, TabsProps, TagIcon, TargetIcon, Task, TaskBody, TaskIcon, TaskLabel, TaskName, TaskProps, TasksCalendar, TasksCalendarDayBody, TasksCalendarFooter, TemplateIcon, Text$1 as Text, TextProp, Textarea, Theme, Thermometer, TilesIcon, Toggle, ToggleLink, ToggleSwitch, ToggleSwitchProps, ToggleSwitchStatedProps, ToggleSwitchStyled, Tooltip, TrashIcon, TrendIcon, Typography, UploadIcon, UserIcon, UsersIcon, VirtualTable, VirtualTableStyles, WarnIcon, Wrapper, XIcon, colors, createMeasurementStyle, datepickerStyles, fontFamilies, fontStyles, fonts, getColor, getFontStyle, getThemeColor, getThemeFontFamily, getThemeFontSize, getThemeFontStyle, getThemeProperty, parseCskuStyles, sizes, themeOptions, toggleSizes$2 as toggleSizes, useCalendar, useClickOutside, useDelayUnmount, useFallbackRef, useLongPress, usePrefersReducedMotion, useRandomInterval, useValue, useWindowSize };
|