@remember-web/mixin 0.1.0 → 0.1.2

package/dist/mixin/src/colors/index.d.ts

@@ -0,0 +1,3 @@
+export * from './variables';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/mixin/src/colors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/colors/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

package/dist/mixin/src/colors/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.cjs","sources":["../../../../src/colors/theme.ts"],"sourcesContent":["import type { RUIColorThemeType } from './types';\n\n/**\n * {@link https://www.figma.com/file/2qQ5eJPRTiAKyz6Q1IzfMJ/WEB?node-id=2570%3A12136&viewport=347%2C475%2C0.47}\n */\nexport const RUI_COLOR_THEME: RUIColorThemeType = {\n  light: {\n    '--rui-primary100': '#000000',\n    '--rui-primary200': '#FFFFFF',\n    '--rui-secondary100': '#FF6A0D',\n    '--rui-contents000': '#000000',\n    '--rui-contents100': '#424242',\n    '--rui-contents150': '#808080',\n    '--rui-contents200': '#BDBDBD',\n    '--rui-contents300': '#D4D4D4',\n    '--rui-contents999': '#FFFFFF',\n    '--rui-disabled': '#D4D4D4',\n    '--rui-disabled-role-red': '#F7ABAB',\n    '--rui-disabled-secondary': '#FFE3D1',\n    '--rui-role-red': '#ED4E4E',\n    '--rui-role-yellow': '#EDC84E',\n    '--rui-role-blue': '#2679ED',\n    '--rui-role-green': '#21C798',\n    '--rui-bg100': '#FFFFFF',\n    '--rui-bg200': '#FAFAFA',\n    '--rui-bg300': '#F2F2F2',\n    '--rui-bg-modal100': '#FFFFFF',\n    '--rui-bg-modal200': '#FAFAFA',\n    '--rui-bg-role-red': '#FFF5F5',\n    '--rui-bg-secondary100': '#FFF4ED',\n    '--rui-bg-highlight': '#FCF5DC',\n    '--rui-bg-role-yellow': '#FFFDF5',\n    '--rui-bg-role-blue': '#EDF4FF',\n    '--rui-bg-role-green': '#D9FCF2',\n    '--rui-divider': '#D4D4D4',\n    '--rui-fixed-white': '#FFFFFF',\n    '--rui-fixed-black': '#000000',\n    '--rui-fixed-bg-white': '#FFFFFF',\n  },\n  dark: {\n    '--rui-primary100': '#FFFFFF',\n    '--rui-primary200': '#000000',\n    '--rui-secondary100': '#FF6A0D',\n    '--rui-contents000': '#FFFFFF',\n    '--rui-contents100': '#EBEBEB',\n    '--rui-contents150': '#D4D4D4',\n    '--rui-contents200': '#BDBDBD',\n    '--rui-contents300': '#808080',\n    '--rui-contents999': '#000000',\n    '--rui-disabled': '#808080',\n    '--rui-disabled-role-red': '#6B2424',\n    '--rui-disabled-secondary': '#4D2A14',\n    '--rui-role-red': '#D13636',\n    '--rui-role-yellow': '#D1AD36',\n    '--rui-role-blue': '#085DD4',\n    '--rui-role-green': '#22B28A',\n    '--rui-bg100': '#1A1A1A',\n    '--rui-bg200': '#000000',\n    '--rui-bg300': '#000000',\n    '--rui-bg-modal100': '#2E2E2E',\n    '--rui-bg-modal200': '#424242',\n    '--rui-bg-role-red': '#381515',\n    '--rui-bg-secondary100': '#331D0F',\n    '--rui-bg-highlight': '#383015',\n    '--rui-bg-role-yellow': '#383015',\n    '--rui-bg-role-blue': '#002861',\n    '--rui-bg-role-green': '#15382E',\n    '--rui-divider': '#424242',\n    '--rui-fixed-white': '#FFFFFF',\n    '--rui-fixed-black': '#000000',\n    '--rui-fixed-bg-white': '#FFFFFF',\n  },\n};\n"],"names":["RUI_COLOR_THEME","light","dark"],"mappings":";;AAEA;AACA;AACA;AACO,IAAMA,eAAkC,GAAG;AAChDC,EAAAA,KAAK,EAAE;AACL,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,yBAAyB,EAAE,SAAS;AACpC,IAAA,0BAA0B,EAAE,SAAS;AACrC,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,iBAAiB,EAAE,SAAS;AAC5B,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,uBAAuB,EAAE,SAAS;AAClC,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,sBAAsB,EAAE,SAAS;AACjC,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,qBAAqB,EAAE,SAAS;AAChC,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,sBAAsB,EAAE,SAAA;GACzB;AACDC,EAAAA,IAAI,EAAE;AACJ,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,yBAAyB,EAAE,SAAS;AACpC,IAAA,0BAA0B,EAAE,SAAS;AACrC,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,iBAAiB,EAAE,SAAS;AAC5B,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,uBAAuB,EAAE,SAAS;AAClC,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,sBAAsB,EAAE,SAAS;AACjC,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,qBAAqB,EAAE,SAAS;AAChC,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,sBAAsB,EAAE,SAAA;AAC1B,GAAA;AACF;;;;"}

package/dist/mixin/src/colors/theme.d.ts

@@ -0,0 +1,6 @@
+import type { RUIColorThemeType } from './types';
+/**
+ * {@link https://www.figma.com/file/2qQ5eJPRTiAKyz6Q1IzfMJ/WEB?node-id=2570%3A12136&viewport=347%2C475%2C0.47}
+ */
+export declare const RUI_COLOR_THEME: RUIColorThemeType;
+//# sourceMappingURL=theme.d.ts.map

package/dist/mixin/src/colors/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,iBAmE7B,CAAC"}

package/dist/mixin/src/colors/theme.js

@@ -0,0 +1,74 @@
+/**
+ * {@link https://www.figma.com/file/2qQ5eJPRTiAKyz6Q1IzfMJ/WEB?node-id=2570%3A12136&viewport=347%2C475%2C0.47}
+ */
+var RUI_COLOR_THEME = {
+  light: {
+    '--rui-primary100': '#000000',
+    '--rui-primary200': '#FFFFFF',
+    '--rui-secondary100': '#FF6A0D',
+    '--rui-contents000': '#000000',
+    '--rui-contents100': '#424242',
+    '--rui-contents150': '#808080',
+    '--rui-contents200': '#BDBDBD',
+    '--rui-contents300': '#D4D4D4',
+    '--rui-contents999': '#FFFFFF',
+    '--rui-disabled': '#D4D4D4',
+    '--rui-disabled-role-red': '#F7ABAB',
+    '--rui-disabled-secondary': '#FFE3D1',
+    '--rui-role-red': '#ED4E4E',
+    '--rui-role-yellow': '#EDC84E',
+    '--rui-role-blue': '#2679ED',
+    '--rui-role-green': '#21C798',
+    '--rui-bg100': '#FFFFFF',
+    '--rui-bg200': '#FAFAFA',
+    '--rui-bg300': '#F2F2F2',
+    '--rui-bg-modal100': '#FFFFFF',
+    '--rui-bg-modal200': '#FAFAFA',
+    '--rui-bg-role-red': '#FFF5F5',
+    '--rui-bg-secondary100': '#FFF4ED',
+    '--rui-bg-highlight': '#FCF5DC',
+    '--rui-bg-role-yellow': '#FFFDF5',
+    '--rui-bg-role-blue': '#EDF4FF',
+    '--rui-bg-role-green': '#D9FCF2',
+    '--rui-divider': '#D4D4D4',
+    '--rui-fixed-white': '#FFFFFF',
+    '--rui-fixed-black': '#000000',
+    '--rui-fixed-bg-white': '#FFFFFF'
+  },
+  dark: {
+    '--rui-primary100': '#FFFFFF',
+    '--rui-primary200': '#000000',
+    '--rui-secondary100': '#FF6A0D',
+    '--rui-contents000': '#FFFFFF',
+    '--rui-contents100': '#EBEBEB',
+    '--rui-contents150': '#D4D4D4',
+    '--rui-contents200': '#BDBDBD',
+    '--rui-contents300': '#808080',
+    '--rui-contents999': '#000000',
+    '--rui-disabled': '#808080',
+    '--rui-disabled-role-red': '#6B2424',
+    '--rui-disabled-secondary': '#4D2A14',
+    '--rui-role-red': '#D13636',
+    '--rui-role-yellow': '#D1AD36',
+    '--rui-role-blue': '#085DD4',
+    '--rui-role-green': '#22B28A',
+    '--rui-bg100': '#1A1A1A',
+    '--rui-bg200': '#000000',
+    '--rui-bg300': '#000000',
+    '--rui-bg-modal100': '#2E2E2E',
+    '--rui-bg-modal200': '#424242',
+    '--rui-bg-role-red': '#381515',
+    '--rui-bg-secondary100': '#331D0F',
+    '--rui-bg-highlight': '#383015',
+    '--rui-bg-role-yellow': '#383015',
+    '--rui-bg-role-blue': '#002861',
+    '--rui-bg-role-green': '#15382E',
+    '--rui-divider': '#424242',
+    '--rui-fixed-white': '#FFFFFF',
+    '--rui-fixed-black': '#000000',
+    '--rui-fixed-bg-white': '#FFFFFF'
+  }
+};
+
+export { RUI_COLOR_THEME };
+//# sourceMappingURL=theme.js.map

package/dist/mixin/src/colors/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../src/colors/theme.ts"],"sourcesContent":["import type { RUIColorThemeType } from './types';\n\n/**\n * {@link https://www.figma.com/file/2qQ5eJPRTiAKyz6Q1IzfMJ/WEB?node-id=2570%3A12136&viewport=347%2C475%2C0.47}\n */\nexport const RUI_COLOR_THEME: RUIColorThemeType = {\n  light: {\n    '--rui-primary100': '#000000',\n    '--rui-primary200': '#FFFFFF',\n    '--rui-secondary100': '#FF6A0D',\n    '--rui-contents000': '#000000',\n    '--rui-contents100': '#424242',\n    '--rui-contents150': '#808080',\n    '--rui-contents200': '#BDBDBD',\n    '--rui-contents300': '#D4D4D4',\n    '--rui-contents999': '#FFFFFF',\n    '--rui-disabled': '#D4D4D4',\n    '--rui-disabled-role-red': '#F7ABAB',\n    '--rui-disabled-secondary': '#FFE3D1',\n    '--rui-role-red': '#ED4E4E',\n    '--rui-role-yellow': '#EDC84E',\n    '--rui-role-blue': '#2679ED',\n    '--rui-role-green': '#21C798',\n    '--rui-bg100': '#FFFFFF',\n    '--rui-bg200': '#FAFAFA',\n    '--rui-bg300': '#F2F2F2',\n    '--rui-bg-modal100': '#FFFFFF',\n    '--rui-bg-modal200': '#FAFAFA',\n    '--rui-bg-role-red': '#FFF5F5',\n    '--rui-bg-secondary100': '#FFF4ED',\n    '--rui-bg-highlight': '#FCF5DC',\n    '--rui-bg-role-yellow': '#FFFDF5',\n    '--rui-bg-role-blue': '#EDF4FF',\n    '--rui-bg-role-green': '#D9FCF2',\n    '--rui-divider': '#D4D4D4',\n    '--rui-fixed-white': '#FFFFFF',\n    '--rui-fixed-black': '#000000',\n    '--rui-fixed-bg-white': '#FFFFFF',\n  },\n  dark: {\n    '--rui-primary100': '#FFFFFF',\n    '--rui-primary200': '#000000',\n    '--rui-secondary100': '#FF6A0D',\n    '--rui-contents000': '#FFFFFF',\n    '--rui-contents100': '#EBEBEB',\n    '--rui-contents150': '#D4D4D4',\n    '--rui-contents200': '#BDBDBD',\n    '--rui-contents300': '#808080',\n    '--rui-contents999': '#000000',\n    '--rui-disabled': '#808080',\n    '--rui-disabled-role-red': '#6B2424',\n    '--rui-disabled-secondary': '#4D2A14',\n    '--rui-role-red': '#D13636',\n    '--rui-role-yellow': '#D1AD36',\n    '--rui-role-blue': '#085DD4',\n    '--rui-role-green': '#22B28A',\n    '--rui-bg100': '#1A1A1A',\n    '--rui-bg200': '#000000',\n    '--rui-bg300': '#000000',\n    '--rui-bg-modal100': '#2E2E2E',\n    '--rui-bg-modal200': '#424242',\n    '--rui-bg-role-red': '#381515',\n    '--rui-bg-secondary100': '#331D0F',\n    '--rui-bg-highlight': '#383015',\n    '--rui-bg-role-yellow': '#383015',\n    '--rui-bg-role-blue': '#002861',\n    '--rui-bg-role-green': '#15382E',\n    '--rui-divider': '#424242',\n    '--rui-fixed-white': '#FFFFFF',\n    '--rui-fixed-black': '#000000',\n    '--rui-fixed-bg-white': '#FFFFFF',\n  },\n};\n"],"names":["RUI_COLOR_THEME","light","dark"],"mappings":"AAEA;AACA;AACA;AACO,IAAMA,eAAkC,GAAG;AAChDC,EAAAA,KAAK,EAAE;AACL,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,yBAAyB,EAAE,SAAS;AACpC,IAAA,0BAA0B,EAAE,SAAS;AACrC,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,iBAAiB,EAAE,SAAS;AAC5B,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,uBAAuB,EAAE,SAAS;AAClC,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,sBAAsB,EAAE,SAAS;AACjC,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,qBAAqB,EAAE,SAAS;AAChC,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,sBAAsB,EAAE,SAAA;GACzB;AACDC,EAAAA,IAAI,EAAE;AACJ,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,yBAAyB,EAAE,SAAS;AACpC,IAAA,0BAA0B,EAAE,SAAS;AACrC,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,iBAAiB,EAAE,SAAS;AAC5B,IAAA,kBAAkB,EAAE,SAAS;AAC7B,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,aAAa,EAAE,SAAS;AACxB,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,uBAAuB,EAAE,SAAS;AAClC,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,sBAAsB,EAAE,SAAS;AACjC,IAAA,oBAAoB,EAAE,SAAS;AAC/B,IAAA,qBAAqB,EAAE,SAAS;AAChC,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,mBAAmB,EAAE,SAAS;AAC9B,IAAA,sBAAsB,EAAE,SAAA;AAC1B,GAAA;AACF;;;;"}

package/dist/mixin/src/colors/types.d.ts

@@ -0,0 +1,21 @@
+export type GetVariableName<C> = C extends `var(${infer R})` ? R : never;
+export type ThemeType = 'light' | 'dark';
+/**
+ * Variable = CSS변수로 사용되는 명칭
+ * VariableName = CSS변수로 사용되는 명칭에서 `var()`를 제거한 실제명칭
+ */
+export type ColorVariable<V extends string = string> = `var(--rui-${V})`;
+export type ColorVariableName<V extends string = string> = GetVariableName<ColorVariable<V>>;
+export type ColorSet = Record<ColorVariableName, string>;
+export type RUIColorType = typeof import('./variables');
+export type RUIColorName = keyof RUIColorType;
+export type RUIColorVariable = RUIColorType[RUIColorName];
+export type RUIColorVariableName = GetVariableName<RUIColorVariable>;
+export type RUIColorSet = Record<RUIColorVariableName, string>;
+export type ColorThemeType = {
+    [key in ThemeType]: ColorSet;
+};
+export type RUIColorThemeType = {
+    [key in ThemeType]: RUIColorSet;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/mixin/src/colors/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,MAAM,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC;AAEzE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC;;;GAGG;AAEH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,aAAa,CAAC,GAAG,CAAC;AACzE,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,eAAe,CACxE,aAAa,CAAC,CAAC,CAAC,CACjB,CAAC;AACF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG,cAAc,aAAa,CAAC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,MAAM,YAAY,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;AAC1D,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;AACrE,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;KAC1B,GAAG,IAAI,SAAS,GAAG,QAAQ;CAC7B,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG;KAC7B,GAAG,IAAI,SAAS,GAAG,WAAW;CAChC,CAAC"}

package/dist/{colors → mixin/src/colors}/utils.cjs

@@ -2,7 +2,7 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var common = require('../shared/utils/common.cjs');
+var common = require('../../../shared/utils/common.cjs');
 var theme = require('./theme.cjs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -14,12 +14,14 @@ var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArra
 function getColorVariableName(color) {
   return color.slice(4, -1);
 }
+
 /** RDS컬러의 rgb값이 필요할 때 사용ValidityState
  * @example css`color: rgba(${getRgb(contents000)},0.5)`
  */
 function getRgb(color) {
   return "var(".concat(getColorVariableName(color), "__rgb)");
 }
+
 /** RDS컬러를 통해서 css의 rgba함수를 사용
  * @example css`color: ${getRgb(contents000, 0.5)}`
  * @example css`box-shadow: 0 0 0 5px ${getRgb(contents000, 0.5)}`
@@ -27,6 +29,7 @@ function getRgb(color) {
 function getRgba(color, opacity) {
   return "rgba(".concat(getRgb(color), ",").concat(opacity, ")");
 }
+
 /** hex로 된 컬러값을 rgb값으로 변경해줌 */
 function hexToRgb(colorHex) {
   var hexWithoutHash = colorHex.replace('#', '');
@@ -53,6 +56,7 @@ function getBrowserTheme() {
   }
   return 'light';
 }
+
 /** css variable을 hex로 반환 */
 function getHexFromRuiCssVariable(_ref) {
   var colorVariable = _ref.colorVariable,

package/dist/mixin/src/colors/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../../src/colors/utils.ts"],"sourcesContent":["import { isSSR } from '@remember-web/shared/utils/common';\n\nimport type {\n  ColorVariable,\n  ColorVariableName,\n  RUIColorVariable,\n  ThemeType,\n} from './types';\nimport { RUI_COLOR_THEME } from './theme';\n\n/** var(color)로 된 string을 color로 변경해줄 때 사용 */\nexport function getColorVariableName<V extends string = string>(\n  color: ColorVariable<V>\n) {\n  return color.slice(4, -1) as ColorVariableName<V>;\n}\n\n/** RDS컬러의 rgb값이 필요할 때 사용ValidityState\n * @example css`color: rgba(${getRgb(contents000)},0.5)`\n */\nexport function getRgb(color: ColorVariable) {\n  return `var(${getColorVariableName(color)}__rgb)`;\n}\n\n/** RDS컬러를 통해서 css의 rgba함수를 사용\n * @example css`color: ${getRgb(contents000, 0.5)}`\n * @example css`box-shadow: 0 0 0 5px ${getRgb(contents000, 0.5)}`\n */\nexport function getRgba(color: ColorVariable, opacity: number | `${number}%`) {\n  return `rgba(${getRgb(color)},${opacity})`;\n}\n\n/** hex로 된 컬러값을 rgb값으로 변경해줌 */\nexport function hexToRgb(colorHex: string) {\n  let hexWithoutHash = colorHex.replace('#', '');\n\n  if (hexWithoutHash.length !== 3 && hexWithoutHash.length !== 6) {\n    throw new Error('Invalid hex color');\n  }\n\n  if (hexWithoutHash.length === 3) {\n    hexWithoutHash = [...hexWithoutHash].map((hex) => hex.repeat(2)).join();\n  }\n\n  const [, r, g, b] = hexWithoutHash\n    .split(/(..)(..)(..)/)\n    .map((hex) => parseInt(hex, 16));\n\n  return `${r},${g},${b}`;\n}\n\nexport function getBrowserTheme(): ThemeType {\n  if (!isSSR() && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n    return 'dark';\n  }\n  return 'light';\n}\n\n/** css variable을 hex로 반환 */\nexport function getHexFromRuiCssVariable({\n  colorVariable,\n  theme,\n}: {\n  theme: ThemeType;\n  colorVariable: RUIColorVariable;\n}) {\n  return RUI_COLOR_THEME[theme][getColorVariableName(colorVariable)];\n}\n"],"names":["getColorVariableName","color","slice","getRgb","concat","getRgba","opacity","hexToRgb","colorHex","hexWithoutHash","replace","length","Error","_toConsumableArray","map","hex","repeat","join","_hexWithoutHash$split","split","parseInt","_hexWithoutHash$split2","_slicedToArray","r","g","b","getBrowserTheme","isSSR","window","matchMedia","matches","getHexFromRuiCssVariable","_ref","colorVariable","theme","RUI_COLOR_THEME"],"mappings":";;;;;;;;;;;;AAUA;AACO,SAASA,oBAAoBA,CAClCC,KAAuB,EACvB;EACA,OAAOA,KAAK,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAC3B,CAAA;;AAEA;AACA;AACA;AACO,SAASC,MAAMA,CAACF,KAAoB,EAAE;AAC3C,EAAA,OAAA,MAAA,CAAAG,MAAA,CAAcJ,oBAAoB,CAACC,KAAK,CAAC,EAAA,QAAA,CAAA,CAAA;AAC3C,CAAA;;AAEA;AACA;AACA;AACA;AACO,SAASI,OAAOA,CAACJ,KAAoB,EAAEK,OAA8B,EAAE;EAC5E,OAAAF,OAAAA,CAAAA,MAAA,CAAeD,MAAM,CAACF,KAAK,CAAC,EAAA,GAAA,CAAA,CAAAG,MAAA,CAAIE,OAAO,EAAA,GAAA,CAAA,CAAA;AACzC,CAAA;;AAEA;AACO,SAASC,QAAQA,CAACC,QAAgB,EAAE;EACzC,IAAIC,cAAc,GAAGD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;EAE9C,IAAID,cAAc,CAACE,MAAM,KAAK,CAAC,IAAIF,cAAc,CAACE,MAAM,KAAK,CAAC,EAAE;AAC9D,IAAA,MAAM,IAAIC,KAAK,CAAC,mBAAmB,CAAC,CAAA;AACtC,GAAA;AAEA,EAAA,IAAIH,cAAc,CAACE,MAAM,KAAK,CAAC,EAAE;IAC/BF,cAAc,GAAGI,mCAAA,CAAIJ,cAAc,EAAEK,GAAG,CAAC,UAACC,GAAG,EAAA;AAAA,MAAA,OAAKA,GAAG,CAACC,MAAM,CAAC,CAAC,CAAC,CAAA;KAAC,CAAA,CAACC,IAAI,EAAE,CAAA;AACzE,GAAA;AAEA,EAAA,IAAAC,qBAAA,GAAoBT,cAAc,CAC/BU,KAAK,CAAC,cAAc,CAAC,CACrBL,GAAG,CAAC,UAACC,GAAG,EAAA;AAAA,MAAA,OAAKK,QAAQ,CAACL,GAAG,EAAE,EAAE,CAAC,CAAA;KAAC,CAAA;IAAAM,sBAAA,GAAAC,+BAAA,CAAAJ,qBAAA,EAAA,CAAA,CAAA;AAFzBK,IAAAA,CAAC,GAAAF,sBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,CAAC,GAAAH,sBAAA,CAAA,CAAA,CAAA;AAAEI,IAAAA,CAAC,GAAAJ,sBAAA,CAAA,CAAA,CAAA,CAAA;EAIhB,OAAAjB,EAAAA,CAAAA,MAAA,CAAUmB,CAAC,EAAAnB,GAAAA,CAAAA,CAAAA,MAAA,CAAIoB,CAAC,EAAA,GAAA,CAAA,CAAApB,MAAA,CAAIqB,CAAC,CAAA,CAAA;AACvB,CAAA;AAEO,SAASC,eAAeA,GAAc;AAC3C,EAAA,IAAI,CAACC,YAAK,EAAE,IAAIC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC,CAACC,OAAO,EAAE;AACzE,IAAA,OAAO,MAAM,CAAA;AACf,GAAA;AACA,EAAA,OAAO,OAAO,CAAA;AAChB,CAAA;;AAEA;AACO,SAASC,wBAAwBA,CAAAC,IAAA,EAMrC;AAAA,EAAA,IALDC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IACbC,OAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;EAKL,OAAOC,qBAAe,CAACD,OAAK,CAAC,CAAClC,oBAAoB,CAACiC,aAAa,CAAC,CAAC,CAAA;AACpE;;;;;;;;;"}

package/dist/mixin/src/colors/utils.d.ts

@@ -0,0 +1,21 @@
+import type { ColorVariable, ColorVariableName, RUIColorVariable, ThemeType } from './types';
+/** var(color)로 된 string을 color로 변경해줄 때 사용 */
+export declare function getColorVariableName<V extends string = string>(color: ColorVariable<V>): ColorVariableName<V>;
+/** RDS컬러의 rgb값이 필요할 때 사용ValidityState
+ * @example css`color: rgba(${getRgb(contents000)},0.5)`
+ */
+export declare function getRgb(color: ColorVariable): string;
+/** RDS컬러를 통해서 css의 rgba함수를 사용
+ * @example css`color: ${getRgb(contents000, 0.5)}`
+ * @example css`box-shadow: 0 0 0 5px ${getRgb(contents000, 0.5)}`
+ */
+export declare function getRgba(color: ColorVariable, opacity: number | `${number}%`): string;
+/** hex로 된 컬러값을 rgb값으로 변경해줌 */
+export declare function hexToRgb(colorHex: string): string;
+export declare function getBrowserTheme(): ThemeType;
+/** css variable을 hex로 반환 */
+export declare function getHexFromRuiCssVariable({ colorVariable, theme, }: {
+    theme: ThemeType;
+    colorVariable: RUIColorVariable;
+}): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/mixin/src/colors/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/colors/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EACV,MAAM,SAAS,CAAC;AAGjB,6CAA6C;AAC7C,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC5D,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,wBAGxB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,aAAa,UAE1C;AAED;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,UAE3E;AAED,8BAA8B;AAC9B,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,UAgBxC;AAED,wBAAgB,eAAe,IAAI,SAAS,CAK3C;AAED,4BAA4B;AAC5B,wBAAgB,wBAAwB,CAAC,EACvC,aAAa,EACb,KAAK,GACN,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,gBAAgB,CAAC;CACjC,UAEA"}

package/dist/mixin/src/colors/utils.js

@@ -0,0 +1,61 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { isSSR } from '../../../shared/utils/common.js';
+import { RUI_COLOR_THEME } from './theme.js';
+
+/** var(color)로 된 string을 color로 변경해줄 때 사용 */
+function getColorVariableName(color) {
+  return color.slice(4, -1);
+}
+
+/** RDS컬러의 rgb값이 필요할 때 사용ValidityState
+ * @example css`color: rgba(${getRgb(contents000)},0.5)`
+ */
+function getRgb(color) {
+  return "var(".concat(getColorVariableName(color), "__rgb)");
+}
+
+/** RDS컬러를 통해서 css의 rgba함수를 사용
+ * @example css`color: ${getRgb(contents000, 0.5)}`
+ * @example css`box-shadow: 0 0 0 5px ${getRgb(contents000, 0.5)}`
+ */
+function getRgba(color, opacity) {
+  return "rgba(".concat(getRgb(color), ",").concat(opacity, ")");
+}
+
+/** hex로 된 컬러값을 rgb값으로 변경해줌 */
+function hexToRgb(colorHex) {
+  var hexWithoutHash = colorHex.replace('#', '');
+  if (hexWithoutHash.length !== 3 && hexWithoutHash.length !== 6) {
+    throw new Error('Invalid hex color');
+  }
+  if (hexWithoutHash.length === 3) {
+    hexWithoutHash = _toConsumableArray(hexWithoutHash).map(function (hex) {
+      return hex.repeat(2);
+    }).join();
+  }
+  var _hexWithoutHash$split = hexWithoutHash.split(/(..)(..)(..)/).map(function (hex) {
+      return parseInt(hex, 16);
+    }),
+    _hexWithoutHash$split2 = _slicedToArray(_hexWithoutHash$split, 4),
+    r = _hexWithoutHash$split2[1],
+    g = _hexWithoutHash$split2[2],
+    b = _hexWithoutHash$split2[3];
+  return "".concat(r, ",").concat(g, ",").concat(b);
+}
+function getBrowserTheme() {
+  if (!isSSR() && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+  return 'light';
+}
+
+/** css variable을 hex로 반환 */
+function getHexFromRuiCssVariable(_ref) {
+  var colorVariable = _ref.colorVariable,
+    theme = _ref.theme;
+  return RUI_COLOR_THEME[theme][getColorVariableName(colorVariable)];
+}
+
+export { getBrowserTheme, getColorVariableName, getHexFromRuiCssVariable, getRgb, getRgba, hexToRgb };
+//# sourceMappingURL=utils.js.map

package/dist/mixin/src/colors/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/colors/utils.ts"],"sourcesContent":["import { isSSR } from '@remember-web/shared/utils/common';\n\nimport type {\n  ColorVariable,\n  ColorVariableName,\n  RUIColorVariable,\n  ThemeType,\n} from './types';\nimport { RUI_COLOR_THEME } from './theme';\n\n/** var(color)로 된 string을 color로 변경해줄 때 사용 */\nexport function getColorVariableName<V extends string = string>(\n  color: ColorVariable<V>\n) {\n  return color.slice(4, -1) as ColorVariableName<V>;\n}\n\n/** RDS컬러의 rgb값이 필요할 때 사용ValidityState\n * @example css`color: rgba(${getRgb(contents000)},0.5)`\n */\nexport function getRgb(color: ColorVariable) {\n  return `var(${getColorVariableName(color)}__rgb)`;\n}\n\n/** RDS컬러를 통해서 css의 rgba함수를 사용\n * @example css`color: ${getRgb(contents000, 0.5)}`\n * @example css`box-shadow: 0 0 0 5px ${getRgb(contents000, 0.5)}`\n */\nexport function getRgba(color: ColorVariable, opacity: number | `${number}%`) {\n  return `rgba(${getRgb(color)},${opacity})`;\n}\n\n/** hex로 된 컬러값을 rgb값으로 변경해줌 */\nexport function hexToRgb(colorHex: string) {\n  let hexWithoutHash = colorHex.replace('#', '');\n\n  if (hexWithoutHash.length !== 3 && hexWithoutHash.length !== 6) {\n    throw new Error('Invalid hex color');\n  }\n\n  if (hexWithoutHash.length === 3) {\n    hexWithoutHash = [...hexWithoutHash].map((hex) => hex.repeat(2)).join();\n  }\n\n  const [, r, g, b] = hexWithoutHash\n    .split(/(..)(..)(..)/)\n    .map((hex) => parseInt(hex, 16));\n\n  return `${r},${g},${b}`;\n}\n\nexport function getBrowserTheme(): ThemeType {\n  if (!isSSR() && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n    return 'dark';\n  }\n  return 'light';\n}\n\n/** css variable을 hex로 반환 */\nexport function getHexFromRuiCssVariable({\n  colorVariable,\n  theme,\n}: {\n  theme: ThemeType;\n  colorVariable: RUIColorVariable;\n}) {\n  return RUI_COLOR_THEME[theme][getColorVariableName(colorVariable)];\n}\n"],"names":["getColorVariableName","color","slice","getRgb","concat","getRgba","opacity","hexToRgb","colorHex","hexWithoutHash","replace","length","Error","_toConsumableArray","map","hex","repeat","join","_hexWithoutHash$split","split","parseInt","_hexWithoutHash$split2","_slicedToArray","r","g","b","getBrowserTheme","isSSR","window","matchMedia","matches","getHexFromRuiCssVariable","_ref","colorVariable","theme","RUI_COLOR_THEME"],"mappings":";;;;;AAUA;AACO,SAASA,oBAAoBA,CAClCC,KAAuB,EACvB;EACA,OAAOA,KAAK,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAC3B,CAAA;;AAEA;AACA;AACA;AACO,SAASC,MAAMA,CAACF,KAAoB,EAAE;AAC3C,EAAA,OAAA,MAAA,CAAAG,MAAA,CAAcJ,oBAAoB,CAACC,KAAK,CAAC,EAAA,QAAA,CAAA,CAAA;AAC3C,CAAA;;AAEA;AACA;AACA;AACA;AACO,SAASI,OAAOA,CAACJ,KAAoB,EAAEK,OAA8B,EAAE;EAC5E,OAAAF,OAAAA,CAAAA,MAAA,CAAeD,MAAM,CAACF,KAAK,CAAC,EAAA,GAAA,CAAA,CAAAG,MAAA,CAAIE,OAAO,EAAA,GAAA,CAAA,CAAA;AACzC,CAAA;;AAEA;AACO,SAASC,QAAQA,CAACC,QAAgB,EAAE;EACzC,IAAIC,cAAc,GAAGD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;EAE9C,IAAID,cAAc,CAACE,MAAM,KAAK,CAAC,IAAIF,cAAc,CAACE,MAAM,KAAK,CAAC,EAAE;AAC9D,IAAA,MAAM,IAAIC,KAAK,CAAC,mBAAmB,CAAC,CAAA;AACtC,GAAA;AAEA,EAAA,IAAIH,cAAc,CAACE,MAAM,KAAK,CAAC,EAAE;IAC/BF,cAAc,GAAGI,kBAAA,CAAIJ,cAAc,EAAEK,GAAG,CAAC,UAACC,GAAG,EAAA;AAAA,MAAA,OAAKA,GAAG,CAACC,MAAM,CAAC,CAAC,CAAC,CAAA;KAAC,CAAA,CAACC,IAAI,EAAE,CAAA;AACzE,GAAA;AAEA,EAAA,IAAAC,qBAAA,GAAoBT,cAAc,CAC/BU,KAAK,CAAC,cAAc,CAAC,CACrBL,GAAG,CAAC,UAACC,GAAG,EAAA;AAAA,MAAA,OAAKK,QAAQ,CAACL,GAAG,EAAE,EAAE,CAAC,CAAA;KAAC,CAAA;IAAAM,sBAAA,GAAAC,cAAA,CAAAJ,qBAAA,EAAA,CAAA,CAAA;AAFzBK,IAAAA,CAAC,GAAAF,sBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,CAAC,GAAAH,sBAAA,CAAA,CAAA,CAAA;AAAEI,IAAAA,CAAC,GAAAJ,sBAAA,CAAA,CAAA,CAAA,CAAA;EAIhB,OAAAjB,EAAAA,CAAAA,MAAA,CAAUmB,CAAC,EAAAnB,GAAAA,CAAAA,CAAAA,MAAA,CAAIoB,CAAC,EAAA,GAAA,CAAA,CAAApB,MAAA,CAAIqB,CAAC,CAAA,CAAA;AACvB,CAAA;AAEO,SAASC,eAAeA,GAAc;AAC3C,EAAA,IAAI,CAACC,KAAK,EAAE,IAAIC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC,CAACC,OAAO,EAAE;AACzE,IAAA,OAAO,MAAM,CAAA;AACf,GAAA;AACA,EAAA,OAAO,OAAO,CAAA;AAChB,CAAA;;AAEA;AACO,SAASC,wBAAwBA,CAAAC,IAAA,EAMrC;AAAA,EAAA,IALDC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IACbC,KAAK,GAAAF,IAAA,CAALE,KAAK,CAAA;EAKL,OAAOC,eAAe,CAACD,KAAK,CAAC,CAAClC,oBAAoB,CAACiC,aAAa,CAAC,CAAC,CAAA;AACpE;;;;"}

package/dist/{colors → mixin/src/colors}/variables.cjs

@@ -3,6 +3,7 @@
 var primary100 = 'var(--rui-primary100)';
 var primary200 = 'var(--rui-primary200)';
 var secondary100 = 'var(--rui-secondary100)';
+
 // Contents  txt/ label/ border/ divider
 var contents000 = 'var(--rui-contents000)';
 var contents100 = 'var(--rui-contents100)';
@@ -10,15 +11,18 @@ var contents150 = 'var(--rui-contents150)';
 var contents200 = 'var(--rui-contents200)';
 var contents300 = 'var(--rui-contents300)';
 var contents999 = 'var(--rui-contents999)';
+
 // Disable disabled CTA
 var disabled = 'var(--rui-disabled)';
 var disabledRoleRed = 'var(--rui-disabled-role-red)';
 var disabledSecondary = 'var(--rui-disabled-secondary)';
+
 // Accent Error/ Link/
 var roleRed = 'var(--rui-role-red)';
 var roleYellow = 'var(--rui-role-yellow)';
 var roleBlue = 'var(--rui-role-blue)';
 var roleGreen = 'var(--rui-role-green)';
+
 // Background
 var bg100 = 'var(--rui-bg100)';
 var bg200 = 'var(--rui-bg200)';
@@ -31,8 +35,10 @@ var bgHighlight = 'var(--rui-bg-highlight)';
 var bgRoleYellow = 'var(--rui-bg-role-yellow)';
 var bgRoleBlue = 'var(--rui-bg-role-blue)';
 var bgRoleGreen = 'var(--rui-bg-role-green)';
+
 // Divider
 var divider = 'var(--rui-divider)';
+
 // Fixed
 var fixedWhite = 'var(--rui-fixed-white)';
 var fixedBgWhite = 'var(--rui-fixed-bg-white)';

package/dist/mixin/src/colors/variables.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.cjs","sources":["../../../../src/colors/variables.ts"],"sourcesContent":["export const primary100 = 'var(--rui-primary100)';\nexport const primary200 = 'var(--rui-primary200)';\nexport const secondary100 = 'var(--rui-secondary100)';\n\n// Contents  txt/ label/ border/ divider\nexport const contents000 = 'var(--rui-contents000)';\nexport const contents100 = 'var(--rui-contents100)';\nexport const contents150 = 'var(--rui-contents150)';\nexport const contents200 = 'var(--rui-contents200)';\nexport const contents300 = 'var(--rui-contents300)';\nexport const contents999 = 'var(--rui-contents999)';\n\n// Disable disabled CTA\nexport const disabled = 'var(--rui-disabled)';\nexport const disabledRoleRed = 'var(--rui-disabled-role-red)';\nexport const disabledSecondary = 'var(--rui-disabled-secondary)';\n\n// Accent Error/ Link/\nexport const roleRed = 'var(--rui-role-red)';\nexport const roleYellow = 'var(--rui-role-yellow)';\nexport const roleBlue = 'var(--rui-role-blue)';\nexport const roleGreen = 'var(--rui-role-green)';\n\n// Background\nexport const bg100 = 'var(--rui-bg100)';\nexport const bg200 = 'var(--rui-bg200)';\nexport const bg300 = 'var(--rui-bg300)';\nexport const bgModal100 = 'var(--rui-bg-modal100)';\nexport const bgModal200 = 'var(--rui-bg-modal200)';\nexport const bgRoleRed = 'var(--rui-bg-role-red)';\nexport const bgSecondary100 = 'var(--rui-bg-secondary100)';\nexport const bgHighlight = 'var(--rui-bg-highlight)';\nexport const bgRoleYellow = 'var(--rui-bg-role-yellow)';\nexport const bgRoleBlue = 'var(--rui-bg-role-blue)';\nexport const bgRoleGreen = 'var(--rui-bg-role-green)';\n\n// Divider\nexport const divider = 'var(--rui-divider)';\n\n// Fixed\nexport const fixedWhite = 'var(--rui-fixed-white)';\nexport const fixedBgWhite = 'var(--rui-fixed-bg-white)';\nexport const fixedBlack = 'var(--rui-fixed-black)';\n"],"names":["primary100","primary200","secondary100","contents000","contents100","contents150","contents200","contents300","contents999","disabled","disabledRoleRed","disabledSecondary","roleRed","roleYellow","roleBlue","roleGreen","bg100","bg200","bg300","bgModal100","bgModal200","bgRoleRed","bgSecondary100","bgHighlight","bgRoleYellow","bgRoleBlue","bgRoleGreen","divider","fixedWhite","fixedBgWhite","fixedBlack"],"mappings":";;AAAO,IAAMA,UAAU,GAAG,wBAAuB;AAC1C,IAAMC,UAAU,GAAG,wBAAuB;AAC1C,IAAMC,YAAY,GAAG,0BAAyB;;AAErD;AACO,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;;AAEnD;AACO,IAAMC,QAAQ,GAAG,sBAAqB;AACtC,IAAMC,eAAe,GAAG,+BAA8B;AACtD,IAAMC,iBAAiB,GAAG,gCAA+B;;AAEhE;AACO,IAAMC,OAAO,GAAG,sBAAqB;AACrC,IAAMC,UAAU,GAAG,yBAAwB;AAC3C,IAAMC,QAAQ,GAAG,uBAAsB;AACvC,IAAMC,SAAS,GAAG,wBAAuB;;AAEhD;AACO,IAAMC,KAAK,GAAG,mBAAkB;AAChC,IAAMC,KAAK,GAAG,mBAAkB;AAChC,IAAMC,KAAK,GAAG,mBAAkB;AAChC,IAAMC,UAAU,GAAG,yBAAwB;AAC3C,IAAMC,UAAU,GAAG,yBAAwB;AAC3C,IAAMC,SAAS,GAAG,yBAAwB;AAC1C,IAAMC,cAAc,GAAG,6BAA4B;AACnD,IAAMC,WAAW,GAAG,0BAAyB;AAC7C,IAAMC,YAAY,GAAG,4BAA2B;AAChD,IAAMC,UAAU,GAAG,0BAAyB;AAC5C,IAAMC,WAAW,GAAG,2BAA0B;;AAErD;AACO,IAAMC,OAAO,GAAG,qBAAoB;;AAE3C;AACO,IAAMC,UAAU,GAAG,yBAAwB;AAC3C,IAAMC,YAAY,GAAG,4BAA2B;AAChD,IAAMC,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/mixin/src/colors/variables.d.ts

@@ -0,0 +1,32 @@
+export declare const primary100 = "var(--rui-primary100)";
+export declare const primary200 = "var(--rui-primary200)";
+export declare const secondary100 = "var(--rui-secondary100)";
+export declare const contents000 = "var(--rui-contents000)";
+export declare const contents100 = "var(--rui-contents100)";
+export declare const contents150 = "var(--rui-contents150)";
+export declare const contents200 = "var(--rui-contents200)";
+export declare const contents300 = "var(--rui-contents300)";
+export declare const contents999 = "var(--rui-contents999)";
+export declare const disabled = "var(--rui-disabled)";
+export declare const disabledRoleRed = "var(--rui-disabled-role-red)";
+export declare const disabledSecondary = "var(--rui-disabled-secondary)";
+export declare const roleRed = "var(--rui-role-red)";
+export declare const roleYellow = "var(--rui-role-yellow)";
+export declare const roleBlue = "var(--rui-role-blue)";
+export declare const roleGreen = "var(--rui-role-green)";
+export declare const bg100 = "var(--rui-bg100)";
+export declare const bg200 = "var(--rui-bg200)";
+export declare const bg300 = "var(--rui-bg300)";
+export declare const bgModal100 = "var(--rui-bg-modal100)";
+export declare const bgModal200 = "var(--rui-bg-modal200)";
+export declare const bgRoleRed = "var(--rui-bg-role-red)";
+export declare const bgSecondary100 = "var(--rui-bg-secondary100)";
+export declare const bgHighlight = "var(--rui-bg-highlight)";
+export declare const bgRoleYellow = "var(--rui-bg-role-yellow)";
+export declare const bgRoleBlue = "var(--rui-bg-role-blue)";
+export declare const bgRoleGreen = "var(--rui-bg-role-green)";
+export declare const divider = "var(--rui-divider)";
+export declare const fixedWhite = "var(--rui-fixed-white)";
+export declare const fixedBgWhite = "var(--rui-fixed-bg-white)";
+export declare const fixedBlack = "var(--rui-fixed-black)";
+//# sourceMappingURL=variables.d.ts.map

package/dist/mixin/src/colors/variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.d.ts","sourceRoot":"","sources":["../../../../src/colors/variables.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,0BAA0B,CAAC;AAClD,eAAO,MAAM,UAAU,0BAA0B,CAAC;AAClD,eAAO,MAAM,YAAY,4BAA4B,CAAC;AAGtD,eAAO,MAAM,WAAW,2BAA2B,CAAC;AACpD,eAAO,MAAM,WAAW,2BAA2B,CAAC;AACpD,eAAO,MAAM,WAAW,2BAA2B,CAAC;AACpD,eAAO,MAAM,WAAW,2BAA2B,CAAC;AACpD,eAAO,MAAM,WAAW,2BAA2B,CAAC;AACpD,eAAO,MAAM,WAAW,2BAA2B,CAAC;AAGpD,eAAO,MAAM,QAAQ,wBAAwB,CAAC;AAC9C,eAAO,MAAM,eAAe,iCAAiC,CAAC;AAC9D,eAAO,MAAM,iBAAiB,kCAAkC,CAAC;AAGjE,eAAO,MAAM,OAAO,wBAAwB,CAAC;AAC7C,eAAO,MAAM,UAAU,2BAA2B,CAAC;AACnD,eAAO,MAAM,QAAQ,yBAAyB,CAAC;AAC/C,eAAO,MAAM,SAAS,0BAA0B,CAAC;AAGjD,eAAO,MAAM,KAAK,qBAAqB,CAAC;AACxC,eAAO,MAAM,KAAK,qBAAqB,CAAC;AACxC,eAAO,MAAM,KAAK,qBAAqB,CAAC;AACxC,eAAO,MAAM,UAAU,2BAA2B,CAAC;AACnD,eAAO,MAAM,UAAU,2BAA2B,CAAC;AACnD,eAAO,MAAM,SAAS,2BAA2B,CAAC;AAClD,eAAO,MAAM,cAAc,+BAA+B,CAAC;AAC3D,eAAO,MAAM,WAAW,4BAA4B,CAAC;AACrD,eAAO,MAAM,YAAY,8BAA8B,CAAC;AACxD,eAAO,MAAM,UAAU,4BAA4B,CAAC;AACpD,eAAO,MAAM,WAAW,6BAA6B,CAAC;AAGtD,eAAO,MAAM,OAAO,uBAAuB,CAAC;AAG5C,eAAO,MAAM,UAAU,2BAA2B,CAAC;AACnD,eAAO,MAAM,YAAY,8BAA8B,CAAC;AACxD,eAAO,MAAM,UAAU,2BAA2B,CAAC"}

package/dist/mixin/src/colors/variables.js

@@ -0,0 +1,46 @@
+var primary100 = 'var(--rui-primary100)';
+var primary200 = 'var(--rui-primary200)';
+var secondary100 = 'var(--rui-secondary100)';
+
+// Contents  txt/ label/ border/ divider
+var contents000 = 'var(--rui-contents000)';
+var contents100 = 'var(--rui-contents100)';
+var contents150 = 'var(--rui-contents150)';
+var contents200 = 'var(--rui-contents200)';
+var contents300 = 'var(--rui-contents300)';
+var contents999 = 'var(--rui-contents999)';
+
+// Disable disabled CTA
+var disabled = 'var(--rui-disabled)';
+var disabledRoleRed = 'var(--rui-disabled-role-red)';
+var disabledSecondary = 'var(--rui-disabled-secondary)';
+
+// Accent Error/ Link/
+var roleRed = 'var(--rui-role-red)';
+var roleYellow = 'var(--rui-role-yellow)';
+var roleBlue = 'var(--rui-role-blue)';
+var roleGreen = 'var(--rui-role-green)';
+
+// Background
+var bg100 = 'var(--rui-bg100)';
+var bg200 = 'var(--rui-bg200)';
+var bg300 = 'var(--rui-bg300)';
+var bgModal100 = 'var(--rui-bg-modal100)';
+var bgModal200 = 'var(--rui-bg-modal200)';
+var bgRoleRed = 'var(--rui-bg-role-red)';
+var bgSecondary100 = 'var(--rui-bg-secondary100)';
+var bgHighlight = 'var(--rui-bg-highlight)';
+var bgRoleYellow = 'var(--rui-bg-role-yellow)';
+var bgRoleBlue = 'var(--rui-bg-role-blue)';
+var bgRoleGreen = 'var(--rui-bg-role-green)';
+
+// Divider
+var divider = 'var(--rui-divider)';
+
+// Fixed
+var fixedWhite = 'var(--rui-fixed-white)';
+var fixedBgWhite = 'var(--rui-fixed-bg-white)';
+var fixedBlack = 'var(--rui-fixed-black)';
+
+export { bg100, bg200, bg300, bgHighlight, bgModal100, bgModal200, bgRoleBlue, bgRoleGreen, bgRoleRed, bgRoleYellow, bgSecondary100, contents000, contents100, contents150, contents200, contents300, contents999, disabled, disabledRoleRed, disabledSecondary, divider, fixedBgWhite, fixedBlack, fixedWhite, primary100, primary200, roleBlue, roleGreen, roleRed, roleYellow, secondary100 };
+//# sourceMappingURL=variables.js.map

package/dist/mixin/src/colors/variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.js","sources":["../../../../src/colors/variables.ts"],"sourcesContent":["export const primary100 = 'var(--rui-primary100)';\nexport const primary200 = 'var(--rui-primary200)';\nexport const secondary100 = 'var(--rui-secondary100)';\n\n// Contents  txt/ label/ border/ divider\nexport const contents000 = 'var(--rui-contents000)';\nexport const contents100 = 'var(--rui-contents100)';\nexport const contents150 = 'var(--rui-contents150)';\nexport const contents200 = 'var(--rui-contents200)';\nexport const contents300 = 'var(--rui-contents300)';\nexport const contents999 = 'var(--rui-contents999)';\n\n// Disable disabled CTA\nexport const disabled = 'var(--rui-disabled)';\nexport const disabledRoleRed = 'var(--rui-disabled-role-red)';\nexport const disabledSecondary = 'var(--rui-disabled-secondary)';\n\n// Accent Error/ Link/\nexport const roleRed = 'var(--rui-role-red)';\nexport const roleYellow = 'var(--rui-role-yellow)';\nexport const roleBlue = 'var(--rui-role-blue)';\nexport const roleGreen = 'var(--rui-role-green)';\n\n// Background\nexport const bg100 = 'var(--rui-bg100)';\nexport const bg200 = 'var(--rui-bg200)';\nexport const bg300 = 'var(--rui-bg300)';\nexport const bgModal100 = 'var(--rui-bg-modal100)';\nexport const bgModal200 = 'var(--rui-bg-modal200)';\nexport const bgRoleRed = 'var(--rui-bg-role-red)';\nexport const bgSecondary100 = 'var(--rui-bg-secondary100)';\nexport const bgHighlight = 'var(--rui-bg-highlight)';\nexport const bgRoleYellow = 'var(--rui-bg-role-yellow)';\nexport const bgRoleBlue = 'var(--rui-bg-role-blue)';\nexport const bgRoleGreen = 'var(--rui-bg-role-green)';\n\n// Divider\nexport const divider = 'var(--rui-divider)';\n\n// Fixed\nexport const fixedWhite = 'var(--rui-fixed-white)';\nexport const fixedBgWhite = 'var(--rui-fixed-bg-white)';\nexport const fixedBlack = 'var(--rui-fixed-black)';\n"],"names":["primary100","primary200","secondary100","contents000","contents100","contents150","contents200","contents300","contents999","disabled","disabledRoleRed","disabledSecondary","roleRed","roleYellow","roleBlue","roleGreen","bg100","bg200","bg300","bgModal100","bgModal200","bgRoleRed","bgSecondary100","bgHighlight","bgRoleYellow","bgRoleBlue","bgRoleGreen","divider","fixedWhite","fixedBgWhite","fixedBlack"],"mappings":"AAAO,IAAMA,UAAU,GAAG,wBAAuB;AAC1C,IAAMC,UAAU,GAAG,wBAAuB;AAC1C,IAAMC,YAAY,GAAG,0BAAyB;;AAErD;AACO,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;AAC5C,IAAMC,WAAW,GAAG,yBAAwB;;AAEnD;AACO,IAAMC,QAAQ,GAAG,sBAAqB;AACtC,IAAMC,eAAe,GAAG,+BAA8B;AACtD,IAAMC,iBAAiB,GAAG,gCAA+B;;AAEhE;AACO,IAAMC,OAAO,GAAG,sBAAqB;AACrC,IAAMC,UAAU,GAAG,yBAAwB;AAC3C,IAAMC,QAAQ,GAAG,uBAAsB;AACvC,IAAMC,SAAS,GAAG,wBAAuB;;AAEhD;AACO,IAAMC,KAAK,GAAG,mBAAkB;AAChC,IAAMC,KAAK,GAAG,mBAAkB;AAChC,IAAMC,KAAK,GAAG,mBAAkB;AAChC,IAAMC,UAAU,GAAG,yBAAwB;AAC3C,IAAMC,UAAU,GAAG,yBAAwB;AAC3C,IAAMC,SAAS,GAAG,yBAAwB;AAC1C,IAAMC,cAAc,GAAG,6BAA4B;AACnD,IAAMC,WAAW,GAAG,0BAAyB;AAC7C,IAAMC,YAAY,GAAG,4BAA2B;AAChD,IAAMC,UAAU,GAAG,0BAAyB;AAC5C,IAAMC,WAAW,GAAG,2BAA0B;;AAErD;AACO,IAAMC,OAAO,GAAG,qBAAoB;;AAE3C;AACO,IAAMC,UAAU,GAAG,yBAAwB;AAC3C,IAAMC,YAAY,GAAG,4BAA2B;AAChD,IAAMC,UAAU,GAAG;;;;"}

package/dist/{index.cjs → mixin/src/index.cjs}

@@ -3,9 +3,9 @@
 var variables = require('./colors/variables.cjs');
 var utils = require('./colors/utils.cjs');
 var index = require('./mediaQuery/index.cjs');
-var index$1 = require('./typography/index.cjs');
-var _const = require('./mediaQuery/const.cjs');
 var _const$1 = require('./typography/const.cjs');
+var utils$1 = require('./typography/utils.cjs');
+var _const = require('./mediaQuery/const.cjs');
 
 
 
@@ -50,11 +50,11 @@ exports.desktopOnly = index.desktopOnly;
 exports.getDeviceWidthMediaQuery = index.getDeviceWidthMediaQuery;
 exports.mobileOnly = index.mobileOnly;
 exports.phoneOnly = index.phoneOnly;
-exports.ellipsis = index$1.ellipsis;
-exports.getTypographyStyles = index$1.getTypographyStyles;
-exports.textEllipsis = index$1.textEllipsis;
-exports.DESKTOP_WIDTH = _const.DESKTOP_WIDTH;
-exports.PHONE_WIDTH = _const.PHONE_WIDTH;
 exports.PRETENDARD_FONT_FAMILY = _const$1.PRETENDARD_FONT_FAMILY;
 exports.TYPOGRAPHY_STYLES = _const$1.TYPOGRAPHY_STYLES;
+exports.ellipsis = utils$1.ellipsis;
+exports.getTypographyStyles = utils$1.getTypographyStyles;
+exports.textEllipsis = utils$1.textEllipsis;
+exports.DESKTOP_WIDTH = _const.DESKTOP_WIDTH;
+exports.PHONE_WIDTH = _const.PHONE_WIDTH;
 //# sourceMappingURL=index.cjs.map

package/dist/mixin/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './colors';
+export * from './mediaQuery';
+export * from './typography';
+//# sourceMappingURL=index.d.ts.map

package/dist/mixin/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/dist/{index.js → mixin/src/index.js}

@@ -1,7 +1,7 @@
 export { bg100, bg200, bg300, bgHighlight, bgModal100, bgModal200, bgRoleBlue, bgRoleGreen, bgRoleRed, bgRoleYellow, bgSecondary100, contents000, contents100, contents150, contents200, contents300, contents999, disabled, disabledRoleRed, disabledSecondary, divider, fixedBgWhite, fixedBlack, fixedWhite, primary100, primary200, roleBlue, roleGreen, roleRed, roleYellow, secondary100 } from './colors/variables.js';
 export { getBrowserTheme, getColorVariableName, getHexFromRuiCssVariable, getRgb, getRgba, hexToRgb } from './colors/utils.js';
 export { desktopOnly, getDeviceWidthMediaQuery, mobileOnly, phoneOnly } from './mediaQuery/index.js';
-export { ellipsis, getTypographyStyles, textEllipsis } from './typography/index.js';
-export { DESKTOP_WIDTH, PHONE_WIDTH } from './mediaQuery/const.js';
 export { PRETENDARD_FONT_FAMILY, TYPOGRAPHY_STYLES } from './typography/const.js';
+export { ellipsis, getTypographyStyles, textEllipsis } from './typography/utils.js';
+export { DESKTOP_WIDTH, PHONE_WIDTH } from './mediaQuery/const.js';
 //# sourceMappingURL=index.js.map

package/dist/mixin/src/mediaQuery/const.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.cjs","sources":["../../../../src/mediaQuery/const.ts"],"sourcesContent":["export const DESKTOP_WIDTH = 768;\nexport const PHONE_WIDTH = 430;\n"],"names":["DESKTOP_WIDTH","PHONE_WIDTH"],"mappings":";;AAAO,IAAMA,aAAa,GAAG,IAAG;AACzB,IAAMC,WAAW,GAAG;;;;;"}

package/dist/mixin/src/mediaQuery/const.d.ts

@@ -0,0 +1,3 @@
+export declare const DESKTOP_WIDTH = 768;
+export declare const PHONE_WIDTH = 430;
+//# sourceMappingURL=const.d.ts.map

package/dist/mixin/src/mediaQuery/const.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/mediaQuery/const.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,WAAW,MAAM,CAAC"}

package/dist/{mediaQuery → mixin/src/mediaQuery}/const.js

@@ -1,5 +1,5 @@
-const DESKTOP_WIDTH = 768;
-const PHONE_WIDTH = 430;
+var DESKTOP_WIDTH = 768;
+var PHONE_WIDTH = 430;
 
 export { DESKTOP_WIDTH, PHONE_WIDTH };
 //# sourceMappingURL=const.js.map

package/dist/mixin/src/mediaQuery/const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"const.js","sources":["../../../../src/mediaQuery/const.ts"],"sourcesContent":["export const DESKTOP_WIDTH = 768;\nexport const PHONE_WIDTH = 430;\n"],"names":["DESKTOP_WIDTH","PHONE_WIDTH"],"mappings":"AAAO,IAAMA,aAAa,GAAG,IAAG;AACzB,IAAMC,WAAW,GAAG;;;;"}

package/dist/mixin/src/mediaQuery/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/mediaQuery/index.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\nimport type { CSSProp } from 'styled-components';\n\nimport { DESKTOP_WIDTH, PHONE_WIDTH } from './const';\n\nexport * from './const';\n\nexport function getDeviceWidthMediaQuery({\n  maxWidth,\n  minWidth,\n}: {\n  maxWidth?: number | string;\n  minWidth?: number | string;\n}) {\n  const mediaQueries: string[] = [];\n\n  if (maxWidth) {\n    mediaQueries.push(\n      `(max-width: ${\n        typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`\n      })`\n    );\n  }\n\n  if (minWidth) {\n    mediaQueries.push(\n      `(min-width: ${\n        typeof minWidth === 'string' ? minWidth : `${minWidth}px`\n      })`\n    );\n  }\n\n  return (cssInterpolation: CSSProp) => css`\n    @media ${mediaQueries.join(' and ')} {\n      ${cssInterpolation}\n    }\n  `;\n}\n\nexport const mobileOnly = getDeviceWidthMediaQuery({\n  maxWidth: DESKTOP_WIDTH - 1,\n});\nexport const desktopOnly = getDeviceWidthMediaQuery({\n  minWidth: DESKTOP_WIDTH,\n});\nexport const phoneOnly = getDeviceWidthMediaQuery({\n  maxWidth: PHONE_WIDTH,\n});\n"],"names":["mediaQueries","mobileOnly","desktopOnly","minWidth","phoneOnly","maxWidth"],"mappings":";;;;;;;;;;;AAAa;AASN;AAMJ;;;AAGD;AACEA;AAKF;AAEA;AACEA;AAKF;AAEA;AAAiC;;AAKnC;AAEaC;;AAEb;AACaC;AACXC;AACF;AACaC;AACXC;AACF;;;;;;;"}

package/dist/mixin/src/mediaQuery/index.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProp } from 'styled-components';
+export * from './const';
+export declare function getDeviceWidthMediaQuery({ maxWidth, minWidth, }: {
+    maxWidth?: number | string;
+    minWidth?: number | string;
+}): (cssInterpolation: CSSProp) => import("styled-components").RuleSet<object>;
+export declare const mobileOnly: (cssInterpolation: CSSProp) => import("styled-components").RuleSet<object>;
+export declare const desktopOnly: (cssInterpolation: CSSProp) => import("styled-components").RuleSet<object>;
+export declare const phoneOnly: (cssInterpolation: CSSProp) => import("styled-components").RuleSet<object>;
+//# sourceMappingURL=index.d.ts.map

package/dist/mixin/src/mediaQuery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/mediaQuery/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAIjD,cAAc,SAAS,CAAC;AAExB,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B,sBAmB2B,OAAO,iDAKlC;AAED,eAAO,MAAM,UAAU,qBAPK,OAAO,gDASjC,CAAC;AACH,eAAO,MAAM,WAAW,qBAVI,OAAO,gDAYjC,CAAC;AACH,eAAO,MAAM,SAAS,qBAbM,OAAO,gDAejC,CAAC"}

package/dist/mixin/src/mediaQuery/index.js

@@ -0,0 +1,32 @@
+"use client";
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { css } from 'styled-components';
+import { DESKTOP_WIDTH, PHONE_WIDTH } from './const.js';
+
+var _templateObject;
+function getDeviceWidthMediaQuery(_ref) {
+  var maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth;
+  var mediaQueries = [];
+  if (maxWidth) {
+    mediaQueries.push("(max-width: ".concat(typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px"), ")"));
+  }
+  if (minWidth) {
+    mediaQueries.push("(min-width: ".concat(typeof minWidth === 'string' ? minWidth : "".concat(minWidth, "px"), ")"));
+  }
+  return function (cssInterpolation) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @media ", " {\n      ", "\n    }\n  "])), mediaQueries.join(' and '), cssInterpolation);
+  };
+}
+var mobileOnly = getDeviceWidthMediaQuery({
+  maxWidth: DESKTOP_WIDTH - 1
+});
+var desktopOnly = getDeviceWidthMediaQuery({
+  minWidth: DESKTOP_WIDTH
+});
+var phoneOnly = getDeviceWidthMediaQuery({
+  maxWidth: PHONE_WIDTH
+});
+
+export { DESKTOP_WIDTH, PHONE_WIDTH, desktopOnly, getDeviceWidthMediaQuery, mobileOnly, phoneOnly };
+//# sourceMappingURL=index.js.map

package/dist/mixin/src/mediaQuery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/mediaQuery/index.ts"],"sourcesContent":["'use client';\n\nimport { css } from 'styled-components';\nimport type { CSSProp } from 'styled-components';\n\nimport { DESKTOP_WIDTH, PHONE_WIDTH } from './const';\n\nexport * from './const';\n\nexport function getDeviceWidthMediaQuery({\n  maxWidth,\n  minWidth,\n}: {\n  maxWidth?: number | string;\n  minWidth?: number | string;\n}) {\n  const mediaQueries: string[] = [];\n\n  if (maxWidth) {\n    mediaQueries.push(\n      `(max-width: ${\n        typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`\n      })`\n    );\n  }\n\n  if (minWidth) {\n    mediaQueries.push(\n      `(min-width: ${\n        typeof minWidth === 'string' ? minWidth : `${minWidth}px`\n      })`\n    );\n  }\n\n  return (cssInterpolation: CSSProp) => css`\n    @media ${mediaQueries.join(' and ')} {\n      ${cssInterpolation}\n    }\n  `;\n}\n\nexport const mobileOnly = getDeviceWidthMediaQuery({\n  maxWidth: DESKTOP_WIDTH - 1,\n});\nexport const desktopOnly = getDeviceWidthMediaQuery({\n  minWidth: DESKTOP_WIDTH,\n});\nexport const phoneOnly = getDeviceWidthMediaQuery({\n  maxWidth: PHONE_WIDTH,\n});\n"],"names":["mediaQueries","mobileOnly","desktopOnly","minWidth","phoneOnly","maxWidth"],"mappings":";;;;;AAAa;AASN;AAMJ;;;AAGD;AACEA;AAKF;AAEA;AACEA;AAKF;AAEA;AAAiC;;AAKnC;AAEaC;;AAEb;AACaC;AACXC;AACF;AACaC;AACXC;AACF;;"}

package/dist/{typography → mixin/src/typography}/const.cjs

@@ -9,6 +9,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /* eslint-disable @typescript-eslint/naming-convention */
+
 var LEGACY_TYPOGRAPHY_STYLES = {
   Headline2_B: {
     fontSize: 24,
@@ -108,6 +109,7 @@ var TYPOGRAPHY_STYLES = _objectSpread(_objectSpread({}, LEGACY_TYPOGRAPHY_STYLES
     fontWeight: 600
   }
 });
+
 /**
  * {@link https://github.com/orioncactus/pretendard#html-1}
  */