@primer/react 38.6.3-rc.f8f5fddc3 → 38.7.0-rc.92435c0d2
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.
Potentially problematic release.
This version of @primer/react might be problematic. Click here for more details.
- package/CHANGELOG.md +46 -1
- package/dist/ActionBar/ActionBar.d.ts +8 -0
- package/dist/ActionBar/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar/ActionBar.js +83 -53
- package/dist/ActionBar/index.d.ts +1 -0
- package/dist/ActionBar/index.d.ts.map +1 -1
- package/dist/Autocomplete/Autocomplete.d.ts +0 -3
- package/dist/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/Autocomplete/Autocomplete.js +69 -23
- package/dist/Autocomplete/AutocompleteContext.d.ts +23 -3
- package/dist/Autocomplete/AutocompleteContext.d.ts.map +1 -1
- package/dist/Autocomplete/AutocompleteContext.js +20 -1
- package/dist/Autocomplete/AutocompleteInput.d.ts.map +1 -1
- package/dist/Autocomplete/AutocompleteInput.js +8 -5
- package/dist/Autocomplete/AutocompleteMenu.d.ts.map +1 -1
- package/dist/Autocomplete/AutocompleteMenu.js +123 -121
- package/dist/{BaseStyles-79fd37c4.css → BaseStyles-7e59cc50.css} +2 -2
- package/dist/BaseStyles-7e59cc50.css.map +1 -0
- package/dist/BaseStyles.module.css.js +1 -1
- package/dist/Dialog/{Dialog-1a61e61a.css → Dialog-92b5e3b7.css} +2 -2
- package/dist/Dialog/Dialog-92b5e3b7.css.map +1 -0
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +21 -5
- package/dist/Dialog/Dialog.module.css.js +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.js +1 -0
- package/dist/FeatureFlags/FeatureFlags.d.ts +6 -0
- package/dist/FeatureFlags/FeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/FeatureFlags.js +41 -32
- package/dist/FilteredActionList/FilteredActionList.d.ts +6 -1
- package/dist/FilteredActionList/FilteredActionList.d.ts.map +1 -1
- package/dist/FilteredActionList/FilteredActionList.js +4 -2
- package/dist/PageLayout/{PageLayout-c092f3db.css → PageLayout-51007c87.css} +2 -2
- package/dist/PageLayout/PageLayout-51007c87.css.map +1 -0
- package/dist/PageLayout/PageLayout.d.ts.map +1 -1
- package/dist/PageLayout/PageLayout.js +399 -313
- package/dist/PageLayout/PageLayout.module.css.js +1 -1
- package/dist/PageLayout/paneUtils.d.ts +11 -0
- package/dist/PageLayout/paneUtils.d.ts.map +1 -0
- package/dist/PageLayout/paneUtils.js +34 -0
- package/dist/PageLayout/usePaneWidth.d.ts +2 -1
- package/dist/PageLayout/usePaneWidth.d.ts.map +1 -1
- package/dist/PageLayout/usePaneWidth.js +56 -44
- package/dist/SelectPanel/SelectPanel.d.ts +6 -1
- package/dist/SelectPanel/SelectPanel.d.ts.map +1 -1
- package/dist/SelectPanel/SelectPanel.js +3 -1
- package/dist/TextInput/TextInput-dff8f842.css +2 -0
- package/dist/TextInput/TextInput-dff8f842.css.map +1 -0
- package/dist/TextInput/TextInput.d.ts +5 -0
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +125 -51
- package/dist/TextInput/TextInput.module.css.js +5 -0
- package/dist/Textarea/{TextArea-54099020.css → TextArea-53e27580.css} +2 -2
- package/dist/Textarea/TextArea-53e27580.css.map +1 -0
- package/dist/Textarea/TextArea.module.css.js +2 -2
- package/dist/Textarea/Textarea.d.ts +10 -0
- package/dist/Textarea/Textarea.d.ts.map +1 -1
- package/dist/Textarea/Textarea.js +215 -69
- package/dist/hooks/useFocusZone.d.ts +4 -0
- package/dist/hooks/useFocusZone.d.ts.map +1 -1
- package/dist/internal/utils/hasInteractiveNodes.d.ts.map +1 -1
- package/dist/internal/utils/hasInteractiveNodes.js +22 -16
- package/dist/utils/__tests__/character-counter.test.d.ts +2 -0
- package/dist/utils/__tests__/character-counter.test.d.ts.map +1 -0
- package/dist/utils/character-counter.d.ts +27 -0
- package/dist/utils/character-counter.d.ts.map +1 -0
- package/dist/utils/character-counter.js +65 -0
- package/generated/components.json +16 -0
- package/package.json +9 -9
- package/dist/BaseStyles-79fd37c4.css.map +0 -1
- package/dist/Dialog/Dialog-1a61e61a.css.map +0 -1
- package/dist/PageLayout/PageLayout-c092f3db.css.map +0 -1
- package/dist/Textarea/TextArea-54099020.css.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/PageLayout/PageLayout.module.css.js"],"names":[],"mappings":"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","file":"PageLayout-c092f3db.css","sourcesContent":["/* Exported values for JavaScript consumption */\n:export {\n /* Breakpoint where --pane-max-width-diff changes (used in usePaneWidth.ts) */\n paneMaxWidthDiffBreakpoint: 1280;\n /* Default value for --pane-max-width-diff below the breakpoint */\n paneMaxWidthDiffDefault: 511;\n}\n\n.PageLayoutRoot {\n /* Region Order */\n --region-order-header: 0;\n --region-order-pane-start: 1;\n --region-order-content: 2;\n --region-order-pane-end: 3;\n --region-order-footer: 4;\n\n /* Spacing Values */\n --spacing-none: 0;\n --spacing-condensed: var(--base-size-16);\n --spacing-normal: var(--base-size-16);\n\n @media screen and (min-width: 1012px) {\n --spacing-normal: var(--base-size-24);\n }\n\n /* Pane Width Values */\n --pane-width-small: 100%;\n --pane-width-medium: 100%;\n --pane-width-large: 100%;\n /* NOTE: This value is exported via :export for use in usePaneWidth.ts */\n --pane-max-width-diff: 511px;\n\n @media screen and (min-width: 768px) {\n --pane-width-small: 240px;\n --pane-width-medium: 256px;\n --pane-width-large: 256px;\n }\n\n @media screen and (min-width: 1012px) {\n --pane-width-small: 256px;\n --pane-width-medium: 296px;\n --pane-width-large: 320px;\n }\n\n /* NOTE: This breakpoint value is exported via :export for use in usePaneWidth.ts */\n @media screen and (min-width: 1280px) {\n --pane-max-width-diff: 959px;\n }\n\n /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n --spacing: 0;\n --spacing-row: 0;\n --spacing-column: 0;\n --spacing-divider: 0;\n --offset-header: 0;\n --pane-width: 0;\n --pane-min-width: 0;\n --pane-max-width: 0;\n --pane-width-custom: 0;\n --pane-width-size: 0;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n display: flex;\n margin-right: auto;\n margin-left: auto;\n flex-wrap: wrap;\n /* the wrapper should match the Root's dimensions by default */\n width: 100%;\n height: 100%;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PageLayoutContent {\n display: flex;\n flex: 1 1 100%;\n flex-wrap: wrap;\n max-width: 100%;\n}\n\n.HorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: calc(-1 * var(--spacing-divider));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: calc(-1 * var(--spacing-divider));\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-narrow='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-regular='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-wide='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n }\n\n @media screen and (min-width: 768px) {\n margin-right: 0 !important;\n margin-left: 0 !important;\n }\n}\n\n.VerticalDivider {\n position: relative;\n height: 100%;\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-narrow='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-regular='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant-wide='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n }\n}\n\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n\n &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n.HeaderContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.HeaderHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.ContentWrapper {\n display: flex;\n\n /* Hack to prevent overflowing content from pushing the pane region to the next line */\n min-width: 1px;\n flex-direction: column;\n order: var(--region-order-content);\n\n /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.\n Without this, the content region could wrap onto a different line\n than the pane region on wide viewports if its contents are too wide. */\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n/**\n * OPTIMIZATION: Aggressive containment during drag for ContentWrapper\n * data-dragging is set on PageLayoutContent by JavaScript\n * This avoids expensive :has() selectors\n */\n.PageLayoutContent[data-dragging='true'] .ContentWrapper {\n /* Add paint containment during drag - safe since user can't interact */\n contain: layout style paint;\n\n /* Disable interactions */\n pointer-events: none;\n\n /* Disable transitions to prevent expensive recalculations */\n transition: none;\n\n /* Force compositor layer for hardware acceleration */\n will-change: width;\n transform: translateZ(0);\n}\n\n.Content {\n width: 100%;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n margin-right: auto;\n margin-left: auto;\n flex-grow: 1;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n/**\n * OPTIMIZATION: Freeze content layout during resize drag\n * This prevents expensive recalculations of large content areas\n * while keeping content visible (just frozen in place)\n */\n.PageLayoutContent[data-dragging='true'] .Content {\n /* Full containment (without size) - isolate from layout recalculations */\n contain: layout style paint;\n}\n\n.PaneWrapper {\n display: flex;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n }\n\n /* Base position (non-responsive) - applies at narrow viewports only */\n @media (--viewportRange-narrow) {\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n }\n\n @media screen and (min-width: 768px) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n\n width: auto;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n\n &:where([data-sticky]) {\n position: sticky;\n /* stylelint-disable-next-line primer/spacing */\n top: var(--offset-header);\n max-height: 100vh;\n }\n\n /* Base position (non-responsive) - applies at regular+ viewports */\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n}\n\n.PaneVerticalDivider {\n /* Base position (non-responsive) */\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n }\n\n /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n}\n\n.Pane {\n width: var(--pane-width-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n\n @media screen and (min-width: 768px) {\n overflow: auto;\n }\n\n &:where([data-resizable]) {\n width: 100%;\n\n @media screen and (min-width: 768px) {\n /* \n * --pane-max-width is set by JS on mount and updated on resize (debounced).\n * JS calculates viewport - margin to avoid scrollbar discrepancy with 100vw.\n */\n width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));\n }\n }\n}\n\n/**\n * OPTIMIZATION: Performance enhancements for Pane during drag\n * data-dragging is set on PageLayoutContent by JavaScript\n * This avoids expensive :has() selectors\n */\n.PageLayoutContent[data-dragging='true'] .Pane {\n /* Full containment - isolate from layout recalculations */\n contain: layout style paint;\n\n /* Disable interactions during drag */\n pointer-events: none;\n\n /* Disable transitions during drag */\n transition: none;\n\n /* Force hardware acceleration */\n will-change: width, transform;\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n\n.PaneHorizontalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n }\n\n /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n}\n\n.FooterWrapper {\n width: 100%;\n order: var(--region-order-footer);\n\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n\n &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\n}\n\n.FooterHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.FooterContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n/**\n * DraggableHandle - Interactive resize handle\n */\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n background-color: transparent;\n transition-delay: 0.1s;\n\n /**\n * OPTIMIZATION: Prevent touch scrolling and text selection during drag\n * This is done in CSS because it needs to be set before any pointer events\n */\n touch-action: none;\n user-select: none;\n}\n\n.DraggableHandle:hover {\n background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n background-color: var(--bgColor-accent-emphasis);\n cursor: col-resize;\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n background-color: var(--bgColor-accent-emphasis);\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Textarea/TextArea.module.css.js"],"names":[],"mappings":"AAAA,6BAQE,eAAgB,CAFhB,4BAA6B,CAC7B,QAAS,CAHT,aAAc,CAFd,mBAAoB,CACpB,iBAAkB,CAElB,WAAY,CAJZ,UAQF,CAEA,mCACE,SACF,CAEA,+CACE,WACF,CAEA,+CACE,WACF,CAEA,qDACE,iBACF,CAEA,mDACE,eACF,CAEA,sCACE,WACF","file":"TextArea-54099020.css","sourcesContent":[".TextArea {\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n color: inherit;\n resize: both;\n background-color: transparent;\n border: 0;\n appearance: none;\n}\n\n.TextArea:focus {\n outline: 0;\n}\n\n.TextArea[data-resize='none'] {\n resize: none;\n}\n\n.TextArea[data-resize='both'] {\n resize: both;\n}\n\n.TextArea[data-resize='horizontal'] {\n resize: horizontal;\n}\n\n.TextArea[data-resize='vertical'] {\n resize: vertical;\n}\n\n.TextArea:disabled {\n resize: none;\n}\n"]}
|