npm - @primer/react-brand - Versions diffs - 0.68.0-rc.0963e67e → 0.68.0-rc.20c2136f - Mend

@primer/react-brand 0.68.0-rc.0963e67e → 0.68.0-rc.20c2136f

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 (507) hide show

package/esm/Button/Button.js CHANGED Viewed

@@ -2,7 +2,7 @@ import e from "../node_modules/clsx/dist/clsx.js";
 import { useAnimation as t } from "../animation/useAnimation.js";
 import { Text as n } from "../Text/Text.js";
 import { ExpandableArrow as r } from "../ExpandableArrow/ExpandableArrow.js";
-import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-DPvZ0fhp.css';/* empty css                                                                                                    */
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes-kII0kqk3.css';/* empty css                                                                                                    */
 import i from "./Button.module.js";
 import a, { forwardRef as o, useCallback as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";

package/esm/Button/Button.module-Byz3R1qi.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Button-module__Button___scH9Z{appearance:none;-webkit-user-select:none;user-select:none;vertical-align:middle;border-radius:var(--base-size-6);cursor:pointer;border:solid var(--brand-borderWidth-thin) transparent;box-sizing:border-box;justify-content:center;align-items:center;gap:var(--brand-control-medium-gap);background:0 0;-webkit-text-decoration:none;text-decoration:none;transition:background-color .2s,border-color .2s;display:inline-flex}.Primer_Brand__Button-module__Button___scH9Z:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Button-module__Button___scH9Z:focus-visible{outline:4px solid var(--brand-color-focus);outline-offset:2px;transition:none}.Primer_Brand__Button-module__Button--disabled___IHZ7f,.Primer_Brand__Button-module__Button--disabled___IHZ7f:hover,.Primer_Brand__Button-module__Button--disabled___IHZ7f:focus{cursor:not-allowed}.Primer_Brand__Button-module__Button--size-small___zQrEw .Primer_Brand__Button-module__Button__text___ED0bX{display:flex}.Primer_Brand__Button-module__Button__text___ED0bX{position:relative}.Primer_Brand__Button-module__Button--label___qrkyz{font-family:var(--brand-body-fontFamily);font-style:normal;font-weight:var(--base-text-weight-medium);text-align:center}.Primer_Brand__Button-module__Button__icon-visual____qybb{height:var(--base-size-16);fill:currentColor;align-self:center;width:auto;display:flex}.Primer_Brand__Button-module__Button__trailing-visual___5i3xR,.Primer_Brand__Button-module__Button__leading-visual___jjtTe{display:flex}.Primer_Brand__Button-module__Button-arrow___F4HtG{margin-inline-start:calc(var(--base-size-8) * -1);margin-inline-end:calc(var(--base-size-4) * -1)}.Primer_Brand__Button-module__Button--primary___MSbnU{color:var(--brand-button-primary-fgColor-rest);background-color:var(--brand-button-primary-bgColor-rest)}.Primer_Brand__Button-module__Button--size-small___zQrEw.Primer_Brand__Button-module__Button--primary___MSbnU{border-width:var(--brand-borderWidth-thin)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-primary-bgColor-hover)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-expanded=true]{background:var(--brand-button-primary-bgColor-active);border-color:var(--brand-button-primary-borderColor-active)}.Primer_Brand__Button-module__Button--label-primary___QX1u5{color:var(--brand-button-primary-fgColor-rest)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true],.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f{background-color:var(--brand-button-primary-bgColor-disabled)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-primary___QX1u5.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-primary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_{background-color:var(--brand-button-secondary-bgColor-rest);border-color:var(--brand-button-secondary-borderColor-rest);color:var(--brand-button-secondary-fgColor-rest);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-secondary-bgColor-hover);border-color:var(--brand-button-secondary-borderColor-hover)}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-expanded=true]{background-color:var(--brand-button-secondary-bgColor-active);border-color:var(--brand-button-secondary-borderColor-active)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled{border-color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-secondary___eJ0_a.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--subtle___F7pEE{background-color:var(--brand-button-subtle-bgColor-rest);border-width:var(--brand-borderWidth-thin);border-color:var(--brand-button-subtle-borderColor-rest);color:var(--brand-color-text-default);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background-color:var(--brand-button-subtle-bgColor-hover);border-color:var(--brand-button-subtle-borderColor-hover)}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-expanded=true]{background-color:var(--brand-button-subtle-bgColor-active);border-color:var(--brand-button-subtle-borderColor-active)}.Primer_Brand__Button-module__Button--label-subtle___8ndWH{color:var(--brand-button-subtle-fgColor-rest)}.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-subtle___8ndWH.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-subtle-fgColor-disabled)}.Primer_Brand__Button-module__Button--size-small___zQrEw{min-height:var(--brand-control-small-size);padding-inline:var(--brand-control-small-paddingInline-normal)}.Primer_Brand__Button-module__Button--size-medium___KFmzx{min-height:var(--brand-control-medium-size);padding:var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20)}.Primer_Brand__Button-module__Button--size-large___J6UCI{min-height:var(--brand-control-large-size);padding:var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious)}.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button__icon-visual____qybb,.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button-arrow___F4HtG{height:var(--base-size-20);width:var(--base-size-20)}.Primer_Brand__Button-module__Button--label-medium___ClmeR{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:.01rem}.Primer_Brand__Button-module__Button--label-large___UDxqS{font-size:var(--brand-text-subhead-size-large);line-height:var(--brand-text-subhead-lineHeight-large)}.Primer_Brand__Button-module__Button--block___kCYDx{width:100%}@media (forced-colors:active){.Primer_Brand__Button-module__Button--disabled___IHZ7f{outline-color:graytext}.Primer_Brand__Button-module__Button--label___qrkyz.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:graytext}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Button-module__Button___scH9Z,.Primer_Brand__Button-module__Button___scH9Z:before,.Primer_Brand__Button-module__Button___scH9Z:after,.Primer_Brand__Button-module__Button___scH9Z *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Button/Button.module.js CHANGED Viewed

@@ -1,6 +1,7 @@
-import './Button.module-CDHmNf-Y.css';var e = {
+import './Button.module-Byz3R1qi.css';var e = {
 	Button: "Primer_Brand__Button-module__Button___scH9Z",
 	"Button--disabled": "Primer_Brand__Button-module__Button--disabled___IHZ7f",
+	"Button--size-small": "Primer_Brand__Button-module__Button--size-small___zQrEw",
 	Button__text: "Primer_Brand__Button-module__Button__text___ED0bX",
 	"Button--label": "Primer_Brand__Button-module__Button--label___qrkyz",
 	"Button__icon-visual": "Primer_Brand__Button-module__Button__icon-visual____qybb",
@@ -8,7 +9,6 @@ import './Button.module-CDHmNf-Y.css';var e = {
 	"Button__leading-visual": "Primer_Brand__Button-module__Button__leading-visual___jjtTe",
 	"Button-arrow": "Primer_Brand__Button-module__Button-arrow___F4HtG",
 	"Button--primary": "Primer_Brand__Button-module__Button--primary___MSbnU",
-	"Button--size-small": "Primer_Brand__Button-module__Button--size-small___zQrEw",
 	"Button--label-primary": "Primer_Brand__Button-module__Button--label-primary___QX1u5",
 	"Button-arrow--disabled": "Primer_Brand__Button-module__Button-arrow--disabled___kZpao",
 	"Button__icon-visual--disabled": "Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg",

package/esm/Button/Button.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n appearance: none;\n user-select: none;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n transition: ~~box~~-~~shadow~~ ~~var(--brand~~-~~animation-duration-faster)~~;\n text-decoration: none;\n border-radius: var(--~~brand~~-~~borderRadius~~-~~medium~~);\n cursor: pointer;\n border: solid var(--brand-borderWidth-~~thick~~) transparent;\n background: none;\n display: inline-flex;\n gap: var(--brand-control-medium-gap);\n}\n\n.Button:hover {\n text-decoration: none;\n}\n\n.Button:focus-visible {\n transition: none;\n outline: 4px solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n cursor: not-allowed;\n}\n\n.Button__text {\n position: relative;\n}\n\n.Button--label {\n font-family: var(--brand-body-fontFamily);\n font-style: normal;\n font-weight: var(--base-text-weight-medium);\n text-align: center;\n}\n\n.Button__icon-visual {\n display: flex;\n align-self: center;\n height: var(--base-size-16);\n width: auto;\n fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding /\n/ reduce gap between label and arrow /\n.Button-arrow {\n margin-inline-end: calc(var(--base-size-4) -1);\n margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary /\n\n.Button--primary {\n color: var(--brand-button-primary-fgColor-rest);\n background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n background: var(--brand-button-primary-bgColor-active);\n border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/ secondary /\n\n.Button--secondary {\n ~~transition:~~ background ~~var(--brand~~-~~animation-duration-faster), border-~~color ~~var(--brand-animation-duration-faster);\n background~~: var(--brand-button-secondary-bgColor-rest);\n border-color: var(--brand-button-secondary-borderColor-rest);\n color: var(--brand-button-secondary-fgColor-rest);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background: var(--brand-button-secondary-bgColor-hover);\n border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n background: var(--brand-button-secondary-bgColor-active);\n border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/ subtle /\n\n.Button--subtle {\n ~~transition:~~ background ~~var(--brand~~-~~animation-duration-faster), border-~~color ~~var(--brand-animation-duration-faster);\n background~~: var(--brand-button-subtle-bgColor-rest);\n border-width: var(--brand-borderWidth-thin);\n border-color: var(--brand-button-subtle-borderColor-rest);\n color: var(--brand-color-text-default);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background: var(--brand-button-subtle-bgColor-hover);\n border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n background: var(--brand-button-subtle-bgColor-active);\n border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/ size /\n\n.Button--size-small {\n min-height: var(--brand-control-small-size);\n padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n min-height: var(--brand-control-medium-size);\n padding: var(--brand-control-medium-paddingBlock-condensed) var(--~~brand~~-~~control~~-~~medium-paddingInline-spacious~~);\n}\n\n.Button--size-large {\n min-height: var(--brand-control-large-size);\n padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n height: var(--base-size-20);\n width: var(--base-size-20);\n}\n\n.Button--label-medium {\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n font-size: var(--brand-text-subhead-size-large);\n line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .Button--disabled {\n outline-color: GrayText;\n }\n\n / Indicates disabled state in WHCM /\n .Button--label.Button-label--disabled {\n color: GrayText;\n }\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Button,\n .Button::before,\n .Button::after,\n .Button {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n appearance: none;\n user-select: none;\n vertical-align: middle;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s, border-color 0.2s;\n text-decoration: none;\n border-radius: var(--base-size-6);\n cursor: pointer;\n border: solid var(--brand-borderWidth-thin) transparent;\n background: none;\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--brand-control-medium-gap);\n}\n\n.Button:hover {\n text-decoration: none;\n}\n\n.Button:focus-visible {\n transition: none;\n outline: 4px solid var(--brand-color-focus);\n outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n cursor: not-allowed;\n}\n\n.Button--size-small .Button__text {\n display: flex;\n}\n\n.Button__text {\n position: relative;\n}\n\n.Button--label {\n font-family: var(--brand-body-fontFamily);\n font-style: normal;\n font-weight: var(--base-text-weight-medium);\n text-align: center;\n}\n\n.Button__icon-visual {\n display: flex;\n align-self: center;\n height: var(--base-size-16);\n width: auto;\n fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding /\n/ reduce gap between label and arrow /\n.Button-arrow {\n margin-inline-end: calc(var(--base-size-4) -1);\n margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary /\n\n.Button--primary {\n color: var(--brand-button-primary-fgColor-rest);\n background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n background: var(--brand-button-primary-bgColor-active);\n border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/ secondary /\n\n.Button--secondary {\n background-color: var(--brand-button-secondary-bgColor-rest);\n border-color: var(--brand-button-secondary-borderColor-rest);\n color: var(--brand-button-secondary-fgColor-rest);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-secondary-bgColor-hover);\n border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n background-color: var(--brand-button-secondary-bgColor-active);\n border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/ subtle /\n\n.Button--subtle {\n background-color: var(--brand-button-subtle-bgColor-rest);\n border-width: var(--brand-borderWidth-thin);\n border-color: var(--brand-button-subtle-borderColor-rest);\n color: var(--brand-color-text-default);\n backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n background-color: var(--brand-button-subtle-bgColor-hover);\n border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n background-color: var(--brand-button-subtle-bgColor-active);\n border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/ size /\n\n.Button--size-small {\n min-height: var(--brand-control-small-size);\n padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n min-height: var(--brand-control-medium-size);\n padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);\n}\n\n.Button--size-large {\n min-height: var(--brand-control-large-size);\n padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n height: var(--base-size-20);\n width: var(--base-size-20);\n}\n\n.Button--label-medium {\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n font-size: var(--brand-text-subhead-size-large);\n line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .Button--disabled {\n outline-color: GrayText;\n }\n\n / Indicates disabled state in WHCM /\n .Button--label.Button-label--disabled {\n color: GrayText;\n }\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Button,\n .Button::before,\n .Button::after,\n .Button {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/Hero/{Hero.module-b8OFm8Ci.css → Hero.module-DvYo_AtL.css} RENAMED Viewed

	@@ -1 +1 @@
1	- .Primer_Brand__Hero-module__Hero___It6gj{flex-direction:column;display:flex}.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-narrow-padding)}.Primer_Brand__Hero-module__Hero--align-start___ouSp3{text-align:left;align-items:flex-start}.Primer_Brand__Hero-module__Hero--align-center___6FMoH{text-align:center;place-items:center}.Primer_Brand__Hero-module__Hero-grid___gXNGW{--brand-Grid-spacing-margin:0}.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{width:100%;max-width:1280px;padding:var(--base-size-32);background-color:var(--brand-Hero-bgColor-gridlineGridInner);margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V,.Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq{--brand-Grid-spacing-row:var(--base-size-40)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{padding:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V{--brand-Grid-spacing-row:var(--base-size-80)}}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-actions___RUotq{justify-content:center}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-content___lpGj0{flex-direction:column;align-items:center;display:flex}.Primer_Brand__Hero-module__Hero-image___GC10l{border-radius:var(--brand-borderRadius-medium);width:100%}.Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR{flex:1;width:100%;height:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-32);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{justify-content:center;width:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{background-color:var(--brand-color-canvas-subtle);align-items:stretch;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{min-height:calc(600px - var(--base-size-24))}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI{border-radius:var(--brand-borderRadius-medium)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{width:100%;max-width:1280px;margin-inline:auto}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{min-height:440px}}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh.Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-32);flex-direction:column;justify-content:center;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr:not(.Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk),.Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG{border-radius:0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk{align-self:center;max-width:100%;height:auto}.Primer_Brand__Hero-module__Hero-video___Ne5zN{width:100%}.Primer_Brand__Hero-module__Hero-media-item___Ia3pn{border-radius:var(--brand-borderRadius-large);width:100%}.Primer_Brand__Hero-module__Hero-label___XJftM{text-transform:uppercase;letter-spacing:1px;align-items:center;margin-block-end:var(--base-size-16);display:flex}.Primer_Brand__Hero-module__Hero-heading___HMve3{max-width:924px;margin:0}.Primer_Brand__Hero-module__Hero-heading___HMve3 b{color:var(--brand-color-accent-primary);font-style:normal;font-weight:inherit}.Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY{max-width:none;max-width:initial}.Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi{height:100%}.Primer_Brand__Hero-module__Hero-description___7raSC{margin:var(--base-size-24) 0 0;max-width:600px}.Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:auto;padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:center;gap:var(--base-size-8) var(--base-size-16);flex-wrap:wrap;margin-block-start:var(--base-size-32);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:stretch;gap:var(--base-size-8) var(--base-size-12)}.Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-eyebrow___mlxSE{margin-block-end:var(--base-size-32)}@media screen and (width>=34rem){.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-regular-padding)}}.Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt{cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0;font-size:0;line-height:0;display:block;position:relative}.Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5{width:100%;height:auto;display:block}.Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p{width:var(--base-size-96);height:var(--base-size-96);z-index:1;color:var(--base-color-scale-white-0);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__Hero-module__Hero-video-poster-header___13M9x{padding:var(--base-size-16) var(--base-size-24);align-items:center;gap:var(--base-size-16);height:var(--base-size-80);background:linear-gradient(#000000b3 60%,#0000);display:flex;position:absolute;inset:0 0 auto}.Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff,.Primer_Brand__Hero-module__Hero-video-poster-text___4R755{color:var(--base-color-scale-white-0)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{--brand-Grid-spacing-row:0;gap:0;width:100%;max-width:1280px;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-32);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-24);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-24)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-64);border-block-end:none;border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline-end:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-64);flex-direction:column;justify-content:flex-end;padding-inline-start:var(--base-size-64);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-image___GC10l:not(.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}
1	+ .Primer_Brand__Hero-module__Hero___It6gj{flex-direction:column;display:flex}.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-narrow-padding)}.Primer_Brand__Hero-module__Hero--align-start___ouSp3{text-align:left;align-items:flex-start}.Primer_Brand__Hero-module__Hero--align-center___6FMoH{text-align:center;place-items:center}.Primer_Brand__Hero-module__Hero-grid___gXNGW{--brand-Grid-spacing-margin:0}.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{width:100%;max-width:1280px;padding:var(--base-size-32);background-color:var(--brand-Hero-bgColor-gridlineGridInner);margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V,.Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq{--brand-Grid-spacing-row:var(--base-size-40)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{padding:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V{--brand-Grid-spacing-row:var(--base-size-80)}}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-actions___RUotq{justify-content:center}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-content___lpGj0{flex-direction:column;align-items:center;display:flex}.Primer_Brand__Hero-module__Hero-image___GC10l{border-radius:var(--brand-borderRadius-medium);width:100%}.Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR{flex:1;width:100%;height:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-32);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{justify-content:center;width:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{background-color:var(--brand-color-canvas-subtle);align-items:stretch;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{min-height:calc(600px - var(--base-size-24))}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI{border-radius:var(--brand-borderRadius-medium)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{width:100%;max-width:1280px;margin-inline:auto}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{min-height:440px}}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh.Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-32);flex-direction:column;justify-content:center;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr:not(.Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk),.Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG{border-radius:0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk{align-self:center;max-width:100%;height:auto}.Primer_Brand__Hero-module__Hero-video___Ne5zN{width:100%}.Primer_Brand__Hero-module__Hero-media-item___Ia3pn{border-radius:var(--brand-borderRadius-large);width:100%}.Primer_Brand__Hero-module__Hero-label___XJftM{text-transform:uppercase;letter-spacing:1px;align-items:center;margin-block-end:calc(var(--base-size-16) - var(--base-size-2));display:flex}.Primer_Brand__Hero-module__Hero-heading___HMve3{max-width:924px;margin:0}.Primer_Brand__Hero-module__Hero-heading___HMve3 b{color:var(--brand-color-accent-primary);font-style:normal;font-weight:inherit}.Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY{max-width:none;max-width:initial}.Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi{height:100%}.Primer_Brand__Hero-module__Hero-description___7raSC{margin:var(--base-size-24) 0 0;max-width:600px}.Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:auto;padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:center;gap:var(--base-size-8) var(--base-size-16);flex-wrap:wrap;margin-block-start:var(--base-size-32);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:stretch;gap:var(--base-size-8) var(--base-size-12)}.Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-eyebrow___mlxSE{margin-block-end:var(--base-size-32)}@media screen and (width>=34rem){.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-regular-padding)}}.Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt{cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0;font-size:0;line-height:0;display:block;position:relative}.Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5{width:100%;height:auto;display:block}.Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p{width:var(--base-size-96);height:var(--base-size-96);z-index:1;color:var(--base-color-scale-white-0);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__Hero-module__Hero-video-poster-header___13M9x{padding:var(--base-size-16) var(--base-size-24);align-items:center;gap:var(--base-size-16);height:var(--base-size-80);background:linear-gradient(#000000b3 60%,#0000);display:flex;position:absolute;inset:0 0 auto}.Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff,.Primer_Brand__Hero-module__Hero-video-poster-text___4R755{color:var(--base-color-scale-white-0)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{--brand-Grid-spacing-row:0;gap:0;width:100%;max-width:1280px;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-32);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-24);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-24)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-64);border-block-end:none;border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline-end:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-64);flex-direction:column;justify-content:flex-end;padding-inline-start:var(--base-size-64);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-image___GC10l:not(.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}

package/esm/Hero/Hero.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Hero.module-b8OFm8Ci.css';var e = {
+import './Hero.module-DvYo_AtL.css';var e = {
 	Hero: "Primer_Brand__Hero-module__Hero___It6gj",
 	"Hero--variant-default": "Primer_Brand__Hero-module__Hero--variant-default___lNgHw",
 	"Hero--align-start": "Primer_Brand__Hero-module__Hero--align-start___ouSp3",

package/esm/Hero/Hero.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n display: flex;\n flex-direction: column;\n}\n\n.Hero--variant-default {\n padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Hero--align-center {\n justify-items: center;\n align-items: center;\n text-align: center;\n}\n\n.Hero-grid {\n --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32);\n background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed /\n}\n\n/ Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width. /\n@container (min-width: 1280px) {\n .Hero-grid--contained {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--contained {\n padding: var(--base-size-64);\n }\n\n .Hero-grid--block-end {\n --brand-Grid-spacing-row: var(--base-size-80);\n }\n}\n\n.Hero--align-center .Hero-actions {\n justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.Hero-image {\n border-radius: var(--brand-borderRadius-medium);\n width: 100%;\n}\n\n.Hero-mediaContainer {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-32);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n background-color: var(--brand-color-canvas-subtle);\n display: flex;\n align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-imageContainer--inline-bordered {\n min-height: calc(600px - var(--base-size-24));\n }\n\n .Hero-imageWrapper--bg-subtle {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Shared media styles for images and videos /\n.Hero--variant-gridline .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ Applied directly to video/iframe elements for block-end position /\n.Hero-media-item--block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ GridLine variant with inline (side-by-side) layout /\n.Hero-grid--bordered-inline {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--bordered-inline {\n min-height: 440px;\n }\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--bordered-inline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/ Text column styling for gridline inline positions /\n.Hero-contentColumn--bordered-inline {\n padding: var(--base-size-32);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-contentColumn--bordered-inline {\n padding: var(--base-size-64);\n }\n}\n\n/ Media styling for gridline inline positions /\n\n/ Edge-to-edge inline media (no padding) - remove border radius /\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n border-radius: 0;\n}\n\n/ Applied directly to video/iframe elements for inline position /\n.Hero-media-item--inline {\n border-radius: 0;\n}\n\n/ Padded inline media - constrain size and center /\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n max-width: 100%;\n height: auto;\n align-self: center;\n}\n\n/ Image column styling now handled by .Hero-imageContainer--inline-bordered /\n\n.Hero-video {\n width: 100%;\n}\n\n/ Base styles for video/iframe media elements /\n.Hero-media-item {\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-block-end: var(--base-size-16);\n display: flex;\n align-items: center;\n}\n\n.Hero-heading {\n margin: 0;\n max-width: 924px;\n}\n\n.Hero-heading b {\n color: var(--brand-color-accent-primary);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n height: 100%;\n}\n\n.Hero-description {\n margin: var(--base-size-24) 0 0;\n max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n padding-block-start: var(--base-size-24);\n margin-block-start: auto;\n}\n\n.Hero-actions {\n margin-block-start: var(--base-size-32);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n align-items: stretch;\n gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n margin-block-end: var(--base-size-32);\n}\n\n/ Small breakpoint and up /\n@media screen and (min-width: 34rem) {\n .Hero--variant-default {\n padding: var(--brand-Hero-regular-padding);\n }\n}\n\n.Hero-video-poster-button {\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n display: block;\n height: 100%;\n position: relative;\n line-height: 0;\n font-size: 0;\n width: 100%;\n}\n\n.Hero-video-poster-image {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.Hero-video-poster-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--base-size-96);\n height: var(--base-size-96);\n z-index: 1;\n color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n position: absolute;\n inset: 0 0 auto;\n padding: var(--base-size-16) var(--base-size-24);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n color: var(--base-color-scale-white-0);\n}\n\n/ ========================================\n Gridline-Expressive Variant\n ======================================== /\n\n.Hero--variant-gridline-expressive {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Grid container for expressive variant /\n.Hero-grid--expressive {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n gap: 0;\n --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--expressive {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Header column (eyebrow, heading) /\n.Hero-expressive-header-column {\n padding: var(--base-size-32);\n padding-block-end: var(--base-size-24);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: flex;\n align-items: center;\n}\n\n/ Body column (description, actions, trailing) /\n.Hero-expressive-body-column {\n padding: var(--base-size-32);\n padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-24);\n}\n\n/ Desktop: Side-by-side layout with vertical divider /\n@media screen and (min-width: 63.25rem) {\n .Hero-expressive-header-column {\n padding: var(--base-size-64);\n padding-inline-end: var(--base-size-64);\n border-block-end: none;\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .Hero-expressive-body-column {\n padding: var(--base-size-64);\n padding-inline-start: var(--base-size-64);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n .Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-32);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-32);\n }\n}\n\n/ Media wrapper styles for gridline-expressive (same as gridline) /\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n display: flex;\n flex-direction: column;\n}\n\n.Hero--variant-default {\n padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Hero--align-center {\n justify-items: center;\n align-items: center;\n text-align: center;\n}\n\n.Hero-grid {\n --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32);\n background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed /\n}\n\n/ Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width. /\n@container (min-width: 1280px) {\n .Hero-grid--contained {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--contained {\n padding: var(--base-size-64);\n }\n\n .Hero-grid--block-end {\n --brand-Grid-spacing-row: var(--base-size-80);\n }\n}\n\n.Hero--align-center .Hero-actions {\n justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.Hero-image {\n border-radius: var(--brand-borderRadius-medium);\n width: 100%;\n}\n\n.Hero-mediaContainer {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-32);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n background-color: var(--brand-color-canvas-subtle);\n display: flex;\n align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-imageContainer--inline-bordered {\n min-height: calc(600px - var(--base-size-24));\n }\n\n .Hero-imageWrapper--bg-subtle {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Shared media styles for images and videos /\n.Hero--variant-gridline .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ Applied directly to video/iframe elements for block-end position /\n.Hero-media-item--block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ GridLine variant with inline (side-by-side) layout /\n.Hero-grid--bordered-inline {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--bordered-inline {\n min-height: 440px;\n }\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--bordered-inline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/ Text column styling for gridline inline positions /\n.Hero-contentColumn--bordered-inline {\n padding: var(--base-size-32);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-contentColumn--bordered-inline {\n padding: var(--base-size-64);\n }\n}\n\n/ Media styling for gridline inline positions /\n\n/ Edge-to-edge inline media (no padding) - remove border radius /\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n border-radius: 0;\n}\n\n/ Applied directly to video/iframe elements for inline position /\n.Hero-media-item--inline {\n border-radius: 0;\n}\n\n/ Padded inline media - constrain size and center /\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n max-width: 100%;\n height: auto;\n align-self: center;\n}\n\n/ Image column styling now handled by .Hero-imageContainer--inline-bordered /\n\n.Hero-video {\n width: 100%;\n}\n\n/ Base styles for video/iframe media elements /\n.Hero-media-item {\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-block-end: calc(var(--base-size-16) - var(--base-size-2));\n display: flex;\n align-items: center;\n}\n\n.Hero-heading {\n margin: 0;\n max-width: 924px;\n}\n\n.Hero-heading b {\n color: var(--brand-color-accent-primary);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n height: 100%;\n}\n\n.Hero-description {\n margin: var(--base-size-24) 0 0;\n max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n padding-block-start: var(--base-size-24);\n margin-block-start: auto;\n}\n\n.Hero-actions {\n margin-block-start: var(--base-size-32);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n align-items: stretch;\n gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n margin-block-end: var(--base-size-32);\n}\n\n/ Small breakpoint and up /\n@media screen and (min-width: 34rem) {\n .Hero--variant-default {\n padding: var(--brand-Hero-regular-padding);\n }\n}\n\n.Hero-video-poster-button {\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n display: block;\n height: 100%;\n position: relative;\n line-height: 0;\n font-size: 0;\n width: 100%;\n}\n\n.Hero-video-poster-image {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.Hero-video-poster-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--base-size-96);\n height: var(--base-size-96);\n z-index: 1;\n color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n position: absolute;\n inset: 0 0 auto;\n padding: var(--base-size-16) var(--base-size-24);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n color: var(--base-color-scale-white-0);\n}\n\n/ ========================================\n Gridline-Expressive Variant\n ======================================== /\n\n.Hero--variant-gridline-expressive {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Grid container for expressive variant /\n.Hero-grid--expressive {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n gap: 0;\n --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--expressive {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Header column (eyebrow, heading) /\n.Hero-expressive-header-column {\n padding: var(--base-size-32);\n padding-block-end: var(--base-size-24);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: flex;\n align-items: center;\n}\n\n/ Body column (description, actions, trailing) /\n.Hero-expressive-body-column {\n padding: var(--base-size-32);\n padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-24);\n}\n\n/ Desktop: Side-by-side layout with vertical divider /\n@media screen and (min-width: 63.25rem) {\n .Hero-expressive-header-column {\n padding: var(--base-size-64);\n padding-inline-end: var(--base-size-64);\n border-block-end: none;\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .Hero-expressive-body-column {\n padding: var(--base-size-64);\n padding-inline-start: var(--base-size-64);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n .Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-32);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-32);\n }\n}\n\n/ Media wrapper styles for gridline-expressive (same as gridline) /\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}

package/esm/Icon/Icon.module-UyYnXhrw.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Icon-module__Icon___aJJhk{box-sizing:content-box;padding:0}.Primer_Brand__Icon-module__Icon___aJJhk>svg{display:block}.Primer_Brand__Icon-module__Icon--size-20___j3HnM{width:var(--base-size-20);height:var(--base-size-20)}.Primer_Brand__Icon-module__Icon--size-24___IMNie{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__Icon-module__Icon--size-28___a2UX9{width:var(--base-size-28);height:var(--base-size-28)}.Primer_Brand__Icon-module__Icon--size-32___Tgjny{width:var(--base-size-32);height:var(--base-size-32)}.Primer_Brand__Icon-module__Icon--size-36___BRbWP{width:var(--base-size-36);height:var(--base-size-36)}.Primer_Brand__Icon-module__Icon--size-40___5TwjU{width:var(--base-size-40);height:var(--base-size-40)}.Primer_Brand__Icon-module__Icon--size-44___PjVGi{width:var(--base-size-44);height:var(--base-size-44)}.Primer_Brand__Icon-module__Icon--background___fgUOm{padding:var(--base-size-12);border-radius:var(--base-size-12)}.Primer_Brand__Icon-module__Icon--color-default___vt2u3{color:var(--brand-Icon-color-default)}.Primer_Brand__Icon-module__Icon--background-color-default___oiQxP{background-color:var(--brand-Icon-background-default)}.Primer_Brand__Icon-module__Icon--color-blue___vlDeB{color:var(--brand-Icon-color-blue)}.Primer_Brand__Icon-module__Icon--background-color-blue___kEC8S{background-color:var(--brand-Icon-background-blue)}.Primer_Brand__Icon-module__Icon--color-coral___Oo4Jn{color:var(--brand-Icon-color-coral)}.Primer_Brand__Icon-module__Icon--background-color-coral___tyhtJ{background-color:var(--brand-Icon-background-coral)}.Primer_Brand__Icon-module__Icon--color-green___ufOLM{color:var(--brand-Icon-color-green)}.Primer_Brand__Icon-module__Icon--background-color-green___A2kAi{background-color:var(--brand-Icon-background-green)}.Primer_Brand__Icon-module__Icon--color-gray___dgvUd{color:var(--brand-Icon-color-gray)}.Primer_Brand__Icon-module__Icon--background-color-gray___PqbZM{background-color:var(--brand-Icon-background-gray)}.Primer_Brand__Icon-module__Icon--color-indigo___JOc9i{color:var(--brand-Icon-color-indigo)}.Primer_Brand__Icon-module__Icon--background-color-indigo___JCAKp{background-color:var(--brand-Icon-background-indigo)}.Primer_Brand__Icon-module__Icon--color-lemon___6s8P_{color:var(--brand-Icon-color-lemon)}.Primer_Brand__Icon-module__Icon--background-color-lemon___LVQHh{background-color:var(--brand-Icon-background-lemon)}.Primer_Brand__Icon-module__Icon--color-lime___0sYqH{color:var(--brand-Icon-color-lime)}.Primer_Brand__Icon-module__Icon--background-color-lime___LAPrm{background-color:var(--brand-Icon-background-lime)}.Primer_Brand__Icon-module__Icon--color-orange___gMDpg{color:var(--brand-Icon-color-orange)}.Primer_Brand__Icon-module__Icon--background-color-orange___leM1v{background-color:var(--brand-Icon-background-orange)}.Primer_Brand__Icon-module__Icon--color-pink___ydryY{color:var(--brand-Icon-color-pink)}.Primer_Brand__Icon-module__Icon--background-color-pink___AZFEG{background-color:var(--brand-Icon-background-pink)}.Primer_Brand__Icon-module__Icon--color-purple___2UG4_{color:var(--brand-Icon-color-purple)}.Primer_Brand__Icon-module__Icon--background-color-purple___JrHKk{background-color:var(--brand-Icon-background-purple)}.Primer_Brand__Icon-module__Icon--color-red___lXx5z{color:var(--brand-Icon-color-red)}.Primer_Brand__Icon-module__Icon--background-color-red___qxCqZ{background-color:var(--brand-Icon-background-red)}.Primer_Brand__Icon-module__Icon--color-teal___wzkaS{color:var(--brand-Icon-color-teal)}.Primer_Brand__Icon-module__Icon--background-color-teal___iKPiz{background-color:var(--brand-Icon-background-teal)}.Primer_Brand__Icon-module__Icon--color-yellow___26Zwg{color:var(--brand-Icon-color-yellow)}.Primer_Brand__Icon-module__Icon--background-color-yellow___uFZoS{background-color:var(--brand-Icon-background-yellow)}

package/esm/Icon/Icon.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Icon.module-C1_lP1JO.css';var e = {
+import './Icon.module-UyYnXhrw.css';var e = {
 	Icon: "Primer_Brand__Icon-module__Icon___aJJhk",
 	"Icon--size-20": "Primer_Brand__Icon-module__Icon--size-20___j3HnM",
 	"Icon--size-24": "Primer_Brand__Icon-module__Icon--size-24___IMNie",

package/esm/Icon/Icon.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.module.js","names":[],"sources":["../../src/Icon/Icon.module.css"],"sourcesContent":[".Icon {\n box-sizing: content-box;\n padding: 0;\n}\n\n.Icon > svg {\n display: block; /* Ensure SVG are unaffected by text styles and font metrics, maintaining vertical alignment */\n}\n\n.Icon--size-20 {\n width: var(--base-size-20);\n height: var(--base-size-20);\n}\n\n.Icon--size-24 {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.Icon--size-28 {\n width: var(--base-size-28);\n height: var(--base-size-28);\n}\n\n.Icon--size-32 {\n width: var(--base-size-32);\n height: var(--base-size-32);\n}\n\n.Icon--size-36 {\n width: var(--base-size-36);\n height: var(--base-size-36);\n}\n\n.Icon--size-40 {\n width: var(--base-size-40);\n height: var(--base-size-40);\n}\n\n.Icon--size-44 {\n width: var(--base-size-44);\n height: var(--base-size-44);\n}\n\n.Icon--background {\n padding: var(--base-size-12);\n border-radius: var(--~~brand~~-~~borderRadius~~-~~medium~~);\n}\n\n.Icon--color-default {\n color: var(--brand-Icon-color-default);\n}\n\n.Icon--background-color-default {\n background-color: var(--brand-Icon-background-default);\n}\n\n.Icon--color-blue {\n color: var(--brand-Icon-color-blue);\n}\n\n.Icon--background-color-blue {\n background-color: var(--brand-Icon-background-blue);\n}\n\n.Icon--color-coral {\n color: var(--brand-Icon-color-coral);\n}\n\n.Icon--background-color-coral {\n background-color: var(--brand-Icon-background-coral);\n}\n\n.Icon--color-green {\n color: var(--brand-Icon-color-green);\n}\n\n.Icon--background-color-green {\n background-color: var(--brand-Icon-background-green);\n}\n\n.Icon--color-gray {\n color: var(--brand-Icon-color-gray);\n}\n\n.Icon--background-color-gray {\n background-color: var(--brand-Icon-background-gray);\n}\n\n.Icon--color-indigo {\n color: var(--brand-Icon-color-indigo);\n}\n\n.Icon--background-color-indigo {\n background-color: var(--brand-Icon-background-indigo);\n}\n\n.Icon--color-lemon {\n color: var(--brand-Icon-color-lemon);\n}\n\n.Icon--background-color-lemon {\n background-color: var(--brand-Icon-background-lemon);\n}\n\n.Icon--color-lime {\n color: var(--brand-Icon-color-lime);\n}\n\n.Icon--background-color-lime {\n background-color: var(--brand-Icon-background-lime);\n}\n\n.Icon--color-orange {\n color: var(--brand-Icon-color-orange);\n}\n\n.Icon--background-color-orange {\n background-color: var(--brand-Icon-background-orange);\n}\n\n.Icon--color-pink {\n color: var(--brand-Icon-color-pink);\n}\n\n.Icon--background-color-pink {\n background-color: var(--brand-Icon-background-pink);\n}\n\n.Icon--color-purple {\n color: var(--brand-Icon-color-purple);\n}\n\n.Icon--background-color-purple {\n background-color: var(--brand-Icon-background-purple);\n}\n\n.Icon--color-red {\n color: var(--brand-Icon-color-red);\n}\n\n.Icon--background-color-red {\n background-color: var(--brand-Icon-background-red);\n}\n\n.Icon--color-teal {\n color: var(--brand-Icon-color-teal);\n}\n\n.Icon--background-color-teal {\n background-color: var(--brand-Icon-background-teal);\n}\n\n.Icon--color-yellow {\n color: var(--brand-Icon-color-yellow);\n}\n\n.Icon--background-color-yellow {\n background-color: var(--brand-Icon-background-yellow);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Icon.module.js","names":[],"sources":["../../src/Icon/Icon.module.css"],"sourcesContent":[".Icon {\n box-sizing: content-box;\n padding: 0;\n}\n\n.Icon > svg {\n display: block; /* Ensure SVG are unaffected by text styles and font metrics, maintaining vertical alignment */\n}\n\n.Icon--size-20 {\n width: var(--base-size-20);\n height: var(--base-size-20);\n}\n\n.Icon--size-24 {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.Icon--size-28 {\n width: var(--base-size-28);\n height: var(--base-size-28);\n}\n\n.Icon--size-32 {\n width: var(--base-size-32);\n height: var(--base-size-32);\n}\n\n.Icon--size-36 {\n width: var(--base-size-36);\n height: var(--base-size-36);\n}\n\n.Icon--size-40 {\n width: var(--base-size-40);\n height: var(--base-size-40);\n}\n\n.Icon--size-44 {\n width: var(--base-size-44);\n height: var(--base-size-44);\n}\n\n.Icon--background {\n padding: var(--base-size-12);\n border-radius: var(--base-size-12);\n}\n\n.Icon--color-default {\n color: var(--brand-Icon-color-default);\n}\n\n.Icon--background-color-default {\n background-color: var(--brand-Icon-background-default);\n}\n\n.Icon--color-blue {\n color: var(--brand-Icon-color-blue);\n}\n\n.Icon--background-color-blue {\n background-color: var(--brand-Icon-background-blue);\n}\n\n.Icon--color-coral {\n color: var(--brand-Icon-color-coral);\n}\n\n.Icon--background-color-coral {\n background-color: var(--brand-Icon-background-coral);\n}\n\n.Icon--color-green {\n color: var(--brand-Icon-color-green);\n}\n\n.Icon--background-color-green {\n background-color: var(--brand-Icon-background-green);\n}\n\n.Icon--color-gray {\n color: var(--brand-Icon-color-gray);\n}\n\n.Icon--background-color-gray {\n background-color: var(--brand-Icon-background-gray);\n}\n\n.Icon--color-indigo {\n color: var(--brand-Icon-color-indigo);\n}\n\n.Icon--background-color-indigo {\n background-color: var(--brand-Icon-background-indigo);\n}\n\n.Icon--color-lemon {\n color: var(--brand-Icon-color-lemon);\n}\n\n.Icon--background-color-lemon {\n background-color: var(--brand-Icon-background-lemon);\n}\n\n.Icon--color-lime {\n color: var(--brand-Icon-color-lime);\n}\n\n.Icon--background-color-lime {\n background-color: var(--brand-Icon-background-lime);\n}\n\n.Icon--color-orange {\n color: var(--brand-Icon-color-orange);\n}\n\n.Icon--background-color-orange {\n background-color: var(--brand-Icon-background-orange);\n}\n\n.Icon--color-pink {\n color: var(--brand-Icon-color-pink);\n}\n\n.Icon--background-color-pink {\n background-color: var(--brand-Icon-background-pink);\n}\n\n.Icon--color-purple {\n color: var(--brand-Icon-color-purple);\n}\n\n.Icon--background-color-purple {\n background-color: var(--brand-Icon-background-purple);\n}\n\n.Icon--color-red {\n color: var(--brand-Icon-color-red);\n}\n\n.Icon--background-color-red {\n background-color: var(--brand-Icon-background-red);\n}\n\n.Icon--color-teal {\n color: var(--brand-Icon-color-teal);\n}\n\n.Icon--background-color-teal {\n background-color: var(--brand-Icon-background-teal);\n}\n\n.Icon--color-yellow {\n color: var(--brand-Icon-color-yellow);\n}\n\n.Icon--background-color-yellow {\n background-color: var(--brand-Icon-background-yellow);\n}\n"],"mappings":""}

package/esm/LogoSuite/LogoSuite.module-69Mthqju.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ{padding-block-end:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN+.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN{padding-block-start:var(--brand-LogoSuite-logobar-rowGap)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(:has(.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms)) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL{font-family:var(--brand-fontStack-monospace);font-weight:var(--brand-text-weight-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);text-transform:uppercase;color:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-16)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX{text-align:left}.Primer_Brand__LogoSuite-module__LogoSuite--center___j119b,.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u{text-align:center}.Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{padding-block-start:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{row-gap:var(--brand-LogoSuite-logobar-rowGap);flex-wrap:wrap;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-default___sGwUx{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-default);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-default);column-gap:var(--brand-LogoSuite-logobar-columnGap-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--gap-condensed___T86E8{--marquee-gap:var(--brand-LogoSuite-logobar-marquee-gap-condensed);-moz-column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed);column-gap:var(--brand-LogoSuite-logobar-columnGap-condensed)}.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL:not(.Primer_Brand__LogoSuite-module__LogoSuite__heading--visually-hidden___oZzlO)+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ:not(.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ+.Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ) .Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms+.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:var(--base-size-44);padding-block-start:0}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru a,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR a{width:auto;height:var(--base-size-32)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru path{fill:var(--brand-LogoSuite-color-logo-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-muted___iM9ru img{filter:var(--brand-LogoSuite-color-logo-filter-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR path{fill:var(--brand-LogoSuite-color-logo-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--variant-emphasis___yvuYR img{filter:var(--brand-LogoSuite-color-logo-filter-emphasis)}.Primer_Brand__LogoSuite-module__LogoSuite--start___zqwlX .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:center}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--justify___MTk0u .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{justify-content:space-between}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC a:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2);border-radius:var(--base-size-4)}.Primer_Brand__LogoSuite-module__LogoSuite--hasDivider___Wj8u_{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{align-items:center;gap:var(--base-size-24);flex-direction:row;max-width:100vw;margin:auto;display:flex;position:relative}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{justify-content:space-around;align-items:center;gap:var(--marquee-gap);min-width:100%;animation-name:Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4;animation-duration:var(--brand-LogoSuite-logobar-marquee-default);flex-shrink:0;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-play-state:running;animation-fill-mode:none;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-default___nsm9D{animation-duration:var(--brand-LogoSuite-logobar-marquee-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup--speed-slow___NZHrb{animation-duration:var(--brand-LogoSuite-logobar-marquee-slow)}@keyframes Primer_Brand__LogoSuite-module__LogobarScrollX___eGhi4{0%{transform:translate(0)}to{transform:translateX(calc(-100% - var(--marquee-gap)))}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS,.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-play-state:paused}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee____s6pK{padding-block:var(--base-size-4);-webkit-user-select:none;user-select:none;gap:var(--marquee-gap);flex:1;min-width:0;display:flex;overflow:hidden visible;-webkit-mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000);mask-image:linear-gradient(90deg,#0000,#000 20% 80%,#0000)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--paused___7p9ka *{animation-play-state:paused!important}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-marquee--focused___zizoE .Primer_Brand__LogoSuite-module__LogoSuite__logobar-marqueeGroup___bUhyS{animation-name:none}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie{cursor:pointer;width:var(--base-size-32);height:var(--base-size-32);border-radius:var(--base-size-48);border:none;border:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-LogoSuite-color-control-rest);transition:background-color var(--brand-animation-duration-faster);flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:hover{background-color:var(--brand-LogoSuite-color-control-hover)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie:focus-visible{outline:var(--base-size-4) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie svg{width:var(--base-size-16);height:var(--base-size-16);fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-playPauseButton___KDfie path{fill:var(--brand-color-text-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{gap:0;padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{padding:var(--base-size-20);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{margin-block-start:auto}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-32) var(--base-size-20) var(--base-size-32);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC,.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-marquee___tyW6K{width:100%;max-width:none}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__heading___PsSGL+.Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms{padding-block-start:var(--base-size-8)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobar___3IogC{padding-block-start:0}@media screen and (width>=48rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:91px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-40)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=64rem){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16{padding-inline:0}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{max-width:1280px}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__textContainer___OB63e{text-align:left;padding:var(--base-size-64)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC{padding:var(--base-size-64)}}@media screen and (width>=1281px){.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__content____8K_Y{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__LogoSuite-module__LogoSuite--gridline-expressive___86D16 .Primer_Brand__LogoSuite-module__LogoSuite__logobarContainer___RcqbC:first-child{border-inline-start:none}}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf{position:relative;overflow:visible}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:before{content:"";inset:calc(-1 * var(--base-size-16)) 0;z-index:1;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(var(--base-size-6));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover:before,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within:before{opacity:1}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within svg,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover img,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within img{opacity:.7;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:0;visibility:hidden;z-index:2;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:hover .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd,.Primer_Brand__LogoSuite-module__LogoSuite__logobar--has-takeover___ZQbXf:focus-within .Primer_Brand__LogoSuite-module__LogoSuite__logobar-takeoverButtonContainer___ehoEd{opacity:1;visibility:visible}

package/esm/LogoSuite/LogoSuite.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './LogoSuite.module-CWV4mJoG.css';var e = {
+import './LogoSuite.module-69Mthqju.css';var e = {
 	LogoSuite: "Primer_Brand__LogoSuite-module__LogoSuite___bHvbJ",
 	"LogoSuite--default": "Primer_Brand__LogoSuite-module__LogoSuite--default___mbLiN",
 	LogoSuite__description: "Primer_Brand__LogoSuite-module__LogoSuite__description___J_Sms",

package/esm/LogoSuite/LogoSuite.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) /\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n text-transform: uppercase;\n color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n display: flex;\n flex-wrap: wrap;\n row-gap: var(--brand-LogoSuite-logobar-rowGap);\n justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n padding-block-start: 0;\n margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n width: auto;\n height: var(--base-size-28);\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite__logobar--variant-muted svg,\n .LogoSuite__logobar--variant-muted img,\n .LogoSuite__logobar--variant-muted a,\n .LogoSuite__logobar--variant-emphasis svg,\n .LogoSuite__logobar--variant-emphasis img,\n .LogoSuite__logobar--variant-emphasis a {\n height: var(--base-size-32);\n }\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted path {\n fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted img {\n filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis path {\n fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis img {\n filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--justify .LogoSuite__logobar {\n justify-content: space-between;\n }\n}\n\n.LogoSuite__logobar a:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-24);\n margin: auto;\n max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: var(--marquee-gap);\n min-width: 100%;\n animation-name: LogobarScrollX;\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(calc(-100% - var(--marquee-gap)));\n }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,\n.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {\n animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n display: flex;\n overflow-x: hidden;\n overflow-y: visible;\n padding-block: var(--base-size-4);\n user-select: none;\n gap: var(--marquee-gap);\n flex: 1;\n min-width: 0;\n -webkit-mask-image: linear-gradient(\n to right,\n hsl(0 0% 0% / 0),\n hsl(0 0% 0% / 1) 20%,\n hsl(0 0% 0% / 1) 80%,\n hsl(0 0% 0% / 0)\n );\n mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused {\n animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {\n animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n cursor: pointer;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-32);\n height: var(--base-size-32);\n margin: 0;\n padding: 0;\n border: none;\n border-radius: var(--base-size-48);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-LogoSuite-color-control-rest);\n transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n fill: var(--brand-color-text-muted);\n}\n\n/* Gridline expressive variant styles /\n.LogoSuite--gridline-expressive {\n padding: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__content {\n padding-inline: 0;\n gap: 0;\n max-width: 618px; / From the Figma design /\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n margin-block-start: auto;\n}\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n max-width: none;\n width: 100%;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n padding-block-start: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-36);\n }\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 64rem) {\n .LogoSuite--gridline-expressive .LogoSuite__content {\n max-width: 1280px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n text-align: left;\n padding: var(--base-size-64);\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 1281px) {\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n / When the logobar is the only column visible (no adjacent text), this removes start border /\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n border-inline-start: none;\n }\n}\n\n.LogoSuite__logobar--has-takeover {\n position: relative;\n overflow: visible;\n}\n\n/ Glass blur overlay effect /\n.LogoSuite__logobar--has-takeover::before {\n content: '';\n position: absolute;\n inset: calc(-1 var(--base-size-16)) 0;\n z-index: 1;\n pointer-events: none;\n opacity: 0;\n backdrop-filter: blur(var(--base-size-6));\n -webkit-backdrop-filter: blur(var(--base-size-6));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n opacity: 0.7;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n opacity: 0;\n visibility: hidden;\n z-index: 2;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n opacity: 1;\n visibility: visible;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"LogoSuite.module.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.module.css"],"sourcesContent":[".LogoSuite {\n padding-block-end: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n.LogoSuite--default + .LogoSuite--default {\n padding-block-start: var(--brand-LogoSuite-logobar-rowGap);\n}\n\n/* Small monospace heading when standalone (no description) /\n.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {\n font-family: var(--brand-fontStack-monospace);\n font-weight: var(--brand-text-weight-100);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n text-transform: uppercase;\n color: var(--brand-color-text-muted);\n}\n\n.LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-16);\n}\n\n.LogoSuite--start {\n text-align: left;\n}\n\n.LogoSuite--center,\n.LogoSuite--justify {\n text-align: center;\n}\n\n.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {\n padding-block-start: var(--base-size-32);\n}\n\n.LogoSuite__logobar {\n display: flex;\n flex-wrap: wrap;\n row-gap: var(--brand-LogoSuite-logobar-rowGap);\n justify-content: center;\n}\n\n.LogoSuite__logobar--gap-default {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-default);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-default);\n}\n\n.LogoSuite__logobar--gap-condensed {\n --marquee-gap: var(--brand-LogoSuite-logobar-marquee-gap-condensed);\n column-gap: var(--brand-LogoSuite-logobar-columnGap-condensed);\n}\n\n.LogoSuite:not(.LogoSuite + .LogoSuite)\n .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)\n + .LogoSuite__logobar,\n.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {\n padding-block-start: 0;\n margin-block-start: var(--base-size-44);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted img,\n.LogoSuite__logobar--variant-muted a,\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis img,\n.LogoSuite__logobar--variant-emphasis a {\n width: auto;\n height: var(--base-size-32);\n}\n\n.LogoSuite__logobar--variant-muted svg,\n.LogoSuite__logobar--variant-muted path {\n fill: var(--brand-LogoSuite-color-logo-muted);\n}\n\n.LogoSuite__logobar--variant-muted img {\n filter: var(--brand-LogoSuite-color-logo-filter-muted);\n}\n\n.LogoSuite__logobar--variant-emphasis svg,\n.LogoSuite__logobar--variant-emphasis path {\n fill: var(--brand-LogoSuite-color-logo-emphasis);\n}\n\n.LogoSuite__logobar--variant-emphasis img {\n filter: var(--brand-LogoSuite-color-logo-filter-emphasis);\n}\n\n.LogoSuite--start .LogoSuite__logobar {\n justify-content: center;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--justify .LogoSuite__logobar {\n justify-content: space-between;\n }\n}\n\n.LogoSuite__logobar a:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n border-radius: var(--base-size-4);\n}\n\n.LogoSuite--hasDivider {\n border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.LogoSuite__logobar--has-marquee {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-24);\n margin: auto;\n max-width: 100vw;\n}\n\n.LogoSuite__logobar-marqueeGroup {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-around;\n gap: var(--marquee-gap);\n min-width: 100%;\n animation-name: LogobarScrollX;\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n animation-direction: normal;\n animation-fill-mode: none;\n animation-play-state: running;\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-default {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-default);\n}\n\n.LogoSuite__logobar-marqueeGroup--speed-slow {\n animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);\n}\n\n@keyframes LogobarScrollX {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(calc(-100% - var(--marquee-gap)));\n }\n}\n\n.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,\n.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {\n animation-play-state: paused;\n}\n\n.LogoSuite__logobar-marquee {\n display: flex;\n overflow-x: hidden;\n overflow-y: visible;\n padding-block: var(--base-size-4);\n user-select: none;\n gap: var(--marquee-gap);\n flex: 1;\n min-width: 0;\n -webkit-mask-image: linear-gradient(\n to right,\n hsl(0 0% 0% / 0),\n hsl(0 0% 0% / 1) 20%,\n hsl(0 0% 0% / 1) 80%,\n hsl(0 0% 0% / 0)\n );\n mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));\n}\n\n.LogoSuite__logobar--paused {\n animation-play-state: paused !important;\n}\n\n.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {\n animation-name: none;\n}\n\n.LogoSuite__logobar-playPauseButton {\n cursor: pointer;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--base-size-32);\n height: var(--base-size-32);\n margin: 0;\n padding: 0;\n border: none;\n border-radius: var(--base-size-48);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-LogoSuite-color-control-rest);\n transition: background-color var(--brand-animation-duration-faster);\n}\n\n.LogoSuite__logobar-playPauseButton:hover {\n background-color: var(--brand-LogoSuite-color-control-hover);\n}\n\n.LogoSuite__logobar-playPauseButton:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.LogoSuite__logobar-playPauseButton svg {\n width: var(--base-size-16);\n height: var(--base-size-16);\n fill: var(--brand-color-text-muted);\n}\n\n.LogoSuite__logobar-playPauseButton path {\n fill: var(--brand-color-text-muted);\n}\n\n/* Gridline expressive variant styles /\n.LogoSuite--gridline-expressive {\n padding: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__content {\n padding-inline: 0;\n gap: 0;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__textContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-20);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n margin-block-start: auto;\n}\n.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar,\n.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {\n max-width: none;\n width: 100%;\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {\n padding-block-start: var(--base-size-8);\n}\n\n.LogoSuite--gridline-expressive .LogoSuite__logobar {\n padding-block-start: 0;\n}\n\n@media screen and (min-width: 48rem) {\n .LogoSuite--gridline-expressive {\n padding-inline: 91px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-40);\n }\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 64rem) {\n .LogoSuite--gridline-expressive {\n padding-inline: 0;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__content {\n max-width: 1280px;\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__textContainer {\n text-align: left;\n padding: var(--base-size-64);\n }\n\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {\n padding: var(--base-size-64);\n }\n}\n\n@media screen and (min-width: 1281px) {\n .LogoSuite--gridline-expressive .LogoSuite__content {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n / When the logobar is the only column visible (no adjacent text), this removes start border /\n .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {\n border-inline-start: none;\n }\n}\n\n.LogoSuite__logobar--has-takeover {\n position: relative;\n overflow: visible;\n}\n\n/ Glass blur overlay effect /\n.LogoSuite__logobar--has-takeover::before {\n content: '';\n position: absolute;\n inset: calc(-1 var(--base-size-16)) 0;\n z-index: 1;\n pointer-events: none;\n opacity: 0;\n backdrop-filter: blur(var(--base-size-6));\n -webkit-backdrop-filter: blur(var(--base-size-6));\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar--has-takeover:hover::before,\n.LogoSuite__logobar--has-takeover:focus-within::before {\n opacity: 1;\n}\n\n.LogoSuite__logobar--has-takeover:hover svg,\n.LogoSuite__logobar--has-takeover:focus-within svg,\n.LogoSuite__logobar--has-takeover:hover img,\n.LogoSuite__logobar--has-takeover:focus-within img {\n opacity: 0.7;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.LogoSuite__logobar-takeoverButtonContainer {\n opacity: 0;\n visibility: hidden;\n z-index: 2;\n transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,\n.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {\n opacity: 1;\n visibility: visible;\n}\n"],"mappings":""}

package/esm/MediaPlaylist/MediaPlaylist.d.ts ADDED Viewed

@@ -0,0 +1,77 @@
+import React from 'react';
+import { type HeadingProps, type TextProps } from '..';
+import type { BaseProps } from '../component-helpers';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css';
+export type MediaPlaylistProps = React.PropsWithChildren<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export type MediaPlaylistHeadingProps = React.PropsWithChildren<{
+    as?: Exclude<HeadingProps['as'], 'h1'>;
+}> & BaseProps<HTMLDivElement>;
+type MediaPlaylistHeadingInternalProps = {
+    activeIndex?: number | null;
+    itemCount?: number;
+};
+declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemProps = React.PropsWithChildren<{
+    /**
+     * An optional thumbnail to be shown in the playlist for this item.
+     */
+    thumbnail?: React.ReactNode;
+} & BaseProps<HTMLDivElement>>;
+declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
+    children?: React.ReactNode;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+};
+declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
+export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.
+ */
+export declare const MediaPlaylist: React.ForwardRefExoticComponent<{
+    /**
+     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
+     */
+    defaultSelectedIndex?: number;
+    /**
+     * The index of the currently selected item. This makes the component controlled.
+     */
+    selectedIndex?: number;
+    /**
+     * Callback fired when the selected index changes.
+     */
+    onChange?: (selectedIndex: number) => void;
+    'data-testid'?: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
+    Heading: typeof MediaPlaylistHeading;
+    Item: typeof MediaPlaylistItem;
+    ItemHeading: typeof MediaPlaylistItemHeading;
+    ItemContent: typeof MediaPlaylistItemContent;
+    ItemMedia: React.ForwardRefExoticComponent<MediaPlaylistItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+    testIds: {
+        root: string;
+    };
+};
+export {};
+//# sourceMappingURL=MediaPlaylist.d.ts.map

package/esm/MediaPlaylist/MediaPlaylist.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MediaPlaylist.d.ts","sourceRoot":"","sources":["../../src/MediaPlaylist/MediaPlaylist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,IAAI,CAAA;AAKnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD;;GAEG;AACH,OAAO,kHAAkH,CAAA;AAOzH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACvD;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC,GACA,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AA6HxD,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC9D,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,CAAC,GACA,SAAS,CAAC,cAAc,CAAC,CAAA;AAE3B,KAAK,iCAAiC,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,WAAkB,EAClB,EAAS,EACT,QAAQ,EACR,SAAS,EACT,EAAE,EACF,SAAa,EACb,GAAG,KAAK,EACT,EAAE,yBAAyB,GAAG,iCAAiC,2CAa/D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAC1D;IACE;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,GAAG,SAAS,CAAC,cAAc,CAAC,CAC9B,CAAA;AAED,iBAAS,iBAAiB,CAAC,EAAC,QAAQ,EAAC,EAAE,sBAAsB,2CAE5D;AAED,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,iBAAS,wBAAwB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAkB,EAClB,IAAY,EACZ,KAAK,EACL,OAAmB,EACnB,MAAiB,EACjB,GAAG,KAAK,EACT,EAAE,6BAA6B,2CA4B/B;AAED,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEhF,iBAAS,wBAAwB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,6BAA6B,2CAM/F;AAED,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAyB9E;;GAEG;AACH,eAAO,MAAM,aAAa;IA7QxB;;OAEG;2BACoB,MAAM;IAC7B;;OAEG;oBACa,MAAM;IACtB;;OAEG;eACQ,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI;oBAC1B,MAAM;;;;;;;;;;;;CAwQtB,CAAA"}

package/esm/MediaPlaylist/MediaPlaylist.js ADDED Viewed

@@ -0,0 +1,172 @@
+import e from "../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../hooks/useId.js";
+import { Text as n } from "../Text/Text.js";
+import { Heading as r } from "../Heading/Heading.js";
+import i from "../component-helpers/shared.module.js";
+import { Pagination as a } from "../Pagination/Pagination.js";
+import { useMediaPlaylist as o } from "./useMediaPlaylist.js";
+import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes-YId8eSZQ.css';/* empty css                                                                                                            */
+import s from "./MediaPlaylist.module.js";
+import { cloneElement as c, forwardRef as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/MediaPlaylist/MediaPlaylist.tsx
+var p = l(({ children: n, className: r, defaultSelectedIndex: l = 0, onChange: u, selectedIndex: p, "data-testid": m, ...h }, g) => {
+	let _ = t(), { activeIndex: v, currentItemPage: x, getPaginationAttributes: S, getTabListProps: C, getTabPanelProps: w, getTabProps: T, handlePageChange: E, hasOverflowItems: D, headingChild: O, isItemSelected: k, items: A, setItemRef: j, tabListRef: M } = o({
+		children: n,
+		components: y,
+		defaultSelectedIndex: l,
+		onChange: u,
+		selectedIndex: p
+	}), N = O?.props.id ?? `${_}-heading`;
+	!O && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("MediaPlaylist: Heading child is required. This element labels the playlist for assistive technologies.");
+	let P = C(O ? { labelledBy: N } : { label: "Media playlist" });
+	return /* @__PURE__ */ d("div", {
+		ref: g,
+		className: e(s.MediaPlaylist, i.gridline, D && s["MediaPlaylist--overflowItems"], r),
+		"data-testid": m || b.root,
+		...h,
+		children: /* @__PURE__ */ f("div", {
+			className: s.MediaPlaylist__layout,
+			children: [/* @__PURE__ */ f("div", {
+				className: s.MediaPlaylist__playlist,
+				children: [
+					O && c(O, {
+						activeIndex: v,
+						id: N,
+						itemCount: A.length
+					}),
+					/* @__PURE__ */ d("div", {
+						...P,
+						ref: M,
+						className: s.MediaPlaylist__tablist,
+						children: A.map((t, n) => {
+							let r = T(String(n));
+							return /* @__PURE__ */ d("div", {
+								ref: (e) => {
+									j(n, e);
+								},
+								className: e(s.MediaPlaylist__item, k(n) && s["MediaPlaylist__item--selected"], t.className),
+								children: /* @__PURE__ */ d("button", {
+									type: "button",
+									...r,
+									className: s.MediaPlaylist__tab,
+									children: /* @__PURE__ */ f("span", {
+										className: s.MediaPlaylist__tabContent,
+										children: [t.thumbnail && /* @__PURE__ */ d("span", {
+											className: s.MediaPlaylist__thumbnail,
+											children: t.thumbnail
+										}), /* @__PURE__ */ d("span", {
+											className: s.MediaPlaylist__itemHeadingContent,
+											children: t.heading
+										})]
+									})
+								})
+							}, n);
+						})
+					}),
+					D && /* @__PURE__ */ d(a, {
+						className: s.MediaPlaylist__pagination,
+						pageCount: A.length,
+						currentPage: x,
+						onPageChange: E,
+						hrefBuilder: () => "#",
+						pageAttributesBuilder: S,
+						"aria-label": "Media playlist items",
+						showPages: !1
+					})
+				]
+			}), /* @__PURE__ */ d("div", {
+				className: s.MediaPlaylist__mediaPanels,
+				children: A.map((t, n) => /* @__PURE__ */ f("div", {
+					...w(String(n)),
+					tabIndex: -1,
+					className: e(s.MediaPlaylist__mediaPanel, s.MediaPlaylist__panel),
+					children: [t.media, /* @__PURE__ */ d("div", {
+						className: s.MediaPlaylist__panelContent,
+						children: t.content
+					})]
+				}, n))
+			})]
+		})
+	});
+});
+function m({ activeIndex: t = null, as: n = "h3", children: i, className: a, id: o, itemCount: c = 0, ...l }) {
+	return /* @__PURE__ */ f("div", {
+		className: e(s.MediaPlaylist__heading, a),
+		...l,
+		children: [/* @__PURE__ */ d(r, {
+			as: n,
+			id: o,
+			className: s.MediaPlaylist__headingLabel,
+			children: i
+		}), c > 0 && t !== null && /* @__PURE__ */ f("span", {
+			className: s.MediaPlaylist__headingCounter,
+			"aria-live": "polite",
+			children: [
+				t + 1,
+				"/",
+				c
+			]
+		})]
+	});
+}
+function h({ children: e }) {
+	return /* @__PURE__ */ d(u, { children: e });
+}
+function g({ children: t, className: r, description: i, font: a = "mona-sans", size: o = "200", title: c, variant: l = "default", weight: u = "medium", ...p }) {
+	let m = c !== void 0 || i !== void 0, h = c ?? t;
+	return /* @__PURE__ */ d(n, {
+		...p,
+		as: "span",
+		className: e(s.MediaPlaylist__itemHeading, r),
+		font: a,
+		size: o,
+		variant: l,
+		weight: u,
+		children: m ? /* @__PURE__ */ f("span", {
+			className: s.MediaPlaylist__itemHeadingDetails,
+			children: [h && /* @__PURE__ */ d("span", {
+				className: s.MediaPlaylist__itemHeadingTitle,
+				children: h
+			}), i && /* @__PURE__ */ d(n, {
+				as: "span",
+				font: "monospace",
+				size: "100",
+				variant: "muted",
+				children: i
+			})]
+		}) : t
+	});
+}
+function _({ children: t, className: n, ...r }) {
+	return /* @__PURE__ */ d("div", {
+		className: e(s.MediaPlaylist__content, n),
+		...r,
+		children: t
+	});
+}
+var v = l(function({ children: t, className: n, ...r }, i) {
+	return /* @__PURE__ */ d("div", {
+		ref: i,
+		className: e(s.MediaPlaylist__media, n),
+		...r,
+		children: t
+	});
+}), y = {
+	Heading: m,
+	Item: h,
+	ItemHeading: g,
+	ItemContent: _,
+	ItemMedia: v
+}, b = { root: "MediaPlaylist" }, x = Object.assign(p, {
+	Heading: m,
+	Item: h,
+	ItemHeading: g,
+	ItemContent: _,
+	ItemMedia: v,
+	testIds: b
+});
+//#endregion
+export { x as MediaPlaylist };
+//# sourceMappingURL=MediaPlaylist.js.map