@hyphen/hyphen-components 4.8.0 → 4.9.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.
Files changed (8) hide show
  1. package/dist/components/Sidebar/Sidebar.d.ts +1 -1
  2. package/dist/css/index.css +1 -1
  3. package/dist/css/utilities.css +13 -1
  4. package/dist/css/variables.css +5 -2
  5. package/dist/lib/tokens.d.ts +2 -2
  6. package/package.json +2 -2
  7. package/src/components/Table/Table.stories.tsx +3 -3
  8. package/src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.module.scss +4 -7
package/dist/components/Sidebar/Sidebar.d.ts CHANGED
@@ -28,7 +28,7 @@ declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.Detail
28
28
  declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
29
29
  asChild?: boolean | undefined;
30
30
  isActive?: boolean | undefined;
31
- icon?: "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "segment" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
31
+ icon?: "code" | "link" | "menu" | "search" | "circle" | "filter" | "key" | "add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "clipboard" | "cloud" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "launch-app" | "lightbulb" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out" | undefined;
32
32
  }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
33
33
  declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
34
34
  declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/dist/css/index.css CHANGED
@@ -30,5 +30,5 @@
30
30
  .TableBody-module_table-body__Y5WbD.TableBody-module_hover__2CRgY tr:hover td,.TableBody-module_table-body__Y5WbD.TableBody-module_hover__2CRgY tr:hover th,.TableBody-module_table-body__Y5WbD.TableBody-module_striped__5MlEr tr:nth-of-type(odd) td,.TableBody-module_table-body__Y5WbD.TableBody-module_striped__5MlEr tr:nth-of-type(odd) th{background-color:var(--color-background-secondary)}
31
31
  .TableRow-module_table-row__-Y9FQ{border-bottom-style:solid;border-bottom-width:var(--size-border-width-sm);border-color:var(--color-border-subtle)}.TableRow-module_table-row__-Y9FQ:last-of-type{border-bottom-width:0}.TableRow-module_table-row__-Y9FQ.TableRow-module_hoverable__53-l9{background-color:var(--table-row-hover-background)}thead>.TableRow-module_table-row__-Y9FQ{border-bottom-width:var(--size-border-width-sm)!important}
32
32
  .TableBodyCell-module_table-cell__pKl29{color:var(--color-font-base);padding:var(--size-spacing-md) var(--size-spacing-2xl)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_borderless__qwKQA{border-width:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_compact__zfdBf{padding:var(--size-spacing-sm) var(--size-spacing-md)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_truncated__4YtPF{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column-left__tKIGW{background-color:var(--color-background-primary);left:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column-right__680hS{background-color:var(--color-background-primary);right:0}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_sticky-column__QpEbV{background-color:var(--color-background-primary);box-shadow:5px 0 5px -2px rgba(0,0,0,.1),-5px 0 5px -2px rgba(0,0,0,.1);position:sticky;z-index:calc(var(--size-z-index-sticky) - 1)}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_align-right__j-VqN{text-align:right}.TableBodyCell-module_table-cell__pKl29.TableBodyCell-module_align-center__saqzC{text-align:center}
33
- .TableHeaderCell-module_table-header-cell__aufSm{background-color:var(--color-background-primary);color:var(--color-font-secondary);font-size:var(--size-font-size-sm);font-weight:var(--size-font-weight-bold);letter-spacing:.05em;padding:var(--size-spacing-md) var(--size-spacing-2xl);text-align:left;text-transform:uppercase;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sortable__qjrkY{cursor:pointer}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_borderless__uos2k{border-width:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_truncated__wmNfw{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_compact__ujtrZ{padding:var(--size-spacing-sm) var(--size-spacing-md)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-header__PEP9t{position:sticky;top:0;z-index:var(--size-z-index-sticky)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-left__t8qIz{left:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-right__6D8-X{right:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column__g9ybV{background-color:var(--color-background-primary);box-shadow:5px 0 5px -2px rgba(0,0,0,.1),-5px 0 5px -2px rgba(0,0,0,.1);position:sticky;z-index:calc(var(--size-z-index-sticky) + 1)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-right__Qw0YQ{text-align:right}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-center__1RmCS{text-align:center}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT{white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT .TableHeaderCell-module_sort-icon__SHgic{margin-left:var(--size-spacing-xs)}
33
+ .TableHeaderCell-module_table-header-cell__aufSm{background-color:var(--color-background-primary);color:var(--color-font-secondary);font-weight:var(--size-font-weight-medium);letter-spacing:.05em;padding:var(--size-spacing-md) var(--size-spacing-2xl);text-align:left;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sortable__qjrkY{cursor:pointer}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_borderless__uos2k{border-width:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_truncated__wmNfw{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_compact__ujtrZ{padding:var(--size-spacing-sm) var(--size-spacing-md)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-header__PEP9t{position:sticky;top:0;z-index:var(--size-z-index-sticky)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-left__t8qIz{left:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column-right__6D8-X{right:0}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_sticky-column__g9ybV{background-color:var(--color-background-primary);box-shadow:5px 0 5px -2px rgba(0,0,0,.1),-5px 0 5px -2px rgba(0,0,0,.1);position:sticky;z-index:calc(var(--size-z-index-sticky) + 1)}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-right__Qw0YQ{text-align:right}.TableHeaderCell-module_table-header-cell__aufSm.TableHeaderCell-module_align-center__1RmCS{text-align:center}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT{white-space:nowrap}.TableHeaderCell-module_table-header-cell__aufSm .TableHeaderCell-module_heading__fEcYT .TableHeaderCell-module_sort-icon__SHgic{margin-left:var(--size-spacing-xs)}
34
34
  .ToastNotification-module_toast-notification__2xiTW{background-color:var(--color-background-toast);border:1px solid var(--color-border-toast);border-radius:var(--size-border-radius-lg);box-shadow:var(--size-box-shadow-md);color:var(--color-font-toast);font-size:var(--size-font-size-sm);pointer-events:auto;will-change:transform}.ToastNotification-module_toast-error__4ArAY{background-color:var(--color-background-toast-error);border-color:var(--color-border-toast-error);color:var(--color-font-white)}.ToastNotification-module_toast-error__4ArAY .ToastNotification-module_toast-dismiss__xxmkb{color:var(--color-font-white)}.ToastNotification-module_toast-dismiss__xxmkb{color:var(--color-font-toast)}.ToastNotification-module_toast-notification-enter-top__ZZDCr{animation:enterTop .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-exit-top__fOIkZ{animation:exitTop .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-enter-bottom__So3w7{animation:enterBottom .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-exit-bottom__DDthi{animation:exitBottom .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-exit-left__Fh1hC{animation:exitLeft .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-exit-right__C1jQ9{animation:exitRight .3s cubic-bezier(.06,.71,.55,1) forwards}.ToastNotification-module_toast-notification-fade-in__JlSGi{animation:fadeIn .25s cubic-bezier(.21,1.02,.73,1) forwards}.ToastNotification-module_toast-notification-fade-out__r6q4Q{animation:fadeOut .3s cubic-bezier(.06,.71,.55,1) forwards}
package/dist/css/utilities.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \***************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Fri, 31 Jan 2025 00:22:00 GMT
6
+ * Generated on Thu, 06 Feb 2025 17:53:40 GMT
7
7
  */
8
8
 
9
9
  .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -150,6 +150,18 @@
150
150
 
151
151
  .focus\:background-color-button-danger-active:focus { background: var(--color-background-button-danger-active); }
152
152
 
153
+ .background-color-scrollbar-thumb { background: var(--color-background-scrollbar-thumb); }
154
+
155
+ .hover\:background-color-scrollbar-thumb:hover { background: var(--color-background-scrollbar-thumb); }
156
+
157
+ .focus\:background-color-scrollbar-thumb:focus { background: var(--color-background-scrollbar-thumb); }
158
+
159
+ .background-color-scrollbar-track { background: var(--color-background-scrollbar-track); }
160
+
161
+ .hover\:background-color-scrollbar-track:hover { background: var(--color-background-scrollbar-track); }
162
+
163
+ .focus\:background-color-scrollbar-track:focus { background: var(--color-background-scrollbar-track); }
164
+
153
165
  .background-color-modal { background: var(--color-background-modal); }
154
166
 
155
167
  .hover\:background-color-modal:hover { background: var(--color-background-modal); }
package/dist/css/variables.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \*********************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Fri, 31 Jan 2025 00:22:00 GMT
6
+ * Generated on Thu, 06 Feb 2025 17:53:40 GMT
7
7
  */
8
8
 
9
9
  :root {
@@ -33,6 +33,8 @@
33
33
  --color-background-button-danger: #ef4444;
34
34
  --color-background-button-danger-hover: #dc2626;
35
35
  --color-background-button-danger-active: #b91c1c;
36
+ --color-background-scrollbar-thumb: #d4d4d4;
37
+ --color-background-scrollbar-track: rgba(0, 0, 0, 0);
36
38
  --color-background-modal: #ffffff;
37
39
  --color-background-toast: #262626;
38
40
  --color-background-toast-error: #ef4444;
@@ -338,7 +340,7 @@
338
340
  \*******************************************************************************************************************************/
339
341
  /**
340
342
  * Do not edit directly
341
- * Generated on Fri, 31 Jan 2025 00:22:00 GMT
343
+ * Generated on Thu, 06 Feb 2025 17:53:40 GMT
342
344
  */
343
345
 
344
346
  :root.dark {
@@ -365,6 +367,7 @@
365
367
  --color-background-button-danger: #ef4444;
366
368
  --color-background-button-danger-hover: #dc2626;
367
369
  --color-background-button-danger-active: #b91c1c;
370
+ --color-background-scrollbar-thumb: #525252;
368
371
  --color-background-modal: #262626;
369
372
  --color-background-toast: #f5f5f5;
370
373
  --color-background-tooltip: #f5f5f5;
package/dist/lib/tokens.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
2
- export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "segment" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
2
+ export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
3
3
  export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
4
4
  export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
5
5
  export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];
@@ -7,7 +7,7 @@ export declare const BREAKPOINTS: Breakpoint[];
7
7
  export declare const BASE_COLOR_OPTIONS: ("black" | "white" | "magenta" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900")[];
8
8
  export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
9
9
  export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "black" | "white" | "grey" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
10
- export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "black" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "modal" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
10
+ export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "black" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "tooltip" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "scrollbar-thumb" | "scrollbar-track" | "modal" | "brand-gradient" | "brand-gradient-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
11
11
  export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
12
12
  export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl")[];
13
13
  export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "4.8.0",
3
+ "version": "4.9.1",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "@hyphen"
@@ -62,7 +62,7 @@
62
62
  ],
63
63
  "dependencies": {
64
64
  "@emotion/react": "^11.14.0",
65
- "@hyphen/hyphen-design-tokens": "^4.23.0",
65
+ "@hyphen/hyphen-design-tokens": "^4.24.0",
66
66
  "@popperjs/core": "^2.11.8",
67
67
  "@radix-ui/react-collapsible": "^1.1.2",
68
68
  "@radix-ui/react-dropdown-menu": "^2.1.4",
package/src/components/Table/Table.stories.tsx CHANGED
@@ -116,9 +116,9 @@ export const CommonExample = () =>
116
116
  </div>
117
117
  ),
118
118
  },
119
- { heading: 'phone', dataKey: 'phone', width: 125 },
120
- { heading: 'plan', dataKey: 'plan', width: 125 },
121
- { heading: 'status', dataKey: 'status', width: 125 },
119
+ { heading: 'Phone', dataKey: 'phone', width: 125 },
120
+ { heading: 'Plan', dataKey: 'plan', width: 125 },
121
+ { heading: 'Status', dataKey: 'status', width: 125 },
122
122
  ];
123
123
  const tableData = [
124
124
  {
package/src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.module.scss CHANGED
@@ -1,12 +1,10 @@
1
1
  .table-header-cell {
2
2
  text-align: left;
3
- text-transform: uppercase;
4
3
  letter-spacing: 0.05em;
5
4
  white-space: nowrap;
6
5
  background-color: var(--color-background-primary);
7
6
  color: var(--color-font-secondary);
8
- font-size: var(--size-font-size-sm);
9
- font-weight: var(--size-font-weight-bold);
7
+ font-weight: var(--size-font-weight-medium);
10
8
  padding: var(--size-spacing-md) var(--size-spacing-2xl);
11
9
 
12
10
  &.sortable {
@@ -33,7 +31,6 @@
33
31
  z-index: var(--size-z-index-sticky);
34
32
  }
35
33
 
36
-
37
34
  &.sticky-column-left {
38
35
  left: 0;
39
36
  }
@@ -45,11 +42,11 @@
45
42
  &.sticky-column {
46
43
  position: sticky;
47
44
  z-index: calc(var(--size-z-index-sticky) + 1);
48
- box-shadow: 5px 0 5px -2px rgb(0 0 0 / 10%), -5px 0 5px -2px rgb(0 0 0 / 10%);
45
+ box-shadow: 5px 0 5px -2px rgb(0 0 0 / 10%),
46
+ -5px 0 5px -2px rgb(0 0 0 / 10%);
49
47
  background-color: var(--color-background-primary);
50
48
  }
51
49
 
52
-
53
50
  &.align-right {
54
51
  text-align: right;
55
52
  }
@@ -65,4 +62,4 @@
65
62
  margin-left: var(--size-spacing-xs);
66
63
  }
67
64
  }
68
- }
65
+ }